I have a series of points that has fast changing values, which makes it very spiky and uneasy to read when zooming out.
I would like to know if there is a way to draw above the already existing series, another one that would represent the average of, for exemple: every 10 points, or every point in a minute?
I've looked into dataGrouping but can't seem to make it work, is that what I'm looking for ?
Thanks for reading.
There is no current built-in method to do this. You would need to create a second series that is the running average and add it to the chart.
The main issue here is that HS has dataGrouping enabled by default for all series. So, when you add your second series that has dataGrouping enabled with params you want - it is also applied to the initial series. You only see one series on the chart because the 2 series are identical and overlap each other.
To fix this set dataGrouping off in the "real" series. Then have dataGrouping on in the averaged series. See this example.
...
series: [{
name: 'MSFT',
data: MSFT,
dataGrouping: {
enabled: false
}
}]
...
Related
I have a live graph that updates every x time. Included below is an image using a dummy variable. What I would like is for Highcharts to only label the first, middle, and last. Or anything to where I don't spam my graph label with ticks.
Presently my xAxis looks like so:
xAxis: {
crosshair: true,
type: "categories",
categories: xaxis
},
Nothing out of the ordinary. I have tried adding a tickInterval, however, that does not really solve the issue over the long run. Essentially what I need is the opposite of a tickInterval, where ticks are removed after a certain interval. Not unlike the datetime API that highcharts currently has. The difference here is that this data cannot be generated by myself, but by an API that I am using, which spits out the as-shown x-axis label.
After a while, in case there is too much xAxis labels displayed on a chart, the number of them is automatically reduced (the first example). Although, if you want, you can use couple of solutions. The best way, would be to use tickPositioner to display only the first, the middle and the last labels and format them using Highcharts.dateFormat inside xAxis.labels.formatter (the second example). You could also set bigger step of xAxis.labels (the third example).
API Reference:
http://api.highcharts.com/highcharts/xAxis.tickPositioner
http://api.highcharts.com/highcharts/Highcharts.dateFormat
http://api.highcharts.com/highcharts/xAxis.labels.step
Example:
http://jsfiddle.net/vxjdwer7/ - default behaviour
http://jsfiddle.net/30t45zvq/ - using tickPositioner
http://jsfiddle.net/6g9uvokL/ - using step
I have a chart where two graphs/series have different units. Therefore the y-Axis is different and the extremes are calculated separately from each other.
Is there a way to tell Highcharts to use the same scale, despite the different units, across all graphs/series?
Below is the chart. Relevant y-axis are the ones on the right, as an example. The units are different: "W/m^2" and "kW/kWp", however I want the scale to be the same.
Of course, one way would be a manual approach: in my controller, to go through all the data series and check the overall minimum and maximum value of all data series and then apply the extremes manually via
chart.yAxis[i].setExtremes(min, max)
but I was wondering if Highcharts has any way, like a configuration option, to achieve this.
I didn't find anything in the docs so far.
Thanks.
There is an option to achieve that. You can link one axis to another via linkedTo property.
From API:
linkedTo : Number
Index of another axis that this axis is linked to. When an axis is linked to a master axis, it will take the same extremes as the master, but as assigned by min or max or by setExtremes. It can be used to show additional info, or to ease reading the chart by duplicating the scales.
http://api.highcharts.com/highcharts/yAxis.linkedTo
Example: http://jsfiddle.net/n8tokqru/
yAxis: [{
}, {
linkedTo: 0
}],
If I am setting the rangeSelector to All, and clicking on a series in the legend. It seems like some series data gets lost or wont be displayed.
I cant figure out the problem, am I displaying too much data? I guess there wont be a problem with the json data structure (I am using the same structur as in all the demos (on the highcharts website)) - mostly it is a 2dim/3dim array.
I will attatch some screenshots of the given problem:
seems like a general highstock problem: http://jsfiddle.net/ZqqsE/1/ just added to the given demo from the highstock demos (http://www.highcharts.com/stock/demo/compare) a legend and if you select "All" and hide one of the 3 series, the other series are truncated.
legend: {
align: "right",
layout: "vertical",
enabled: true,
verticalAlign: "middle"
},
http://jsfiddle.net/eKQcK/1/
I am pretty sorry, but i cant provide example data, because my datasets are quite big - as I said - I am using the same datastructure like the examples on highcharts.com.
[[[series1 timestamp, series1 value],[series1 timestamp, series1 value],[iteminformation]],[[series2 timestamp, series2 value],[iteminformation]],[[series3 timestamp, series3 value], [series3 timestamp, series3 value],[iteminformation]]]
as you can see in my jsfiddle code, I am using an array called informationarray, which provides information about the series as an array element.
e.g.
[seriesname, series max value, series min value]
I just added this element at the end of every series array
Simplifying my story, consider 2 series where I link their yAxes. In other words on the second yAxis there is a property linkedTo: 0
So the first yAxis is the master, hence sets extremes for both series.
However sometimes the second series has high values which are too high to be plotted in the visible area and so they get cropped.
To make matters worse, when the yAxes are linked to each other, the legend doesn't play ball: clicking on the master series name in the legend will hide both series. Clicking on the secondary series name will hide none.
Check out this JSFiddle - values on the right are cropped, legend functionality is broken.
What am I missing? How can I get both series to scale together and be all visible? How do I get the legend to work as expected? (click on series name should toggle it)
Thanks!
EDIT: As it turns out, if I remove yAxis.id (JSFiddle here) the chart and legend work as expected. However linking series to yAxis based on position in the array (I think?) instead of by some ID (string) sounds less than ideal.
Ideas?
Why you are trying assigning second series to axis which is just copy of proper one? I advice to set both series to master yAxis, and second yAxis use just as extra info on the right side of a chart.
Otherwise I don't understand the purpose of linking second axis to get THE SAME extremes as master yAxis, and then expecting to scale that yAxis according to series you have attached to that yAxis.
Something like this I think is better approach, see: http://jsfiddle.net/zYpcm/15/
series: [{
name: 'master',
data: self.masterData,
yAxis: 'master'
}, {
name: 'secondary',
data: self.secondaryData,
//yAxis: 'secondary'
}],
yAxis: [{
id: 'master'
}, {
id: 'secondary',
opposite: true,
linkedTo: 0
}]
On hiding both the series using legends, and then clicking one of the series shows xAxis starting from '-1', when ideally it should show only not null categories.
Using 'ignoreHiddenSeries: false' solves the purpose but again on hiding both the series using legend and then enabling other series tends to overlap both the series. Although on window resize event, series get aligned properly.
chart: {
type: 'column'
// ignoreHiddenSeries: false
},
Example for reference: http://jsfiddle.net/t88rc/
You can simply set for xAxis min:0, see: http://jsfiddle.net/t88rc/2/
Grouped column charts work best with equal number of data points per series.
Best solution I have found for this is to fill any missing data points with null values:
http://jsfiddle.net/jlbriggs/t88rc/1/
data: [49.9, 71.5,null,null,null,null,null,null]