Skip to content

Highcharts jquery graphing library example with dynamic json data source

by Jon on October 31st, 2012

If you are trying to display a graph from dynamic data the best way to carry out this is using a json data feed. I have an example of how I got a json data set to display within a highcharts graph. This was a lot easier than I though it would be and works very well. Below I have an example of how to write the javascript to display the graph then grab the data and insert it into the graph. I also have an example of how the json data looks.

This is what the graph looks like.

highcharts jquery example chart

This is the javascript code to write the graph, be sure to include the highcharts library.

$(document).ready(function() {

      chart_answer = new Highcharts.Chart({
         chart: {
            backgroundColor: '#ffffff',
            borderColor: '#a2a2a1',
            borderWidth: 0,
            borderRadius: 0,
            renderTo: 'answer_time_chart',
            type: 'area',
	    plotBackgroundColor: '#fffdf6'
         },
         colors: ['#3399FF'],
         legend: {
            enabled: false
         },

         title: {
            text: ''
         },
         tooltip: {
            borderRadius: 0,
            borderWidth: 0,
            shadow: false,
            style: {
		fontSize: '7pt',
                color: '#000000'
            },
            formatter: function() {
                return 'Time: ' + this.x + '
Time: ' + (this.y/60|0) + ':' + (this.y % 60 < 10 ? '0':'')+(this.y % 60);            }
         },
         xAxis: {

            labels: {
                rotation: -45,
                x: 0,
                y: 40,
                style: {
                    color: '#333333'
                }
            },
            lineWidth: 1,
            lineColor: '#333333',
            minPadding: 0,
            maxPadding: 0,
            title: {
                text: ''
            },
            tickInterval: 2,
            tickmarkPlacement: 'on'
         },
         yAxis: {
            gridLineWidth: 0,
            labels: {
                formatter: function() {
                    return (this.value/60|0) + ':' + (this.value % 60 < 10 ? '0':'')+(this.value % 60);                },
                style: {
                    color: '#333333'
                }
            },
            lineWidth: 1,
            lineColor: '#333333',
            min: 0,
            minPadding: 0,
            maxPadding: 0,
            title: {
               text: ''
            }
         }
      });

This is the function used to insert the data into the graph.

var jsonURL = 'http://website.com/json-output.php?report=chart_answer';
jQuery.getJSON( jsonURL, function( data ){
var arr = [];
$.each(data.data, function(key, val) {
    var y = val.y;
    var customTooltip = val.customTooltip;
    arr.push({y: y, customTooltip: customTooltip})
})

var cats = [];
$.each(data.categories, function(key, val) {
    cats.push(val.cat)
})

chart_answer.xAxis[0].setCategories(cats);
var series = {data: arr};
chart_answer.addSeries(series);
});

Finally this is the json being output by the php page which was custom created.

{ "data": [ { "y": 2 }, { "y": 3 }, { "y": 3 }, { "y": 4 }, { "y": 4 }, { "y": 4 }, { "y": 3 }, { "y": 2 }, { "y": 2 }, { "y": 3 }, { "y": 3 }, { "y": 3 }, { "y": 4 }, { "y": 4 }, { "y": 4 }, { "y": 4 } ], "categories": [ { "cat": "4:45-5:00" } , { "cat": "5:00-5:15" } , { "cat": "5:15-5:30" } , { "cat": "5:30-5:45" } , { "cat": "5:45-6:00" } , { "cat": "6:00-6:15" } , { "cat": "6:15-6:30" } , { "cat": "6:30-6:45" } , { "cat": "6:45-7:00" } , { "cat": "7:00-7:15" } , { "cat": "7:15-7:30" } , { "cat": "7:30-7:45" } , { "cat": "7:45-8:00" } , { "cat": "8:00-8:15" } , { "cat": "8:15-8:30" } , { "cat": "8:30-8:45" } ], "tickmark": 4 }

From → Linux, Tech

One Comment
  1. daniel permalink

    could you send me the source code?, i need to known where is the order to put your code

Leave a Reply

Note: XHTML is allowed. Your email address will never be published.

Subscribe to this comment feed via RSS

%d bloggers like this: