Create a valid google visualization data array from a json response in javascript

Question

I have below JSON response

[
    {line:"BAH", data:{May:120}, source:"TANZANIA RAILWAYS"},
    {line:"DOM", data:{Mar:43.5, Apr:90, May:120}, source:"TANZANIA RAILWAYS"},
    {line:"GLW", data:{May:120}, source:"TANZANIA RAILWAYS"},
    {line:"KID", data:{Mar:43.5, Apr:90}, source:"TANZANIA RAILWAYS"}, 
    {line:"KLO", data:{Mar:43.5, Apr:90, May:120}, source:"TANZANIA RAILWAYS"},
    {line:"KUA", data:{May:120}, source:"TANZANIA RAILWAYS"}, 
    {line:"KZM", data:{May:120}, source:"TANZANIA RAILWAYS"}, 
    {line:"LAL", data:{Feb:31, Mar:59, May:120}, source:"TANZANIA RAILWAYS"},
    {line:"MAN", data:{Mar:43.5, Apr:90, May:120}, source:"TANZANIA RAILWAYS"},
    {line:"MID", data:{Feb:0}, source:"TANZANIA RAILWAYS"},
    {line:"MIK", data:{Mar:0, Feb:31}, source:"TANZANIA RAILWAYS"}, 
    {line:"MKA", data:{Apr:90}, source:"TANZANIA RAILWAYS"},
    {line:"MOR", data:{Mar:59, Apr:90, May:120}, source:"TANZANIA RAILWAYS"},
    {line:"MUP", data:{Mar:28}, source:"TANZANIA RAILWAYS"}, 
    {line:"NGR", data:{Feb:31, Mar:59, May:120}, source:"TANZANIA RAILWAYS"},
    {line:"NUR", data:{May:120}, source:"TANZANIA RAILWAYS"}, 
    {line:"RUV", data:{Feb:31, Mar:59, Jun:151}, source:"TANZANIA RAILWAYS"},
    {line:"TBR", data:{Apr:90, May:120}, source:"TANZANIA RAILWAYS"},
    {line:"URM", data:{May:120}, source:"TANZANIA RAILWAYS"},
    {line:"UVZ", data:{May:120}, source:"TANZANIA RAILWAYS"},
    {line:"WMI", data:{Jan:0}, source:"TANZANIA RAILWAYS"}
]

I would like to create a google data array that can be display on google charts with below format

