jquery - Highstocks(compare chart) input data without using getJSON

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: '{series.name}: {point.y} ({point.change}%)
',
                        pointFormat: '{series.name}: {point.y}
',
                        valueDecimals: 0
                    },

                    series: seriesOptions,
                    exporting: {
                        enabled: false
                    }


                });
            }

        });
});

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

Answer

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) { ... } );