Related
I want to plot the synchronized charts like this https://www.highcharts.com/demo/synchronized-charts.
The JSON data will come from SQL database and the xData (x-axis) looks like below which are in year-month format:
xData: [
"2004-04","2004-04","2004-04","2004-04","2004-04","2004-04","2004-04",
"2004-04","2004-04","2004-04","2004-04","2012-08","2004-04","2004-04","2004-04",
"2004-04","2004-04","2004-04","2004-04","2004-04","2004-04","2004-04","2004-04",
"2004-04","2004-04","2004-04","2004-04","2004-04","2013-12","2004-04","2004-04",
"2007-11","2007-11","2012-08","2005-05","2004-04","2004-04","2004-04","2004-04",
"2004-04","2004-04","2004-04","2016-04","2004-04","2012-08","2004-04","2004-04",
"2004-04","2004-04","2004-04","2004-04","2004-04","2005-05","2004-04","2004-04",
"2012-08","2016-04","2004-04","2004-04","2004-04","2004-04","2012-08","2004-04",
"2004-04","2004-04","2004-04","2012-08","2004-04","2004-04","2004-04","2004-04",
"2004-04","2006-02","2007-11","2004-04","2004-04","2004-04","2005-05","2004-04",
"2004-04","2005-05","2004-04","2004-04","2012-08","2012-08","2006-02","2005-05",
"2004-04","2016-04","2004-04","2004-04","2004-04","2006-02","2004-04","2004-04",
"2004-04","2004-04","2004-04","2005-05","2007-11"
]
So, how to plot those data as x-axis for synchronized charts?
you could simply use that one array as the labels for the xAxis:
xAxis: {
labels: {
format: '{value}'
}
},
but in order to plot on a timeline axis, you may need to convert these strings into integer values, which can be done with PHP: strtotime($date.'-01 00:00:00') ...hint: you need to multiply the result (in seconds) with 1000 for JavaScript timestamps (in milliseconds).
I added categories: "activity.xData" to to the chart
and set the labels format to "this.value"
xAxis: {
crosshair: true,
categories: activity.xData,
events: {
setExtremes: syncExtremes
},
labels: {
format: this.value
}
},
I have stock market data plotted over highcharts:
My JS Code:
$(function() {
$.getJSON('data.php', function(data) {
console.log(data);
// Create the chart
$('#container').highcharts('StockChart', {
rangeSelector:{
enabled:false
},
navigator: {
enabled: true
},
useUTC: false,
xAxis: {
type: 'datetime',
labels: {
formatter: function () {
return Highcharts.dateFormat('%H:%M', this.value);
},
}
},
title : {
text : 'NSE Stock Price'
},
credits: {
enabled : false
},
series : [{
name : 'NSE Stock Prices',
data : data,
tooltip: {
valueDecimals: 2
}
}]
});
});
});
My JSON output (partial):
[["09:01:00",27966.96],["09:03:00",27934.64],["09:03:00",27934.64],["09:07:00",27952.66],["09:07:00",27952.66],["09:07:00",27952.66]]
I expect time from 9:00am to 4:00pm on x-axis but I am just not getting it.
I tried changing time to unix time changing date format useUTC to true but noting worked out.
Update:
Tried this format too,
[["2014-11-14 09:01:00",27966.96],["2014-11-14 09:03:00",27934.64],["2014-11-14 09:03:00",27934.64]]
Update 2
My PHP code,
$array_item[] = array(date('H:i:s',strtotime($price_date)), (float)$last_traded_price);
Update 3: (some of the latest values)
[["2014-11-17 09:00:00",28065.72],["2014-11-17 09:02:00",28048.8],["2014-11-17 09:04:00",28041.93],["2014-11-17 09:06:00",28029.58],["2014-11-17 09:08:00",28018.68],["2014-11-17 09:10:00",28018.68],["2014-11-17 09:12:00",28018.68],["2014-11-17 09:14:00",28018.68],["2014-11-17 09:16:00",27988.73],["2014-11-17 09:18:00",28001.06],["2014-11-17 09:20:00",28003.06],["2014-11-17 09:22:00",27988.44],["2014-11-17 09:24:00",28011.67],["2014-11-17 09:26:00",27988.56],["2014-11-17 09:28:00",27991.17],["2014-11-17 09:30:00",27983.98],["2014-11-17 09:32:00",27972.01],["2014-11-17 09:34:00",27980.87],["2014-11-17 09:36:00",27994.42],["2014-11-17 09:38:00",28007.38],["2014-11-17 09:40:00",28005.57],["2014-11-17 09:42:00",27986.39],["2014-11-17 09:44:00",28010.79],["2014-11-17 09:46:00",27998.44],["2014-11-17 09:48:00",28012.66]]
This is as per: $array_item[] = array(strtotime($price_date), (float)$last_traded_price);
[[1416195000,28065.72],[1416195120,28048.8],[1416195240,28041.93],[1416195360,28029.58],[1416195480,28018.68],[1416195600,28018.68],[1416195720,28018.68],[1416195840,28018.68],[1416195960,27988.73],[1416196080,28001.06],[1416196200,28003.06],[1416196320,27988.44],[1416196440,28011.67],[1416196560,27988.56],[1416196680,27991.17],[1416196800,27983.98],[1416196920,27972.01],[1416197040,27980.87],[1416197160,27994.42],[1416197280,28007.38],[1416197400,28005.57],[1416197520,27986.39],[1416197640,28010.79],[1416197760,27998.44],[1416197880,28012.66],[1416198000,28018.49],[1416198120,28010.15],[1416198240,28028.18],[1416198360,28035.61],[1416198480,28024.87],[1416198600,28018.95],[1416198720,28007.81],[1416198840,28001.57],[1416198960,28006.85],[1416199080,27997.68],[1416199200,27993.06]]
The output: Still not giving perfect timings although not giving 00:00 as before.
The graph is breaking in middle.
Update 3:
PHP Code,
while ($stocks_bse_price->fetch())
{
$array_item[] = array(strtotime($price_date)*1000, (float)$last_traded_price);
}
JSFidle link: http://jsfiddle.net/Ywr3L/38/
Update 4:
Just realized its going wrong if figures for entire day is given as an input to array.
I have stored entire days data http://pastebin.com/NVAD5EyG
Update 5:
This is what I did in MySql query:
DATE_FORMAT(price_date,'%d-%c-%Y %r') as price_date
And then in PHP
$price_date = $price_date.' UTC';
$array_item[] = array(strtotime($price_date)*1000, (float)$last_traded_price);
Which is giving me this:
http://jsfiddle.net/rof96xuo/1/
[[1416301200000,28177.51],[1416301320000,28180.46],[1416301440000,28181.03],[1416301560000,28198.98],[1416301680000,28209.03],[1416301800000,28209.03]]
new Date(1416301200000)
Tue Nov 18 2014 14:30:00 GMT+0530 (India Standard Time)
As #RaeenHashemi is saying in the comments, highcharts expects datetime data to be in JavaScript epoch times (number of milliseconds since 1970/01/01). You are giving it a string representation of your datetime.
It looks like you are generating JSON from PHP. If so, modify the PHP to convert the time to epoch. If you have a DateTime object in your PHP use getTimeStamp:
$date->getTimestamp() * 1000; // unix timestamp to javascript millisecond timestamp
If you have date time strings in your PHP, convert it to a DateTime first.
Is it possible to change a graph's x axis type from category to datetime on drilldown? I have stacked column style graph where each column is a different category. When I click on one of the columns I want to drilldown to a dedicated column graph of that category with a datetime x axis.
I have been able to successfully drilldown to another category style graph, and set each category to a day in a daterange, but using the datetime format would be much better.
Here is the "onClick" code I am running to try to do this. Obviously the data is sample data just to keep things simple. Currently, this crashes Firefox with a memory limit.
Is it even possible to switch x axis type dynamically like this?
function setChart() {
while(hChart.series.length > 0){
hChart.series[0].remove();
}
hChart.xAxis[0].update({
type: 'datetime'
});
console.log(hChart.xAxis[0]);
data = [
[Date.UTC(2010, 0, 1), 5],
[Date.UTC(2010, 0, 2), 11],
[Date.UTC(2010, 0, 3), 3],
[Date.UTC(2010, 0, 6), 7],
[Date.UTC(2010, 0, 7), 4],
[Date.UTC(2010, 0, 8), 1]
];
console.log(data);
hChart.addSeries({
type: 'column',
data: data,
}, false);
hChart.redraw();
}
For someone still looking for answer. The solution is:
Define X-axis in an array:
xAxis: [{
id: 0,
type: 'category'
}, {
id: 1,
type: 'datetime'
}]
For each series in drilldown
drilldown: {
series: [{
name: "test",
id: "test",
xAxis: 1, // <--- your desired X axis ID
data: [
[your data]
]
}]
}
Unforunately this option is not avaialble, you need to destroy and create new chart.
I am trying to use javascript Highcharts to display a chart of rankings from JSON data. I can't seem to get the chart to display.
This is the javascript code:
$(document).ready(function() {
var options = {
chart: {
renderTo: 'drawing',
zoomType: 'x',
width: 900,
height: 222
},
exporting: {
enabled:true
},
title: {
text: url+' - '+keyword
},
credits: {
text: '****',
href: 'http://***/'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%b %e '
}
},
yAxis: [{
//min: 1,
allowDecimals: false,
reversed: true,
///: .2,
//maxPadding: .2,
title: {
text: 'Rankings'
}
},],
tooltip: {
crosshairs: true,
shared: true
},
series: [{}]
};
var url = "http://*******/chart.php";
$.getJSON(url, function(data) {
$.each(data, function(arrayID,group) {
$.each(group.data, function(id,val) {
arg = val[0].replace(/Date.UTC\((.*?)\)/, '$1').split(',');
var timestamp = Date.UTC.apply( null , arg );
date=new Date(timestamp);
data[arrayID].data[id][0] = timestamp;
});
});
options.series[0].data = data;
var chart = new Highcharts.Chart(options);
});
});
Our PHP Script gives us this JSON:
[{"name":"Google Rank","data":[["Date.UTC(2013,04,05)","23"],["Date.UTC(2013,04,04)","23"],["Date.UTC(2013,04,03)","22"],["Date.UTC(2013,04,02)","24"],["Date.UTC(2013,04,01)","26"],["Date.UTC(2013,03,31)","24"],["Date.UTC(2013,03,30)","24"],["Date.UTC(2013,03,29)","25"],["Date.UTC(2013,03,28)","25"],["Date.UTC(2013,03,27)","25"],["Date.UTC(2013,03,26)","26"],["Date.UTC(2013,03,25)","25"],["Date.UTC(2013,03,24)","24"],["Date.UTC(2013,03,23)","-"],["Date.UTC(2013,03,22)","10"],["Date.UTC(2013,03,21)","10"],["Date.UTC(2013,03,20)","10"],["Date.UTC(2013,03,19)","10"],["Date.UTC(2013,03,18)","10"],["Date.UTC(2013,03,17)","10"],["Date.UTC(2013,03,16)","9"],["Date.UTC(2013,03,15)","9"],["Date.UTC(2013,03,14)","9"],["Date.UTC(2013,03,13)","9"],["Date.UTC(2013,03,12)","9"]],"visible":"true","pointInterval":"86400000","showInLegend":"false"},{"name":"Bing Rank","data":["Date.UTC(2013,2,9)",9],"visible":"true","pointInterval":"86400000","showInLegend":"false"}]
Note the JSON data represents numbers as strings which could be a problem.
PHP Code which generates the JSON data:
$googledata = array();
while($gkdata = mysql_fetch_assoc($keywordquery)){
$explodedate = explode("-", $gkdata['date']);
$year = $explodedate[0];
$month = $explodedate[1];
$day = $explodedate[2];
$googledata[] = array(
"".$year.",".$month.",".$day."",
$gkdata['grank'] //$gkdata['grank'] should be a number, but is sometimes a dash so it's cast to an accommodating datatype: string.
);
}
$chartdata = array(
array(
"name" => 'Google Rank',
"data" => $googledata,
"visible" => 'true',
"pointInterval" => '86400000',
"showInLegend" => 'false',
),
array(
"name" => 'Bing Rank',
"data" => array(
'Date.UTC(2013,2,9)',
9
),
"visible" => 'true',
"pointInterval" => '86400000',
"showInLegend" => 'false',
)
);
The Highcharts won't display anything other than the chart itself with no data. The Date.UTC(2013,03,12) is supposed to go on the X-Axis & the number next to it is supposed to be the rank number. Can anyone see what is wrong?
The chart takes data as [x,y]. You just need to reverse the order of your data to ['value',datestamp'] if you want the date to be on the y axis.
Edit:
I am not sure from the text what the problem you are having is, but one problem that will arise from your code is that your number data values are being returned as strings, in quotes.
You will need to cast them as integers in your php before json encoding in order for them to come through unquoted, as integers.
You should be seeing an error from this: http://www.highcharts.com/errors/14
You are expecting $gkdata['grank'] to always return a number, it sometimes returns a dash -. The Array Object is using the datatype which best represents the data, and it chooses string. If you want to force it as int, you'll have to use a data structure that only allows integers to be put in it. Then it will puke when you try to put in a dash, which it should be doing, because how do you plot a DASH on a chart?
Had you taken off your blindfold, and looked at the error HighCharts returned to you, you would see this:
Highcharts Error #14 String value sent to series.data, expected Number
This happens if you pass in a string as a data point, for example in a setup like this:
series: [{
data: ["3", "5", "1", "6"]
}]
Highcharts expects the data values to be numbers. The most common reason for this is that data is parsed from CSV or from a XML source, and the implementer forgot to run parseFloat on the parsed value.
For performance reasons internal type casting is not performed, and only the first value is checked (since 2.3).
So fix your code to make grank always a number. HighCharts won't plot strings for performance reasons.
I am trying to get a chart to display using Highcharts. I am pulling data from a mysql db with php and creating arrays of data and inserting them into the Highcharts Jquery.
I need to display the data in this format (not a graphical representation):
mon = 0
tues = 4
wed = 2
thu = 0
fri = 4
sat = 20
sun = 45
With Monday always being first and Sunday last.
But my data is pulled from the DB using a date range and I may only get an array from the database that looks like this:
Array
(
[0] => Array
(
[TotalClicksPerDay] => 35
[weekDay] => 4 (which is my case is Thurs)
)
}
So in this case would need to display:
(the TotalClicksPerDay is the important bit)
mon = 0
tues = 0
wed = 0
thu = 35
fri = 0
sat = 0
sun = 0
How would I add the array values to Highchart and still get the days of the week to show and position 'thu's' value in the correct place?
has anyone done anything similiar? Can you point me on the right direction?
I don't even know how to start.
Here is my highcharts Jquery just so you can see how I am using the arrays:
jQuery(document).ready(function($) {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: '$type'
},
subtitle: {
text: 'Xbox landscape'
},
xAxis: {
categories:
$categoryGraph //php array
,labels: {
rotation: 0,
align: 'center',
x: 0,
y: 20,
style: {
fontSize: '8px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Clicks'
}
},
legend: {
enabled: false
}, /*{
layout: 'Vertical',
backgroundColor: '#FFFFFF',
align: 'left',
verticalAlign: 'top',
x: 0,
y: 30,
floating: false,
shadow: true
},*/
tooltip: {
formatter: function() {
return ''+
this.x +': '+ this.y +' Clicks';
}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{name: '$type', data:[$clickTotalArray //php array }]
});
});
});
You are asking for how to parse your data into something that highcharts understands?
Well, the main dynamic options that you want to set correctly would be the xAxis.categories and the series.data, which you seem to have figured out already.
categories
needs to be an array of strings, nothing more or nothing less will be accepted.
eg:- categories=['Mon','Tue','Wed']
data
needs to be an array of array or array of objects or array of values. See documentation for more details
Since your data is mostly simple values, with the xValue being a string and hence falling into categories, your data object needs to be an array of numbers.
eg:- data=[100,200,300]
So now we have the final form of how your data would look like, we need to parse the available data structure/object graph into this form. You have an option to either do this in PHP or JavaScript.
This is how you can do it in javascript, make sure to do this before calling the Highchart constructor, and use the derived objects while setting the options.
var superData = [{
propertyA: 'A',
propertyB: 10
}, {
propertyA: 'B',
propertyB: 15
}, {
propertyA: 'C',
propertyB: 1
}];
var seriesData = [],
categories = [];
for (var i = 0; i < superData.length; i++) {
//you may want to do a parseInt/parseFloat it this value is a string
seriesData.push(superData[i].propertyB);
categories.push(superData[i].propertyA);
}
...
xAxis: {
categories: categories
},
series: [{
name: 'serie',
type: 'column',
data: seriesData
}]
...
Parsing complex JSON into highchart form | Highchart & Highstock # jsFiddle
Refer convert mysql resultset into a (name, data) object to be fed into HighCharts to see how a similar thing can be done in PHP