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?

continue the code >. – Reigel Gallarde Dec 07 '13 at 12:02 — Reigel Gallarde, Dec 07 '13 at 12:02

score 1 · Answer 1 · edited May 23 '17 at 12:21

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
                        }

                    });
                }

            });
    });

score 0 · Accepted Answer · answered Dec 09 '13 at 10:40

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

the json needs to be parsed before being used or you need to define the dataType:"json" — norbdum, Dec 09 '13 at 11:22
1) point in only optional, just an advice. When you return that response from AJAX, it should be already JSON. `dataType` isn't necessary to set, jQuery should guess proper format. — Paweł Fus, Dec 09 '13 at 11:43

Highstocks(compare chart) input data without using getJSON

2 Answers2