Unexpected Highcharts results - highcharts

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

Related

HighChart(highstock) load graph on some selectors not on others

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.

Recveived error from phantomjs:ERROR: While rendering, there's is a timeout reached

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

Adding a line of words towards the bottom of chart

I would like to add a line of words "Country: Singapore Reporting Date: d/MMM/yy User: xxxxx " towards the bottom of chart. How should I proceed? Currently, I have my codes as below.
<script type="text/javascript">
function renderChart(divId, chartType, chartTitle, chartData, categories) {
var data = jQuery.parseJSON(chartData);
var cat = jQuery.parseJSON(categories);
console.log(cat);
console.log(chartData);
var options = createOption(divId, chartType, chartTitle, cat);
options.series = [{
allowPointSelect : true,
data : data,
showInLegend : true
}];
var chart = new Highcharts.Chart(options);
}
function createOption(divId, chartType, chartTitle, categories) {
var options = {
colors : [ '#058DC7', '#50B432', '#ED561B', '#DDDF00',
'#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4' ],
chart : {
renderTo : divId,
type : chartType
},
title : {
text : chartTitle
},
xAxis : {
categories : categories,
showEmpty: false
},
yAxis: {
showEmpty: false
},
series : []
};
return options;
}
You can use labels or renderer, which allow to add custom text / object on the chart.

Highcharts to populate data for pie chart using json object

hi my json object looks like this
[
{"name":"Tokyo","data":3.0},
{"name":"NewYork","data":2.0},
{"name":"Berlin","data":3.5},
{"name":"London","data":1.5}
]
How to populate the series points to make a pie chart using highcharts
Try this below code. This will parse all the values and create an array called dataArrayFinal .
var d = [{"name":"Tokyo","data":3.0},{"name":"NewYork","data":2.0}, {"name":"Berlin","data":3.5},{"name":"London","data":1.5}]
var name = Array();
var data = Array();
var dataArrayFinal = Array();
for(i=0;i<d.length;i++) {
name[i] = d[i].name;
data[i] = d[i].data;
}
for(j=0;j<name.length;j++) {
var temp = new Array(name[j],data[j]);
dataArrayFinal[j] = temp;
}
And your series stuff should look like below. i.e, you should pass the array dataArrayFinal like below.
series: [{
type: 'pie',
name: 'Browser share',
data: dataArrayFinal
}]
Actually the only difference between your data definition and the format that Highcharts requires, is that yours has a property called "data" where Highcharts expects "y". So you just need to loop over the data and set that property. See it live at http://jsfiddle.net/highcharts/uTyZk/.
// Original data
var data = [{
"name": "Tokyo",
"data": 3.0
}, {
"name": "NewYork",
"data": 2.0
}, {
"name": "Berlin",
"data": 3.5
}, {
"name": "London",
"data": 1.5
}];
// Highcharts requires the y option to be set
$.each(data, function (i, point) {
point.y = point.data;
});
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'pie'
},
series: [{
data: data
}]
});

Connecting NULL points in Highstock charts

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
}
}]
});
});

Resources