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 ;)
Related
I have two datasets which I want to display on an eCharts canvas, as two separate line charts:
a quarterly revenue chart, and
a daily stock price chart.
Using the code below, both line charts are displayed, but because the datasets have different array lengths, the revenues line chart is being squeezed into the left hand side of the canvas, while the stock price chart is displayed properly in full width. Also, the x-axes aren't aligned with each other, because the date-ranges don't overlap completely (the quarterly data starts earlier than the price data, see below example).
The first, long dataset, containing daily stock prices, looks as follows:
var dailyStockprices = [123,124,125, ... etc] // array length 600
var dailyDates = ["2019-01-02","2019-01-03","2019-01-04", ... etc] // array length 600
The second, very short dataset, containing quarterly revenues, looks as follows:
var quarterlyRevenues = [123,124,125, ... etc] // array length 20
var quarterlyDates = ["2018-09-30","2018-12-31","2019-03-31", ... etc] // array length 20
The eCharts code looks as follows:
var myChart = echarts.init(document.getElementById('mainchart1'));
option = {
xAxis: [{
type: 'category',
data: dailyDates
}, {
type: 'category',
data: quarterlyDates
}],
yAxis: [{
type: 'value'
}, {
type: 'value'
}],
series: [{
data: dailyStockprices,
type: 'line',
yAxisIndex: 0
}, {
data: quarterlyRevenues,
type: 'line',
yAxisIndex: 1
}]
};
myChart.setOption(option);
Here's a simplified JSFiddle example: https://jsfiddle.net/frankmarks/szm1f20j/9/
How can I make both line charts display properly, i.e. full width, on the same canvas, with both x-Axes being aligned?
After some research, I found the solution, which is to set the axis type to 'time' instead of 'category', which automatically align the axis alignment and answers my question entirely.
Further explanation as to how to format the data is given in the eCharts documentation here: https://ecomfe.github.io/echarts-doc/public/en/option.html#series.data
Excerpt:
When a dimension corresponds to a time axis (type is 'time'), the value can be:
a timestamp, like 1484141700832, which represents a UTC time.
a date string, in one of the formats below: a subset of ISO 8601, only
including (all of these are treated as local time unless timezone is
specified, which is consistent with moment): only part of
year/month/date/time are specified: '2012-03', '2012-03-01',
'2012-03-01 05', '2012-03-01 05:06'. separated by "T" or a space:
'2012-03-01T12:22:33.123', '2012-03-01 12:22:33.123'.
timezone specified: '2012-03-01T12:22:33Z', '2012-03-01T12:22:33+8000',
'2012-03-01T12:22:33-05:00'.
other date string format (all of these
are treated as local time): '2012', '2012-3-1', '2012/3/1',
'2012/03/01', '2009/6/12 2:00', '2009/6/12 2:05:08', '2009/6/12
2:05:08.123'.
a JavaScript Date instance created by user: Caution,
when using a data string to create a Date instance, browser differences and inconsistencies should be considered.
For example: In chrome, new Date('2012-01-01') is treated as a Jan 1st 2012 in UTC, while new Date('2012-1-1') and new Date('2012/01/01') are treated as Jan 1st 2012 in local timezone. In safari new Date('2012-1-1') is not supported.
So if you intent to perform new Date(dateString), it is strongly recommended to use a time parse library (e.g., moment), or use echarts.number.parseDate.
I'm using Highcharts 6.1.1 with react-highcharts 16.0.0. When I create a 'column' style chart with 30 series or less, the data points with matching x-values all are arranged side by side:
But, if i add another series, bringing the total to 31, Highcharts no longer groups the columns side by side, and instead renders them all in the same place, not stacked, just overlapping:
I can't seem to find a setting in highcharts config to change this grouping threshold, and have experimented quite a bit with setting paddings and widths and such to try to maximize the number of columns it will show side by side, but i can never get it to work with more than 30 series.
When you are using the boost module, columns are always one pixel wide. Additionally, a lot of functionality (such as grouping, which causes this problem) is disabled when the boost module works.
Here: https://github.com/highcharts/highcharts/issues/6600, you have very well explained the assumptions of this module.
To work around, you can use decimal x values:
series: [{
data: [1]
}, {
data: [2, 2]
}, {
data: [{
x: 0.3,
y: 1
}]
}, {
data: [2]
}, ... ]
Live demo: http://jsfiddle.net/BlackLabel/8bq9yL4f/
The problem was in the boost part of the config:
config = {
boost: {
enabled: true,
useGPUTranslations: true,
seriesThreshold: 30
},
}
So I can up that seriesThreshold or just disable boost for this case to solve the problem. Though I would like to know if there's a way to get the boost rendering to correctly show the columns side by side.
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
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/
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.