display a weekly Highcharts graph from php and mysql - php

Question

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

Answer 1

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