I added two time series in highstock , but after running the sample , I get this error : Highcharts error #15 in console also browser does not show properly.I checked for this error but time series data is in ascending order only, so could not make out why this error coming up ?
$('#chartdiv').highcharts('StockChart', {
rangeSelector: {
selected: 2
},
legend: {
enabled: true
},
credits: {
enabled: false
},
chart: {
zoomType: 'x'
},
title: {
text: 'test highchart'
},
series: seriesOptions
});
Here is the fiddle for above issue.
Your timeArr array isn't sorted actually. Just adding this line gets rid of the error:
timeArr.sort();
See your updated JSFiddle here.
Related
I just found this strange behavior, I don´t know if it's a misused property or if it's some kind of bug.
If I zoom for a 6 months periods it seems to work, but if I scroll to the beginning of the series the last value of the column series is hidden. Here is a working example.
Highcharts.chart('container', {
rangeSelector: {
enabled: true,
},
scrollbar: {
enabled: true
},
chart: {
zoomType: 'x'
},
title: {
text: 'Zoom broken on 6m'
},
xAxis: {
type: 'datetime'
},
yAxis: [{},{}],
series: timeSeriesParser.map(set=> ({
...set,
})),
});
The issue occurs because the column needs additional space to be rendered. Another problem is that notice that for some particular data 6months means something different - for example in the case which you described the 6 months range starts on March 1, 2011, but ends on the Aug 31, 2011 - meanwhile the next column point starts on the Sep 1, 2011.
I have two ideas on how to solve this issue:
Set the pointPlacement to 'on':
Demo: https://jsfiddle.net/BlackLabel/Lze67jf3/
plotOptions: {
column: {
pointPlacement: 'on',
}
},
API: https://api.highcharts.com/highstock/series.column.pointPlacement
Or set the getExtremesFromAll to true:
Demo: https://jsfiddle.net/BlackLabel/78wte2hs/
API: https://api.highcharts.com/highstock/series.column.getExtremesFromAll
When using Highcharts in combination with Highcharts's boost module, the graph is not rendered correclty when using small MS intervals for the xAxis.
Rendering 5000 records, with an interval of 10 ms, it looks like highcharts gets the average for a periode of time (i think)? On hovering the labels shows the correct location of the point line, not the straight line
I some how figured that the graph shows correctly at 4999 record:
Also using 100.000 record, but with a lower interval of 1000ms shows fine:
This problem only shows up when using the boost (which i MUST use because im working with millions of records). Without boost it works fine.
I could not figure out why its behaving like this.
Is this a bug of Highcharts?
Am i missing a porpperty in my chartsettings?
How can i solve this problem?
See jsfiddle for the above example : http://jsfiddle.net/r8Lv41do/49/
My Settings:
Highcharts.chart('container', {
chart: {
type: 'line',
zoomType: 'x'
},
xAxis: { type: 'datetime' },
boost: {
useGPUTranslations: true
},
navigator: {
enabled: true
},
plotOptions: {
series: {
marker: {
enabled: false,
}
}
},
tooltip: {
valueDecimals: 2
},
series: [{
data: data,
}]
});
Try enabling the boost without the useGPUTranslation set to true.
E.g.:
Highcharts.chart('container', {
chart: {
type: 'line',
zoomType: 'x'
},
xAxis: { type: 'datetime' },
// Enables boost without any other performance options
boost: { },
navigator: {
enabled: true
},
plotOptions: {
series: {
marker: {
enabled: false,
}
}
},
tooltip: {
valueDecimals: 2
},
series: [{
data: data,
}]
});
I'm having an odd problem where my Highcharts graph is only properly "graphing" on Chrome. The graph frame itself shows up just fine (the axis' names, labels, white background, etc), but the actual columns do not get animated, nor do they show up on the graph to represent the actual data. It just appears to look like an empty graph.
The data is being called via AJAX. Everything on that end is fine. The code itself is also very simple, so not sure what could be causing this. Here is the code, any help would be greatly appreciated:
Highcharts.chart('modal-graph-wrapper', {
chart: {
type: 'column'
},
title: {
text: 'Build Time vs. Step'
},
yAxis: {
title: {
text: 'Length of Time (seconds)'
},
categories: timeArray
},
xAxis: {
categories: nameArray
},
plotOptions: {
series: {
pointStart: 0
}
},
series: [{
name: 'Build Time (seconds)',
data: timeArray,
lineWidth: 3,
marker: {
radius: 3,
fillColor: '#337ab7'
}
}]
});
I ended up figuring it out. It is because the Date.parse function does not work as expected in Firefox or Safari; whereas in Chrome it works as anticipated. Restructuring the time format solved my issue. Thanks!
I'm populating a highstock graph with a max of three series on. The graphs with only three series present show errors in the console:
Console Snippet:
I know that it's not a problem with the data thats being sent through; if I change the order of the series, it's always the one that renders last (the third) to error.
Interestingly, if I resize the window or show and hide one of the other series, the series that apparently failed displays correctly!?!
This is apparently where the error comes about:
pointStart:b.xData[0]
xData must be undefined, but how? The data sent through is fine.
Here is how I render each of the three series:
if (seriesData[0].length != 0) {
flowDataChart.addSeries({
name: 'Local Log Data',
data: seriesData[0],
zIndex: 10,
tooltip: {
valueSuffix: ' Ml/day'
}
}, false);
};
if (seriesData[1].length != 0) {
flowDataChart.addSeries({
name: 'Ultrasonic / Probe Data',
data: seriesData[1],
zIndex: 20,
tooltip: {
valueSuffix: ' Ml/day'
}
}, false);
};
if (seriesData[2].length != 0) {
flowDataChart.addSeries({
name: $('#DownloadDataDropDown option[value="uploadFile"]').text(),
data: seriesData[2],
zIndex: 30,
tooltip: {
valueSuffix: ' Ml/day'
}
}, false);
}
In this example, seriesData[2] fails to load correctly.
I redraw the graph, after the series have been added.
What's going on here?
UPDATE:
Here is a jsfiddle I wrote that suffers the same issue -
http://jsfiddle.net/GMason/k61rpakx/8/
I am trying to change the default zoom level on a simple highstock chart. I've been looking around for a solution and came up with this:
rangeSelector: {
selected:0,
},
This did not work with the code below
chart = new Highcharts.StockChart({
chart: {
renderTo: 'dummycontainer'
},
rangeSelector: {
selected:0,
},
credits: {
enabled: false
},
yAxis: {
title: {
text: ''
},
max: 100
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> <br/>', //({point.change}%)
valueDecimals: 2
},
series: [{
name: 'MMP',
data: [
],
marker : {
enabled : true,
radius : 3
},
shadow : true
}]
});
What could be causing this?
rangeSelector: {
selected:0
}
very much works
Change default time range | Highchart & Highstock # jsFiddle
Check for any other javascript related errors in your browser's javascript console. If you are trying out on IE or even otherwise I would recommend removing the trailing comman(,) from selected:0, like in the code above or the demo.
Trailing commas lead to invalid json and some browsers may not behave correctly with them. You can validate your json # http://jsonlint.com/ or try the JSLint option in jsFiddle.