I have a dynamic data series like this
[1,0],[2,0],[3,0],[4,0],[5,0],[6,2],[7,5],[8,6],[9,6],[10,6],[11,7],[12,8],[13,8],[14,9]
The data grows automatically, so later on, an extra data point will be added e.g. [15,13]
I have an input field in which the user can select how many points from the end he wants to show.
For example if he inputs 5, only [10,6],[11,7],[12,8],[13,8],[14,9] should be visible. But when the additional point is added, this should become [11,7],[12,8],[13,8],[14,9],[15,13] automatically.
I think I have to use chart.xAxis[0].setExtremes() but I don't know what to enter as parameters... ?
You will have to "reapply" setExtremes when adding a point. The setExtremes function takes in these parameters (API):
setExtremes (Number min, Number max, [Boolean redraw], [Mixed animation])
You would have to use min and max to show the desired number of points, and have that include the last one. For example, you could do something like this:
var chart = $('#container').highcharts();
var numberOfPointsToShow = 5;
// Add new random point
chart.series[0].addPoint(Math.random() * 25);
// Get index of last point
var lastPoint = chart.series[0].data.length - 1;
// Set extremes to go from "min" (based on last point) to last point
chart.xAxis[0].setExtremes(
lastPoint - (numberOfPointsToShow - 1), // min
lastPoint); // max
See this JSFiddle example with dynamic adding of points.
Related
I have set up a fiddle which allows you to move the highstock navigator and see underneath the times selected plus a sum of the values for the selected period.
http://jsfiddle.net/o8dLh3m5/3/
The problem I am having is that when the selection contains too much data, the chart.series[0].data array is empty so I can't calculate the total.
Could someone please explain what is happening (ie where is this threshold set?), and what are my options for calculating totals when the data returned is larger than the threshold.
Thanks in advance,
xAxis:{
type: 'datetime',
events: {
afterSetExtremes:function(event){
// convert to dd/mm/yyyy hh:mm
var start_date = new Date(event.min);
var end_date = new Date(event.max);
$('#id_start_date').text( moment(start_date).format('DD/MM/YYYY HH:mm') );
$('#id_end_date').text( moment(end_date).format('DD/MM/YYYY HH:mm') );
// get totals
var sum = 0, chartOb = this;
$.each(chartOb.series, function(series_id){
$.each(chartOb.series[series_id].data, function(i,point){
// array returned is empty!
When number of points exceeds cropThreshold, then array can be empty. I think it would be better to use series.processedYData to calculate that sum. That is just an array with actually displayed y-values on a chart in one series.
Note: It's not part of official API but can be used ;)
We're working on a Highcharts Bubble Chart w/category axis and a lot of overlapping data points. Is there any way to control exactly how the bubbles are placed within the category? What we'd like to do is sort the bubbles ahead of time and then offset them from each other a bit. Some overlap is desirable so we'd prefer to not have to add additional categories to make sure there is no overlap.
Unfortunately we have no solution for controling positions of the bubbles. But you can request your propositin in our uservoice system http://highcharts.uservoice.com/
If you are using categories, your x values are the array index of the category for your value.
So to tweak the placement, you can tweak your x value by adding/subtracting small decimal amounts:
http://jsfiddle.net/yPLVP/10/
[-0.1,2,10]
Keeping in mind that +/- .5 is the center point between the categories - so for a value that falls within the 3rd category (x value 2), keep your x values between 1.55 and 2.45 (or so....)
I have the same problem, you can add this code:
function(chartObj) {
$.each(chartObj.series[0].data, function(i, point) {
var aux = 0;
if (i % 2 == 0)
aux = point.dataLabel.y + 6;
else
aux = point.dataLabel.y - 6;
point.dataLabel.attr({y:aux});
});
jsFiddle: http://jsfiddle.net/9m6wu/277/
I've got a chart that has a large number of data points. I'm setting the extremes right now so it only shows a smaller number - about 100 or so at a time. The issue I have is I don't want to disable the range selector or the manual input for dates, but currently the user can expand the range selector to include the entire data set. Is there any way to limit this so they can only grab, at most, X number of points?
I don't want to use data grouping either, I have different data for different data groups, so it's important the grouping does not change. Thanks in advance for any pointers on this one!
Unfortunately you can't disable range selector for such purpose, but you can overwrite extremes after user change them, see:
api.highcharts.com/highstock#xAxis.events.afterSetExtremes So for example, if user takes range for 4 days and you want max for 2 days - grab one of min or max, and add/remove two days in extremes (call chart.xAxis.setExtremes() with new extremes). Of course, it will call another afterSetExtremes, so it would be infinite loop, however now extremes will be proper (two days), so it wouldn't call another setExtremes().
Here's a working example of using afterSetExtremes (like Dexter describes) to create a maximum range from the range selector :
http://jsfiddle.net/B7vCR/3/
xAxis: {
minRange:6 * 30 * 24 * 3600 * 1000,
events: {
afterSetExtremes: function(e) {
var maxDistance = 10 * 30 * 24 * 3600 * 1000; //8 months time
var xaxis = this;
if ((e.max - e.min) > maxDistance) {
var min = e.max - maxDistance;
var max = e.max;
window.setTimeout(function() {
xaxis.setExtremes(min, max);
}, 1);
}
}
}
}
From this post
http://forum.highcharts.com/viewtopic.php?f=12&t=21741
I have a chart with multiple series for which I have a button that resets the yAxis to a specific amount. I would like to set this specific amount to be the 85th percentile of the yAxis values. Is there a way to calculate this?
jsfiddle example: http://jsfiddle.net/inadcod/TynwP/
Very strange that you wish to do this on the client, you could very easily sort and get the value of the 85th percentile on the server where you are actually sending the data from and use it as a max value for the y axis.
Anyway, you can access the data values using the series.points object array, this contains all the points for the given series, it has many properties of which point.y seems to be of your interest. Loop through all these and store them in another array for convenience and sort this new array. take the length of the array and multiple by the factor you wish to (0.85) and this is the index of the element a.k.a. 85th percentile. Set the min of the given yAxis using this value
var yData = [];
$.each(chart.series[0].points, function() {
yData.push(this.y);
});
var sortedY = sort(yData);
var eightyFifthPercentile = sortedY[Math.floor(sortedY.length * 0.85)];
alert(eightyFifthPercentile);
http://jsfiddle.net/jugal/HkS2Y/
You can do it this way:
var yAxis = chart.yAxis[0];
var extremes = yAxis.getExtremes();
yAxis.setExtremes(extremes.min, extremes.dataMax * 0.85);
See demo here: http://jsfiddle.net/gyavJ/
I'm seeing some odd behavior in a Highcharts line chart. I have multiple series displayed, and need to let the user change what's called the "Map level" on the chart, which is a straight line across all time periods. Assuming that the correct series is
chart.series[i]
and that the new level that I want it set to is stored in var newMapLevel,
I'm changing that series' data like so:
data = chart.series[i].data;
for(j=0; j<data.length; j++){
data[j].y = newMapLevel;
}
chart.series[i].setData(data);
Calling this function has the desired effect UNLESS the new map level y_value is ONE greater than the highest y_value of all other series, in which case the y-axis scale blows up. In other words, if the y_axis scale is normally from 0 to 275,000, and the highest y_value of any of the other series is, say, 224,000, setting the new map level value to 224,001 causes the y_axis scale to become 0 to 27500M. Yes, that's 27.5 billion.
Might this be a bug in Highcharts? Or is there a better way to change the data in a series?
I've posted a fiddle: http://jsfiddle.net/earachefl/4FuNE/4/
I got my answer from the Highcharts forum:
http://highslide.com/forum/viewtopic.php?f=9&t=13594&p=59888#p59888
This doesn't work as smoothly as I'd like. When you go from 8 as your line to 2 as your line, the scale doesn't adjust back down until you enter another value. Perhaps it's a start in the right direction.
$(document).ready(function(){
$('#clickme').click(function(){
var newMapLevel = $('#newMAP').val();
if(newMapLevel){
for(i=0; i<chart.series.length; i++){
if(chart.series[i].name == 'Map Level'){
data = chart.series[i].data;
for(j=0; j<data.length; j++){
data[j].y = newMapLevel;
}
// get the extremes
var extremes = chart.yAxis[0].getExtremes();
//alert("dataMin: " + extremes.dataMin);
//alert("dataMax: " + extremes.dataMax);
// define a max YAxis value to use when setting the extremes
var myYMax = extremes.dataMax;
if (newMapLevel >= myYMax) {
myYMax = Number(newMapLevel) + 1; // number conversion required
}
if (myYMax > chart.yAxis[0].max) {
alert('cabbbie');
myYMax = chart.yAxis[0].max + 1;
}
//alert("myYMax: " + myYMax);
chart.yAxis[0].setExtremes(extremes.dataMin, myYMax)
// finally, set the line data
chart.series[i].setData(data);
}
}
}
}); });