CHART - Extending HIGHCHARTS - Jugal | Data by ajax | Highchart & Highstock

http://stackoverflow.com/questions/11851122/blank-page-highchart-in-using-jquery-to-call-json-arrary/11852873#11852873 Jugal Thakkar http://jugal.me/

by bizamajig

HTML

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js" ></script>
<script type="text/javascript" src="http://jquery-json.googlecode.com/files/jquery.json-2.2.js" ></script>
<script type="text/javascript" src="http://code.jugal.me/js/jugalsLib.js" ></script>
<script type="text/javascript" src="http://code.highcharts.com/stock/highstock.src.js" ></script>
<script type="text/javascript" src="http://code.highcharts.com/stock/modules/exporting.src.js" ></script>

<div id="container"></div>

CSS

#container{
    min-width:500px;
}

JavaScript

$(function() {

    //data.json == json data that ajax call should return
    //http://stackoverflow.com/questions/7194408/how-can-i-use-the-jsfiddle-echo-feature-with-jquery
    var data = {
/*
        json: $.toJSON([
{ "name": "Cost","data": [272,196.72,94.38,56.8,29.28,21.42,6.69,5] },
{ "name": "Price","data": [316.7,309.5,191,125.5,81,49.5,20.5,20] }
        ])
*/
        
        json: $.toJSON(
        [
        { "name": "City 1", "data2": [70, 19, 3, 4] },
        { "name": "City 1",  "data2": [70, 19, 5, 6] },
        { "name": "City 1",  "data2": [70, 19, 7, 8]  },
        {  "name": "City 2",  "data2": [60, 18, 9, 10] }
        ]
        )};


    $.ajax({
        url: "/echo/json/",
        data: data,
        type: "POST",
        success: function(point) {

            var chartSeriesData = [];
            var chartCategory = [];


            $.each(point, function(i, item) {
                var series_name = item.name;
                var series_data = item.data2;
                var cagory = series_name;

                var series = {
                    name: series_name,
                    data: item.data2
                };
                chartSeriesData.push(series);
                chartCategory.push(series_name);
            });
            var chartingOptions = {
                chart: {
                    renderTo: 'container',
                    defaultSeriesType: 'column'
                },
                xAxis: {
                    categories: chartCategory
                },
                series: chartSeriesData
            };

            chartingOptions = $.extend({}, jugalsLib.getBasicChartOptions(), chartingOptions);
            chart = new Highcharts.Chart(chartingOptions);
        }
    });
});