In the chart when it start drawing main series (LTP), It draws on whole width.
Is there a way to draw it just like the selector chart at bottom?
EDIT : I want entire xAxis viewable and then add the points without auto-scaling the xAxis.
Have a look at my code
http://jsfiddle.net/S9SwB/9/
Build up on #wergeld's solution here, as you see in his solution, the end of x-axis was position correctly at 5:30 but there was a suddent leap in time, this is because the ordinal property of the axis is set to true by default, which means all points are equally spaced in terms of pixels, immaterial of difference in terms of time, so the axis leaves enough room at right for just 1 point, and hence number of pixels required to add one point. On setting ordinal to false, it will allocate as much space as is needed based on time difference.
All in all, here goes your solution :) http://jsfiddle.net/jugal/UP5sW/
var min = new Date().getTime();
var max = min + 50 * 500;
//...
xAxis: {
ordinal: false,
max:max
},
series: [
{
name: 'Series 0',
data: [[min, 0]]
},
{
name: 'End',
data: [[max, 0]]
}]
More about ordinal option # http://www.highcharts.com/stock/ref/#xAxis--ordinal & http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/ordinal-false/
Related
I am using chart.js line chart to show some graph for my data of resource usage for say a particular period where period may vary like last one day, last one week, last one month and so on.. I am using line chart and the code is as below.
Basically I want my canvas to get resized according to the period selected in my dropdown. Say if i select 1 day, the canvas shuld be shrinked to display one day data, I mean if I have to display data for one month, width of my canvas should be 100% (data should be shown in entire canvas) , one week canvas should shrink to say 25% of the whole canvas(data should be shown in 25% of the canvas) and for one day width should be 10% of canvas.
If someone is aware of how this has to be achieved using chart.js, would be helpful
var myData = {
labels: timeX,
datasets: [{
data: percentageY
}]
};
MEMORY_LINE_CHART = new Chart(ctx, {
type: 'line',
data: myData,
options: {
bezierCurve: false ,
scaleIntegersOnly: false,
animation : false,
responsive: true,
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}],
xAxes: [{
ticks: {
display:true
}
}]
} // scales
}
});
Usually the charts are displayed like that only, Jus imagine if my max data is 1 year huge. And if the user wishes to see ony for last one day, So big my canvas would be say 600x600 which accommodates around one year data, just imagine how small would be the size for displaying one day data if we keep on reducing the width as per your reqs or specs.
You may see the examples here, which doesn't change the chart width or size
https://finance.yahoo.com/echarts?s=YHOO+Interactive#{%22allowChartStacking%22:true}
http://www.marketwatch.com/investing/stock/live/charts
Give a thought and enjoy charting ;)
i wonder if it's possible to draw confidence intervals like in this graph:
(source: tonarchiv.ch)
I.e. an interval for each sample and a point or small line in the "middle".
X-axis should just be a number (number of rating).
Columnrange is the answer! See: http://jsfiddle.net/dmN3N/18/
series: [{
type: 'columnrange',
data: [
[-0.547571175, 0.401498266],
[-0.960011899, 0.444655955],
...
]
}, {
type: 'scatter',
data: [-0.073036455, -0.257677972,
0.100955985, 0.106734365,
-0.12219027, -0.060577832
]
}]
If required, the dashes at each end of a column (see sample pic) could be generated with other (wider than tall) column ranges...
Here is an example rantanplan's suggestion of using columnranges for the dashes at the top and bottom of each bar:
The horizontal lines are created using 'columns' which are 15 pixels wide and 2 pixels tall, positioned at both ends of the data range. For example, here are the lines at the top of each bar:
type: 'columnrange',
pointWidth: 15,
minPointLength: 2,
data: [
[0.40, 0.40],
[0.30, 0.30]
]
Another series creates the lines at the bottom, and a third additional series (scatter) creates the diamond marker in the middle.
https://jsfiddle.net/ecjohbg1/4/
You can try to use plotBands: http://api.highcharts.com/highcharts#xAxis.plotBands
There is now a series type called 'errorbar' which fits this use case perfectly. While the other solutions glue together three different series for the intervals, the errorbar series does it all with one. A separate series is still needed for the mean.
Here is an example
https://www.highcharts.com/docs/chart-and-series-types/error-bar-series
Here is the API reference https://api.highcharts.com/highcharts/series.errorbar
I am trying to overlay 2 diagonal lines over top of a negative stacked bar chart. The purpose of these lines is to show where the optimal value for each bar should be.
The chart will always be from -10% to 10% along the x-axis, so the lines do not need to scale smaller if the graph grew. (though that would be nice to know how to do that as well if it's a small addition)
I am relatively new to HighCharts and I can't seem to find out if this is possible or not.
Given that the intersection of the lines are always going to intersect at the same point I made this. What I did was create two additional series that go from -10 to 0 and 10 to 0. You could do this with one series as well but maybe the male/female projection lines are different? Your choice.
Now, since I do not know where the two lines should intersect I had them end at the final category. You can adjust this by giving the two series different end points. The other trick is to fill the 2 projection lines with null for the in-between points and allow the 2 end points to be connected. I also hid the markers, hid the series from the legend, and allowed for different line styles.
Important bits:
{
name: 'line1',
type: 'line',
color: 'black',
dashStyle: 'dot',
connectNulls: true,
showInLegend: false,
marker: {
enabled: false
},
data: [0, null},
...
, 10]}
Since these data series are stacked we need to make sure only those series get stacked otherwise the 2 projected lines get stacked as well. Do this via:
plotOptions: {
bar: {
stacking: 'normal',
//pointWidth: 20
}
},
Note that is only applying stacking to the 'bar' types. Update jsFiddle.
I want to create a graph with four quadrants using flot. I need to have labels on both the left and right-hand sides of the graph - with the same ticks. Here is my code:
$.plot($("#placeholder"), [ [<%=points%>] ], { series: {lines: { show: false },
points: { show: true }},
yaxes: [{ ticks:[[0,"Left"]],max: 100, min:-100 },
{ position: "Right",ticks:[[0,"Right"]], max:100, min: -100 }],
xaxis: { ticks:[[0,"Bottom"]], max: 100, min:-100 } });
I get the "Left" and "Bottom" labels but nothing on the right-hand side. Thanks in advance for any help you can provide.
I had this same issue. In order to have the secondary y-axis appear on the right side of the plot, you need to have a series connected to it, but that lies outside your displayed data range:
{label:"dummy data",data:[[-1000,-100],[-1000,100]], yaxis:2} //yaxis array is indexed from 1
Since your range appears to be fixed, matching the ticks is pretty straighforward. My range and ticks was highly dynamic, so I got the ticks to match by including a complete duplicate series of my primary data hooked to the secondary yaxis. I just shifted it on the xaxis to be completely out of range for display.
Yes, this is wasteful, since it involves delivering extra data. But until Flot supports showing yaxes without series conencted, this will get it done.
I would like to plot two sets of values on a bar chart, that have different scales. For example, for each day of the week, I have a proportion (say the proportion of colleagues that were late that day) and a value (how late they were, on average).
These two values can be plot on two separate charts, but it would be useful to have them on the same, for better comparison. The problem is that they don't have the same scale, thus it's not possible to use one common scale for the Y axis. The solution is to have two separate scales for the Y axis.
Is it possible to do this using Google Chart Tools? I am using the JS api to generate interactive SVG charts, not the "still image" version.
This is possible with defining two axis:
vAxis: {
0: {
viewWindow: {
min: 0,
max: 1000
}
},
1: {
viewWindow: {
min: 0,
max: 200
}
}
}
This will plot the chart with two vertical axes, both with their own scale from min to max.
I was not able to find a way, so I switched to HighCharts for my plots. It can handle multiple y axes:
http://www.highcharts.com/demo/combo-dual-axes