I've got a working Highstock graph that breaks with a data series of about 140 points. I know Highstock can take over 50,000 points so I'm not sure what is happening with mine.
The JSON is fine. I tested it line by line and watched the chart break around the 140th entry.
$(function() {
$.getJSON('stock2.json', function(data) {
$('#container1').highcharts('StockChart', {
rangeSelector : {
selected : 1,
inputEnabled : $('#container').width() > 480
},
title : {
text : 'Turnover and Spread Comparison with TSE for N225'
},
yAxis : [{
title : {
text :'Spread (BPS)'
},
opposite : false,
},
{
title : {
text :'Average Daily Turnover (Billion JPY)'
},
}],
legend : {
enabled : true,
floating : true,
align : 'left',
shadow : true,
layout : 'vertical',
x : 100,
y : -332,
borderWidth : 2,
borderColor : '#8BCAFF',
backgroundColor : '#FFFFFF'
},
colors : ['#8BCAFF','#BC0000', '#030060', '#BC0000', '#030060' ], // Line colours
series : [{
name : 'Turnover',
data : data.d1,
pointStart: Date.UTC(2010, 10, 4),
pointInterval: 3600 * 1000 * 24 * 7,
type : 'column',
yAxis : 1,
tooltip : {
valueDecimals : 2,
valueSuffix : ' JPY'
}
}]
});
});
});
Related
I created a highstock spline graph with half an hour interval data. The graph displays on "1 month,3 month" selectors, disappear on "all" selector. There are too many data points which could be the problem; but my other hourly dataset has even more data and works just fine.
See all the code in jsFiddle:https://jsfiddle.net/gbr1v9yu/8/
Here is my code for highchart:
$('#chart-A').highcharts('StockChart', {
rangeSelector : {
selected : 0
},
title : {
text : 'Water Level'
},
// xAxis: {
// ordinal: false
// },
yAxis: {
title:{text:'Water Level(m)'},
labels: {
align:'left',
formatter: function () {
return this.value + ' m';
}
}
},
navigator : {
enabled : false
},
colors: ['#0000FF'],
series : [{
type: 'spline',
name : 'Water Level',
data : tsData,
tooltip: {
valueDecimals: 2,
valueSuffix: 'm'
}
}]
});
Can anyone help me out? Thanks a lot.
I have some error while exporting the chart. I am using the exporting.js from Highcharts
Export PNG, JPEG, PDF received the below error.
Export SVG ok. But can't see the image.
Oops..,
Something went wrong while converting. recveived error from phantomjs:ERROR: While rendering, there's is a timeout reached
function renderChartPie(divId, chartType, chartTitle, chartCriteria, chartData, categories) {
var data = jQuery.parseJSON(chartData);
var cat = jQuery.parseJSON(categories);
var options = createOptionPie(divId, chartType, chartTitle, chartCriteria, cat);
options.series = [{
data : data
}];
var chart = new Highcharts.Chart(options);
}
function createOptionPie(divId, chartType, chartTitle, chartCriteria, categories) {
var options = {
colors : [ '#2f7ed8', '#0d233a', '#8bbc21', '#910000', '#1aadce',
'#492970', '#f28f43', '#77a1e5', '#c42525', '#a6c96a',
'#4572A7', '#AA4643', '#89A54E', '#80699B', '#3D96AE',
'#DB843D', '#92A8CD', '#A47D7C', '#B5CA92' ],
chart : {
renderTo : divId,
type : chartType,
events: {
load: function() {
var text = this.renderer.text('<br/>' + chartCriteria, 0, 445).css({
fontSize : 9
}).add();
var image = this.renderer.image('../../theme/50x71.png', 630, 409, 70, 51)
.add();
}
}
},
credits : {
enabled : false
},
legend : {
align: 'right',
verticalAlign: 'middle',
layout : 'vertical'
},
title : {
text : chartTitle
},
tooltip: {
formatter: function() {
return this.point.name +': '+ Highcharts.numberFormat(this.y,0) ;
}
},
xAxis : {
categories : categories
},
yAxis: {
},
plotOptions: {
pie: {
allowPointSelect : true,
showInLegend : true
}
},
series : []
};
return options;
}
The problem with timeout, because calling function (export) is limited. If problem will still appear, please prepare your own exporting server. Instructions are available here: http://www.highcharts.com/component/content/article/2-news/56-improved-image-export-with-phantomjs
In a project, I'm using something very similar to this fiddle: http://jsfiddle.net/Z3vhg/
The code for this dynamically updating data-grouped columns chart is the following:
$('#container').highcharts('StockChart', {
chart : {
type: 'column',
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.round(Math.random() * 100);
series.addPoint([x, y], true, true);
}, 1000);
}
}
},
yAxis: {
offset: 30
},
rangeSelector: {
buttons: [{
count: 1,
type: 'minute',
text: '1M'
}, {
count: 5,
type: 'minute',
text: '5M'
}, {
type: 'all',
text: 'All'
}],
inputEnabled: false,
selected: 2
},
title : {
text : 'Live random data'
},
exporting: {
enabled: false
},
series : [{
name : 'Random data',
dataGrouping: {
groupPixelWidth: 60
},
data : (function() {
// generate an array of random data
var data = [], time = (new Date()).getTime(), i;
for( i = -999; i <= 0; i++) {
data.push([
time + i * 1000,
Math.round(Math.random() * 100)
]);
}
return data;
})()
}]
});
The problem can be observed in the fiddle above: as the data updates and adds new points, the first point on the x axis is shifted, but since data grouping is used, the column remains there but gives the impression that the first column value is actually changing...
Any help appreciated, as it may be a weird combination issue.
I'm using highcharts as shown in examples but for some reason it flat out does not like my data. The only time I see a result is when I zoom out to all and then it only shows one point. Any clues as to what I'm doing wrong would be extremely appreciated.
how im getting my data:
$jsResult = array();
$arResults = $wpdb->get_results("SELECT tsDay, nPrice FROM sometable", ARRAY_A);
foreach($arResults as $key => $val){
//$val['nPrice'] = floatval($val['nPrice']);
//$jsResult[$key][0] = ($val['tsDay']*1000);
//$jsResult[$key][1] = intval($val['nPrice']);
//$strDate = date("Y/m/d", $val['tsDay']);
//$strDate = explode('/', $strDate);
$jsResult[$val['tsDay']] = '['.($val['tsDay']*1000).', '.$val['nPrice'].']';
}
$jsResult = "[\n".implode(",\n", $jsResult)."\n]";
?>
the chart:
$(document).ready(function() {
var data = <?php echo $jsResult; ?>;
// create the chart
window.chart = new Highcharts.StockChart({
chart : {
renderTo : 'graph',
zoomType: 'x'
},
navigator : {
series : {
data : data
}
},
rangeSelector : {
selected : 5 // All
},
tooltip: {
xDateFormat: '%Y-%m-%d %H:%M:%S'
},
xAxis : {
ordinal: true
},
series : [{
//type: 'candlestick',
name : 'data',
data : data,
dataGrouping : {
enabled : false
},
marker: {
enabled: true,
radius: 2
}
}]
});
Sample data from Highcharts that draws fine:
[1121212800000,38.35],
[1121299200000,40.75],
[1121385600000,41.55],
[1121644800000,41.49],
[1121731200000,43.19],
[1121817600000,43.63],
[1121904000000,43.29],
[1121990400000,44.00],
[1122249600000,43.81],
[1122336000000,43.63],
[1122422400000,43.99],
[1122508800000,43.80],
[1122595200000,42.65],
A sample of my data:
[1339736400000,1627.25],
[1339650000000,1613.50],
[1339563600000,1619.50],
[1339477200000,1603.50],
[1339390800000,1584.00],
[1339131600000,1576.50],
[1339045200000,1606.00],
[1338958800000,1635.00],
[1338526800000,1606.00],
[1338440400000,1558.00],
[1338354000000,1540.00],
[1338267600000,1579.50],
[1337922000000,1569.50],
here is what's wrong with your chart your array going backwords with time you start with jun 15 then 14 ,13 and so on
if you use reverse() you will get an array looks like this
var data = [ [1337922000000,1569.50], [1338267600000,1579.50] ,
[1338354000000,1540.00],[1338440400000,1558.00],
[1338526800000,1606.00],
[1338958800000,1635.00],[1339045200000,1606.00],
[1339131600000,1576.50],[1339390800000,1584.00],
[1339477200000,1603.50],[1339563600000,1619.50],]
this will make your chart works fine here is a working jsFiddle
The API doesn't show a proper example how to use connectNulls property. I had a few attempts but no luck. Here is what I have:
Attempt 1:
plotOptions :
{
line: { connectNulls : true}
},
This results in: TypeError: Cannot read property 'x' of undefined
Attempt 2:
plotOptions :
{
series:
{
gapSize: null,
line: { connectNulls : true}
}
},
This doesn't give me any errors, so I assume this is closest to be the correct way, however nothing changes: the points from either side of null points are not connected.
Can anyone share a code snipped that shows the correct way of doing it?
The highcharts API has two examples for the connectNulls property: one for true, and one for false.
http://api.highcharts.com/highcharts#series.connectNulls
The true example: http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-connectnulls-true/
A snippet from the true example:
plotOptions: {
series: {
connectNulls: true
}
},
The false example: http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-connectnulls-false/
A snippet from the false the example:
plotOptions: {
series: {
// connectNulls: false // by default
}
},
The default of false is a thoughtful choice, because when you connect values when there is no data, the results can lead to false assumptions on the part of the viewer of the chart.
UPDATE
Here's a Highstock example:
$(function() {
window.chart = new Highcharts.StockChart({
chart : {
renderTo : 'container'
},
rangeSelector : {
selected : 1
},
title : {
text : 'AAPL Stock Price'
},
series : [{
name : 'AAPL',
connectNulls: true,
data : [
[1112832000000,43.56],
[1112918400000,43.74],
[1113177600000,41.92],
[1113264000000,null],
[1113350400000,null],
[1113436800000,37.26],
[1113523200000,35.35],
[1113782400000,35.62],
[1113868800000,37.09],
[1113955200000,35.51],
[1114041600000,37.18],
[1114128000000,35.50],
[1114387200000,36.98],
[1114473600000,36.19],
[1114560000000,35.95],
[1114646400000,35.54],
[1114732800000,36.06]
],
tooltip: {
valueDecimals: 2
}
}]
});
});