Is there a way to display a total of the data shown on the chart (and respects the navigator 'zoom' settings)?
I'm charting electricity usage so a total per range (let's say there's a peak usage of 20 minutes or so, and i set the navigator to that range) would be a nice thing to have.
You can catch afterSetExtremes event and calculate points from range.
http://jsfiddle.net/TdFjy/
xAxis: {
events: {
afterSetExtremes: function () {
var counter = 0,
min = this.min,
max = this.max;
$.each(chart.series[0].options.data, function (i, point) {
if (point[0] >= min && point[0] <= max) counter++;
});
$('#report').html(counter);
}
}
},
Related
See attached image.
The major gridlines are set to be 500 apart. However, when data points are close to a 500 increment (in this case the highlighted blue bar is 966 which is close to the 1000 gridline), Highcharts seems to be rendering the next gridline (1500 in my example) which is causing all this wasted space on the chart.
Can I prevent Highcharts from rendering a new gridline at the edges of the chart, unless one of the blue bars actually exceeds the value of the gridline?
You can use yAxis.tickPositioner function to add a custom logic to calculate ticks:
yAxis: {
tickPositioner: function() {
var dataMin = this.dataMin,
dataMax = this.dataMax,
interval = 500,
i = roundData(dataMin),
max = roundData(dataMax),
ticks = [];
function roundData(data) {
if (data < 0) {
data = Math.floor(dataMin / interval) * interval
} else {
data = Math.ceil(dataMax / interval) * interval
}
return data;
}
for (; i <= max; i += interval) {
ticks.push(i);
}
return ticks;
}
}
Live demo: http://jsfiddle.net/BlackLabel/yaphesw4/
API Refefence: https://api.highcharts.com/highcharts/xAxis.tickPositioner
Turns out the setting I needed was this:
yAxis: {
maxPadding: 0,
minPadding: 0, // only needed if your chart has negative values
}
I have a chart like this, you can see that only about 22 points in the chart from left to right. I want to increase this, so that there are more points. Right now it seems very jumpy, but the range is only between 10-11.5, I want to "zoom out" so the line almost looks flat, and these huge peaks and valleys look like little bumps. I've combed over the highcharts documentation and cannot find this config setting.
In the initial creation of the spline chart, an array of point is created, in the default case it is 49 samples, here I changed it to 200, which did what I needed.
series: [{
name: 'Random data',
data: (function () {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -200; i <= 0; i += 1) {
data.push({
x: time + i * 1000,
y: Math.random()
});
}
return data;
}())
}]
If i zoom an HighStock multi series chart (using either the Navigator or the Range Selector), is there a way to fetch the point.y data only for the zoomed series?
For example, if I am showing the sales information for a period across multiple branches (each branch plotted as series), and if zoomed to a week, I would like to know the total of sales for the week across the branches. Does highstock provide access to the zoomed dataset?
You can check isInside flag on every point:
redraw: function() {
var sum = 0;
Highcharts.each(this.series[0].points, function(point) {
if (point.isInside) {
sum += point.y;
}
});
console.log(sum)
}
Live demo: http://jsfiddle.net/BlackLabel/7kmzhecy/
A very brute force approach to this is to loop over your data upon zooming and evaluate if it is visible. That is, is a given point within the range of the x-axis (and y-axis, if you allow zoom in that direction)?
chart: {
events: {
redraw: function() {
sum = 0;
xAxis = this.xAxis[0];
// Loop over your series
this.series[0].data.forEach(function(point) {
// Add to sum if within x-axis visible range
if(point.x >= xAxis.min && point.x <= xAxis.max) {
sum += point.y;
}
// If too large, stop summing
if(point.x > xAxis.max) {
return;
}
});
// Print sum
console.log('Visible sum: '+sum);
}
}
}
See this JSFiddle demonstration of it in use.
You might evaluate xAxis.events.setExtremes, but it offers min and max values that might change after it takes effect, which might give some unexpected results.
I'd like to turn dataGrouping on if the number of points is over 1000, but automatically zoom into the last 1000 points.
Has anyone done this yet and/or know of a way?
Thanks
Datagrouping
Use condition to set the flag enabled in plotOptions.series.dataGrouping as
plotOptions: {
series: {
dataGrouping: {
enabled: data.length > 1000 ? true : false
}
}
},
Range 1000 last points
Extract the last point as max and last point - 1000 as min, then call setExtremes()
var seriesData = data,
lenSeries = seriesData.length - 1,
max = seriesData[lenSeries][0],
min = seriesData[lenSeries - 1000][0];
chart.xAxis[0].setExtremes(min, max);
http://jsfiddle.net/BlackLabel/bwmcdg6w/
Is there a way to get only three steps on the xAxis, one at start, one in the middle and one in the end. I've played around with xAxis.labels.steps but I couldn't get an reliable result.
Note the xAxis type is datetime.
There is at least three ways to achieve that (which are automatically):
Use tickPositioner (the best IMHO): you have full access to decide where tick should be set (for example: [min, average, max]).
Use tickPixelInterval: useful only when you have fixed width of the chart, and when interval will be multiple of ncie numbers (like 0 - 1 - 2, or 100 - 200 - 300)
Use tickInterval: useful only when you know range of xAxis, for example 0-10, so you can set tickInterval: 5
And jsfFiddle with compare: http://jsfiddle.net/FQ68Y/3/
You can do this with the tickPositions option or the tickPositioner function:
http://api.highcharts.com/highcharts#xAxis.tickPositioner
tickPositions: [0, 1, 2]
or something like:
tickPositioner: function () {
var positions = [],
tick = Math.floor(this.dataMin),
increment = Math.ceil((this.dataMax - this.dataMin) / 2);
for (; tick - increment <= this.dataMax; tick += increment) {
positions.push(tick);
}
return positions;
}
As the other answers mention there is the tickPositioner field. For some reason it dont work out of the box. I had to add an info property to the returning array to get the xAxis to display formatted dates instead of just the milliseconds, as found in this fiddle.
tickPositioner: function (min, max) {
var ticks = [min, min + (max - min) / 2, max];
ticks.info = {
unitName: 'hour',
higherRanks: {}
};
return ticks;
}