Highstocks(compare chart) input data without using getJSON

Question

I am using highstocks.js for creating compare graphs but as I have calculate data in one go for three curves hence get them in a variable and split them to get my individual json.

msg=[[1384972200000,2],[1385058600000,4],[1385145000000,5]]~~[[1384972200000,0],[1385058600000,0]]~~[[1384972200000,1],[1385058600000,1],[1385145000000,1]]
var data = msg.split("~~");

As I am having three curves hence I have a loop not using getJSON hence I have removed it and called only the function

 $(function() {
            var seriesOptions = [],
                yAxisOptions = [],
                seriesCounter = 0,
                names = ['Requested', 'Submitted', 'Approved'],
                colors = Highcharts.getOptions().colors;
                var data;                
               $.ajax({
                    type: "POST",
                    url: "highstockPPAP.cgi",                      
                    })
                    .done(function( msg ) {                        
                    data = msg.split("~~");                       
               });

            $.each(names, function(i, name) {
            //as Iam not using this getJSON how to remove it               
            $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename='+ name.toLowerCase() +'-c.json&callback=?',function test() {
               var newdata=JSON.parse(data[i]);
                    seriesOptions[i] = {
                        name: name,
                        data: newdata                          
                    }; 


                    // As we're loading the data asynchronously, we don't know what order it will arrive. So
                    // we keep a counter and create the chart when all the data is loaded.
                    seriesCounter++;

                    if (seriesCounter == names.length) {
                        createChart();
                    }
                });
            });



            // create the chart when all data is loaded
            function createChart() {
                Highcharts.setOptions({

                    global: {
                        useUTC: false
                    }
                });

                $('#container').highcharts('StockChart', {
                    chart: {
                    },

                    rangeSelector: {
                        selected: 4
                    },
                    xAxis: {
                        type: 'datetime',
                         ordinal: false, //this sets the fixed time formats
                    },
                    yAxis: {
                        //labels: {
                        //  formatter: function() {
                                //return(this.value);
                            //  return (this.value > 0 ? '+' : '') + this.value + '%';
                        //  }
                        //},
                        plotLines: [{
                            value: 0,
                            width: 2,
                            color: 'silver'
                        }]
                    },

                    plotOptions: {
                        //series: {
                        //  compare: 'percent'
                        //}
                    },

                    tooltip: {
                //      pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
                        pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b><br/>',
                        valueDecimals: 0
                    },

                    series: seriesOptions,
                    exporting: {
                        enabled: false
                    }

                });
            }

        });
});

When I remove getJSON and leave only function nothing is loaded. What to do?

Answer 1

Well, let's try to change some thing in your code:

1) Change your message to something like that:

    msg= [
         [ [[1384972200000,2],[1385058600000,4],[1385145000000,5]] ], 
         [ [[1384972200000,0],[1385058600000,0]] ],
         [ [[1384972200000,1],[1385058600000,1],[1385145000000,1]] ]
         ]

So you will have three arrays, and that will be proper JSON. Then you will simply don't need to use split and parse your data.

2) Create chart after .ajax() is done, see:

           $.ajax({
                type: "POST",
                url: "highstockPPAP.cgi",                      
           }).done(function( data ) {                        
                $.each(data, function(i, d) {
                    seriesOptions[i].data = d;
                });                     
                createChart();
           });

3) Remove next each():

$.each(names, function(i, name) { ... } );

Answer 2

Change json and passed all values in one json

[[[1384972200000,2],[1385058600000,4],[1385145000000,5]],[[1384972200000,0],[1385058600000,0]],[[1384972200000,1],[1385058600000,1],[1385145000000,1]]]

and use the following link to access the json elements as array the final javascript is as follows:

 $( document ).ready(function() {
            $(function() {
                var seriesOptions = [],
                    yAxisOptions = [],
                    seriesCounter = 0,
                    names = ['Requested', 'Submitted', 'Approved'],
                    colors = Highcharts.getOptions().colors;                      

                 $.getJSON('highstockPPAP.cgi',function (data) {
                 alert(data[0]);           
                 $.each(names, function(i, name) {
                            seriesOptions[i] = {
                            name: name,
                            data: data[i]                            
                        };

                        // As we're loading the data asynchronously, we don't know what order it will arrive. So
                        // we keep a counter and create the chart when all the data is loaded.
                        seriesCounter++;

                        if (seriesCounter == names.length) {
                            createChart();
                        }
                    });
                });    

                // create the chart when all data is loaded
                function createChart() {
                    Highcharts.setOptions({

                        global: {
                            useUTC: false
                        }
                    });

                    $('#container').highcharts('StockChart', {
                        chart: {
                        },

                        rangeSelector: {
                            selected: 4
                        },
                        xAxis: {
                            type: 'datetime',
                             ordinal: false, //this sets the fixed time formats                           
                        },
                        yAxis: {

                            plotLines: [{
                                value: 0,
                                width: 2,
                                color: 'silver'
                            }]
                        },

                        plotOptions: {

                        },

                        tooltip: {

                            pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b><br/>',
                            valueDecimals: 0
                        },

                        series: seriesOptions,
                        exporting: {
                            enabled: false
                        }

                    });
                }

            });
    });