['MONTH',,'BAH','DOM','GLW','KID','KLO','KUA','KZM','LAL','MAN','MID','MIK','MKA','MOR','MUP','NGR','NUR','RUV','TBR','URM','UVZ','WM'],
['JAN', 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
['FEB', 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
['MAR', 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
['APR', 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
['MAY', 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
['JUN', 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
['JULY',0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
['AUG', 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
['SEP', 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
['OCT', 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
['NOV', 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
['DEC', 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]

I would wish to replace the 0 with the actual values read from the JSON data. and form a valid google chart array. Thank you.

Answer 1

I Found a better solution Highharts.

 series_results = [
    {line:"BAH", data:{May:120}, source:"TANZANIA RAILWAYS"},
    {line:"DOM", data:{Mar:43.5, Apr:90, May:120}, source:"TANZANIA RAILWAYS"},
    {line:"GLW", data:{May:120}, source:"TANZANIA RAILWAYS"},
    {line:"KID", data:{Mar:43.5, Apr:90}, source:"TANZANIA RAILWAYS"}, 
    {line:"KLO", data:{Mar:43.5, Apr:90, May:120}, source:"TANZANIA RAILWAYS"},
    {line:"KUA", data:{May:120}, source:"TANZANIA RAILWAYS"}, 
    {line:"KZM", data:{May:120}, source:"TANZANIA RAILWAYS"}, 
    {line:"LAL", data:{Feb:31, Mar:59, May:120}, source:"TANZANIA RAILWAYS"},
    {line:"MAN", data:{Mar:43.5, Apr:90, May:120}, source:"TANZANIA RAILWAYS"},
    {line:"MID", data:{Feb:0}, source:"TANZANIA RAILWAYS"},
    {line:"MIK", data:{Mar:0, Feb:31}, source:"TANZANIA RAILWAYS"}, 
    {line:"MKA", data:{Apr:90}, source:"TANZANIA RAILWAYS"},
    {line:"MOR", data:{Mar:59, Apr:90, May:120}, source:"TANZANIA RAILWAYS"},
    {line:"MUP", data:{Mar:28}, source:"TANZANIA RAILWAYS"}, 
    {line:"NGR", data:{Feb:31, Mar:59, May:120}, source:"TANZANIA RAILWAYS"},
    {line:"NUR", data:{May:120}, source:"TANZANIA RAILWAYS"}, 
    {line:"RUV", data:{Feb:31, Mar:59, Jun:151}, source:"TANZANIA RAILWAYS"},
    {line:"TBR", data:{Apr:90, May:120}, source:"TANZANIA RAILWAYS"},
    {line:"URM", data:{May:120}, source:"TANZANIA RAILWAYS"},
    {line:"UVZ", data:{May:120}, source:"TANZANIA RAILWAYS"},
    {line:"WMI", data:{Jan:0}, source:"TANZANIA RAILWAYS"}
]

    var data_series = JSON.parse(series_results) ;
                                                       // console.log('data_series '+data_series.data);
                                                        //
                                                      //alert(data_series.toSource());
                                                        var data_t = [] ;
                                                        var categ = [] ;
                                                        var categ_sorted = null ;
                                                        //
                                                        var graph_data = [] ;
                                                        var values = {} ;
                                                        var d = [] ;
                                                        var data_source = null ;
                                                        for(var item in data_series)
                                                        {
                                                             //  alert(data_series[item].line) ;
                                                               values['name'] = data_series[item].line ;
                                                               //
                                                               data_source = data_series[item].source ;
                                                              // alert(item);
                                                               //
                                                               sdata=[];
                                                                // alert(data_series[item].line) ;
                                                                 for(var i in data_series[item].data)
                                                                 {
                                                                //  alert(">>>>"+data_series[item].line+">>>>>>"+i+">>>"+data_series[item].data[i]);
                                                                    // 
                                                                     sdata.push(data_series[item].data[i]) ;
                                                                     //
                                                                     categ.push(i);
                                                                     //graph_data.push(values);

                                                                 }
                                                                // alert(">>>> sdatae >>>> "+sdata);
                                                                 values['data'] = sdata;
                                                                 graph_data.push(values);
                                                                 values={};
                                                                // alert(categ.toSource());
                                                                // alert(data_series[item].data) ;
                                                             //  values['name'] = data_series.line ;
                                                             //  values['data'] = [data_series.data[item]] ;
                                                               //
                                                              //alert(values.toSource()) ;
                                                              // graph_data.push(values);
                                                             //  categ.push(item);
                                                        }
                                                        //alert(graph_data.toSource());

                                                        categ_sorted = sortMonths(categ) ; 
                                                    //  alert(categ_sorted.toSource()) ;
                                                    //  alert(graph_data.toSource());
                                                    //  alert(categ.toSource());
                                                         //dynamically build graphs

                                                       $('#container').highcharts({
                                                            title: {
                                                                text: ''+graph_results.graph_name,
                                                                x: -20 //center
                                                            },
                                                            subtitle: {
                                                                text: 'Data Source: '+data_source,
                                                                x: -20
                                                            },
                                                            xAxis: {
                                                                categories: categ_sorted
                                                            },
                                                            yAxis: {
                                                                title: {
                                                                    text: ''+graph_results.name_y_axis
                                                                },
                                                                plotLines: [{
                                                                    value: 0,
                                                                    width: 1,
                                                                    color: '#808080'
                                                                }]
                                                            },
                                                            credits:
                                                            {
                                                                enabled: false
                                                            },
                                                            tooltip: {
                                                                valueSuffix: ''
                                                            },
                                                            legend: {
                                                                layout: 'vertical',
                                                                align: 'right',
                                                                verticalAlign: 'middle',
                                                                borderWidth: 0
                                                            },
                                                            series: graph_data
                                                        });