Blog Jon

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.

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 }