In my previous post “How to load MySQL results to Highcharts using JSON”, the x-axis values were hard-coded.

Some of you guys were wondering how to set the x-axis values dynamically as well. So I came up with this example.

 

1. Set up the chart options

Set up the chart options without rendering the chart. Leave the x-axis and y-axis series as empty arrays.

xAxis: {
categories: []
},
...
series: []

Full code:

var options = {
chart: {
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'Revenue vs. Overhead',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Amount'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b>
'+
this.x +': '+ this.y;
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: []
}

 

2. Include the x-axis data in JSON output

Previously, there was only y-axis series data in JSON output but this time x-axis data is included as the first array item.

Month is our x-axis category

[{
"name": "Month",
"data": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
}, {
"name": "Revenue",
"data": [23987, 24784, 25899, 25569, 25897, 25668, 24114, 23899, 24987, 25111, 25899, 23221]
}, {
"name": "Overhead",
"data": [21990, 22365, 21987, 22369, 22558, 22987, 23521, 23003, 22756, 23112, 22987, 22897]
}]

I will skip over how to generate this using PHP as I have a few other samples in my previous posts.

 

3. Populate the chart with JSON data

Full code:

$.getJSON("data.json", function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
options.series[1] = json[2];
chart = new Highcharts.Chart(options);
});

I will break it down line by line.

 

This is a shortcut Ajax call for JSON to get our data:

$.getJSON("data.json", function(json) {
...
});

It’s important that we populate the data and render the chart upon completion of data load from data.json file.

 

This is how we set the x-axis category:

options.xAxis.categories = json[0]['data'];

x-axis data to needs to look like this:

["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]

But the first index of array from our JSON data look like this:

{
"name": "Month",
"data": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
}

We can simply put [“Jan”, “Feb”, “Mar”, “Apr”, “May”, “Jun”, “Jul”, “Aug”, “Sep”, “Oct”, “Nov”, “Dec”] as the first item of JSON array but it’s more consistent to put the meta-data such as “name” and “data” similar to y-axis series data.

Therefore, json[0][‘data’] will give us just the array of the months without the meta-data.

 

Moving on.

We set the first series to json[1] and the second series to json[2]:

options.series[0] = json[1];
options.series[1] = json[2];

Since y-axis series expect the data to look like this, we are good:

{
"name": "Revenue",
"data": [23987, 24784, 25899, 25569, 25897, 25668, 24114, 23899, 24987, 25111, 25899, 23221]
}

If you had more series, you can use json[3], json[4] and so forth as long as you have the data in the JSON data file.

 

Lastly, render the chart with all the options:

chart = new Highcharts.Chart(options);

Beautiful!

 

4. Put it all together


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'Revenue vs. Overhead',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Amount'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y;
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: []
}

$.getJSON("data.json", function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
options.series[1] = json[2];
chart = new Highcharts.Chart(options);
});
});
</script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>

I hope this helps.