After upgrading for Highcharts 2.1.9 to 3.0.0 we found that it seems impossible to render more than 1000 points in one series.
If you add 1000 points to a series it renders ok.
If you add 1001 points to a series it does not render at all. If you interrogate the series afterwards the "data" array on the series is empty.
You can however render multiple series with 1000 points - so there does not seem to be a limitation in terms of the total number of points per chart.
Here is a jsFiddle which illustrates this: http://jsfiddle.net/YWVHx/47/
$(function () {
var series1Data = [];
for (var i = 0; i < 1000; i++) {
series1Data.push({
x: (new Date()).getTime() + i * 10000,
y: Math.random() * 100
});
}
var series2Data = [];
// If you change this back to 1000 the series gets rendered
for (var i = 0; i < 1001; i++) {
series2Data.push({
x: (new Date()).getTime() + i * 10000,
y: Math.random() * 100 + 100
});
}
$('#container').highcharts({
chart: {
type: 'line'
},
title: {
text: 'Foo'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: null
}
},
tooltip: {
crosshairs: true,
shared: true,
valueSuffix: '°C'
},
legend: {
enabled: true
},
series: [{
name: '1000 Points - I work ;-)',
data: series1Data
}, {
name: '1001 Points - I dont work :-(',
data: series2Data
}]
});
});
Is this a limitation that was imposed on purpose or is it a problem with v3?
You should set bigger turbothreshold: http://api.highcharts.com/highcharts#plotOptions.series.turboThreshold
For the other user's convenience , this is a complementary example that you can copy and paste:
plotOptions:{
series:{
turboThreshold:5000//set it to a larger threshold, it is by default to 1000
}
}
Check http://jsfiddle.net/YWVHx/339/ here for results
Related
I have got into little trouble with hiding the markers in the navigator
The problem is that after I set marker.enabled to false. It does nothing. (JS fiddle - line 75)
navigator: {
series: {
lineWidth: 0,
marker: {
enabled: false // this should hide markers
}
}
}
It is doing nothing because I have some condition where if the condition is true I need to insert the marker at that point, like this:(JS fiddle - line 63).
Btw.. in that JSfiddle example I'm setting it for every point, but that doesn't matter.
series: [{
data: {
x: ...,
y: ...,
marker: {
enabled: true
}
}
]}
- so when I set it manually on that point, it will override the global navigator options
PROBLEM - The global navigator option for the marker is overriden by every single point.
GOAL - Hide all markers in the navigator.
JSFiddle
OLD SOLUTION
If you have only 1 serie in the graph - take the Wojciech Smiel answer.
If you have more than 1 serie in the graph - you have to first make an array of the series with the disabled marker, and then set the options like this
navigator: {
series: seriesArray // array with the series and disabled marker
}
NEW SOLUTION
My friend recently discovered better and easier solution, each serie has navigatorOptions property where you can set radius for the marker, if you set it to 0 it will be hidden.
serie.navigatorOptions = { marker: { radius: 0 } };
Quoting the Highcharts navigator documentation:
Unless data is explicitly defined on navigator.series, the data is
borrowed from the first series in the chart.
That's why navigator series has markers despite the fact that you disabled it in navigator options. However, you can add separate data for the navigator where you can disable marker for each point. Check the demo posted below.
Code:
function generateData(markers) {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -999; i <= 0; i += 1) {
data.push({
x: time + i * 1000,
y: Math.round(Math.random() * 100),
marker: {
enabled: markers
}
});
}
return data;
}
// Create the chart
Highcharts.stockChart('container', {
chart: {
events: {
load: function() {
// set up the updating of the chart each second
var chart = this,
series = this.series[0],
seriesNav = this.series[1];
setInterval(function() {
var x = (new Date()).getTime(), // current time
y = Math.round(Math.random() * 100);
series.addPoint([x, y], false);
seriesNav.addPoint([x, y], true, true);
}, 1000);
}
}
},
time: {
useUTC: false
},
rangeSelector: {
buttons: [{
count: 1,
type: 'minute',
text: '1M'
}, {
count: 5,
type: 'minute',
text: '5M'
}, {
type: 'all',
text: 'All'
}],
inputEnabled: false,
selected: 0
},
title: {
text: 'Live random data'
},
exporting: {
enabled: false
},
plotOptions: {
series: {
marker: {
enabled: true
}
}
},
series: [{
name: 'Random data',
showInNavigator: true,
data: generateData(true)
}],
navigator: {
series: {
lineWidth: 0,
marker: {
enabled: false
},
data: generateData(false)
}
}
});
Demo:
https://jsfiddle.net/BlackLabel/1um9gs47/21/
I want to create a chart that reads its data from an Api. To do that i have this fiddle http://jsfiddle.net/68oe1oLf/69/
Note: https://jsfiddle.net/68oe1oLf/69/ will lead to mixed content error and will fail to load data from the api
This is the javascript code
$(document).ready(function () {
$.get( "http://firmbridgecapital.com/live.php", function( dt ) {
localStorage.setItem("data", dt);
});
window.setInterval(function(){
$.get( "http://firmbridgecapital.com/live.php", function( dt ) {
localStorage.setItem("data", dt);
});
}, 5000);
Highcharts.setOptions({
global: {
useUTC: false
}
});
Highcharts.chart('container', {
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = parseInt(localStorage.getItem("data"));
series.addPoint([x, y], true, true);
}, 5000);
}
}
},
title: {
text: 'Live random data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
max: 3,
title: {
text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'Random data',
data: (function () {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -150; i <= 0; i += 25) {
data.push({
x: time,
y: parseInt(localStorage.getItem("data"))
});
}
return data;
}())
}]
});
});
I borrowed the idea from this docs example http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/dynamic-update/
My chart is always grounded on value 1 and does not show the changing values in the y axis. How may i fix this?.
The value you are referencing, i.e. live php page, seems to be 1.x and increasing very slowly. (1.7 while I was looking).
In your parsing you do the following:
y = parseInt(localStorage.getItem("data"));
And since the value is 1.7, and you try to parse it as an integer with parseInt, it gets converted to 1. Using parseFloat will give you a slowly increasing graph.
Is there a way to keep the scroll on the most right?
I am trying live update on highchart and it seems that sometimes I am encountering scroll being left behind.
$(function() {
Highcharts.setOptions({
global: {
useUTC: false
}
});
// Create the chart
$('#container').highcharts('StockChart', {
chart: {
events: {
load: function() {
// set up the updating of the chart each second
var series = this.series[0],
hasPlotLine = false,
$button = $('#button'),
chart = $('#container').highcharts(),
yAxis = chart.yAxis[0],
plotLine,
d,
newY;
yAxis.addPlotLine({
value: 66,
color: 'red',
width: 2,
id: 'plot-line-1',
label: {
text: 66,
align: 'right',
y: newY,
x: 0
}
});
setInterval(function() {
var x = (new Date()).getTime(), // current time
y = Math.round(Math.random() * 100);
series.addPoint([x, y], true, true);
plotLine = yAxis.plotLinesAndBands[0].svgElem;
d = plotLine.d.split(' ');
newY = yAxis.toPixels(y) - d[2];
plotlabel = yAxis.plotLinesAndBands[0].label;
plotlabel.animate({
translateY:newY,
text:y
},400),
plotLine.animate({
translateY: newY
}, 400);
}, 1000);
}
}
},
rangeSelector: {
buttons: [{
count: 1,
type: 'minute',
text: '1M'
}, {
count: 5,
type: 'minute',
text: '5M'
}, {
type: 'all',
text: 'All'
}],
inputEnabled: false,
selected: 0
},
title: {
text: 'Live random data'
},
exporting: {
enabled: false
},
series: [{
name: 'Random data',
data: (function() {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -999; i <= 0; i += 1) {
data.push([
time + i * 1000,
Math.round(Math.random() * 100)
]);
}
return data;
}())
}]
});
});
I know it a little bit hard to explain my concern, but check this image
I have search setExtremes but I am not sure if how it works or how it will be set up on future dated in case this is the function that I am looking for.
Here is the jsfiddle http://jsfiddle.net/kttfv1h3/3/
Appreciate your help
setExtremes() will work - see API http://api.highcharts.com/highcharts/Axis.setExtremes.
The only thing you need to adjust is the min value - you can calculate it from the last point or set some fixed value.
xAxis.setExtremes(x - 1000 * 60, x)
example: http://jsfiddle.net/nmx5hruo/
I have a small team of developers working for me to graph some medical data. They have come back with no resolution. Hopefully someone here can help.
When charting a series the y-axis multiples are not the default highchart multiples. For example in highcharts when I plot the below code, the y-axis labels are 0,250,500,750,1000,1250.
However, when I view the graph in my application I get the following: 0,95,190,285,380,475,570,665,760,855,950. See image attached.Odd intervals
The only other information I can provide is that the container size is relative, and when I change the size of the window, the index values change. That would suggest to me that they are not hard-coded to be a fixed multiple.
Highcharts.chart('container', {
title: {
text: 'Solar Employment Growth by Sector, 2010-2016'
},
subtitle: {
text: 'Source: thesolarfoundation.com'
},
yAxis: {
title: {
text: 'Number of Employees'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
pointStart: 2010
}
},
series: [ {
name: 'Other',
data: [0,100,2,4,8,16,32,64,128,256,512,1024]
}]
});
So a solution is below. Basically, it scans the array for a multiple that is greater than the ideal divider count (in this example 10). It then uses that as the desired interval.
function returnInterval(){
var intervalArray =
[.0001,.001,.01,.1,1,2,5,10,20,50,100,250,500,1000,5000,10000]
var min = .0012 //min from series below
var max = .1001 //max from series below
var idealDivider = (max - min)/10 //where 10 is the number of desired markers
for(var i=0; i<intervalArray.length; i++) {
if (intervalArray[i] >= idealDivider) return intervalArray[i];
}
}
Highcharts.chart('container', {
yAxis:{
tickInterval: returnInterval()
},
series: [{
data: [.0012,.0213,.0123,.0532,.042,.009942,.1001]
}]});
Is it possible to remove certain points from a series?
I'm looking for some way to draw a chart with a fixed back period,
something like: the last 1 hour.
I know how to add points using dynamic update:
http://www.highcharts.com/demo/dynamic-update
But in my case the time interval between points is not constant,
so I can't just use the shift option of addPoint.
Thanks,
Omer
If you want to have the same, you can use the same logic as in addPoint, see: http://jsfiddle.net/JKCLx/1/
However, why can't you just use shift argument in addPoint()?
I think I found a partial answer to my own question:
I can iterate over the series datapoints like this:
http://api.highcharts.com/highcharts#Series.data
and then call point.Remove.
The problem with this solution is that it does not draw monitor style like in the example,
but rather it redrwas the entire chart on each change.
http://jsfiddle.net/JKCLx/
$(function () {
$(document).ready(function() {
Highcharts.setOptions({
global: {
useUTC: false
}
});
var chart;
$('#container').highcharts({
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function() {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function() {
var x = (new Date()).getTime(), // current time
y = Math.random();
series.addPoint([x, y], true, false);
// series.data[0].remove(false);
series.data[0].remove(true);
}, 1000);
}
}
},
title: {
text: 'Live random data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
title: {
text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'Random data',
data: (function() {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i++) {
data.push({
x: time + i * 1000,
y: Math.random()
});
}
return data;
})()
}]
});
});
});