Jugal | Troubleshooting highcharts error # 13 | Highchart & Highstock

http://stackoverflow.com/questions/13112652/instantiating-a-highcharts-object-via-getjson/13118747#13118747 Jugal Thakkar http://jugal.me/

by Jugal Thakkar

HTML

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.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: JSON.stringify([{
            "name": "City 1",
            "data2": [70, 19]},
        {
            "name": "City 2",
            "data2": [60, 18]}])
    };


    $.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);
            console.log("JSON: " + JSON.stringify(chartingOptions));
            console.log("Render to element with ID : " + chartingOptions.chart.renderTo);
            console.log("Number of matching dom elements : " + $("#" + chartingOptions.chart.renderTo).length);
            chart = new Highcharts.Chart(chartingOptions);
        }
    });
});