如何修改Google折线图的JSON字符串

Question

I am facing issue while plotting Google Multi-line chart. My application is in Laravel 5.1 and I am fetching data from MySQL database then converting it into JSON string. This JSON acts as data source for google data table. But due to the JSON data format I am unable to plot Line chart and giving me the error "All the series on given axis must be of the same data type".

My JSON data is in below format:

{"cols":[{"label":"Datetime","type":"date"},{"label":"Make","type":"string"},{"label":"Sales","type":"number"}],"rows":[{"c":[{"v":"Date(2011, 0, 31)"},{"v":"Datsun"},{"v":0}]},{"c":[{"v":"Date(2011, 1, 28)"},{"v":"Datsun"},{"v":0}]},{"c":[{"v":"Date(2011, 2, 31)"},{"v":"Datsun"},{"v":0}]},{"c":[{"v":"Date(2011, 3, 30)"},{"v":"Datsun"},{"v":0}]},{"c":[{"v":"Date(2011, 4, 31)"},{"v":"Datsun"},{"v":0}]},{"c":[{"v":"Date(2011, 5, 30)"},{"v":"Datsun"},{"v":0}]},{"c":[{"v":"Date(2011, 0, 31)"},{"v":"Fiat"},{"v":2150}]},{"c":[{"v":"Date(2011, 1, 28)"},{"v":"Fiat"},{"v":1839}]},{"c":[{"v":"Date(2011, 2, 31)"},{"v":"Fiat"},{"v":1860}]},{"c":[{"v":"Date(2011, 3, 30)"},{"v":"Fiat"},{"v":2030}]},{"c":[{"v":"Date(2011, 4, 31)"},{"v":"Fiat"},{"v":2143}]},{"c":[{"v":"Date(2011, 5, 30)"},{"v":"Fiat"},{"v":1500}]}]}

But Google-chart requires data in below JSON format:

 {"cols":[{"label":"Datetime","type":"date"},{"label":"Datsun","type":"string"}, {"label":"Fiat","type":"string"}],

"rows":[{"c":[{"v":"Date(2011, 0, 31)"},{"v":"0"},{"v":2150}]},{"c":  [{"v":"Date(2011, 1, 28)"},{"v":"0"},{"v":1839}]},{"c":[{"v":"Date(2011, 2, 31)"},{"v":"0"},{"v":1860}]}]}

In short, Data is in this format:

Datetime       Make     Sales
2011-01-31    'Datsun'   0   
2011-02-28    'Datsun'   0
2011-03-31    'Datsun'   0
2011-01-31    'Fiat'     2150
2011-02-28    'Fiat'     1839
2011-02-31    'Fiat'     1860

I want the data in below format:

Datetime     Datsun     Fiat
2011-01-31   0          2150
2011-02-28   0          1839
2011-3-31    0          1860

How to modify the JSON data in order to make it compatible with google line chart?

Answer 1

You can do this something like this. Here I have neglected several edge cases,(like if you dont get DatSun or Fiat in you object, this will fail, but that can also be handled easily).

var tempObj={}
var colName=[]
    obj.rows.forEach(function(r){
    if(!tempObj[r.c[0].v]){
        tempObj[r.c[0].v]={};
        tempObj[r.c[0].v][r.c[1].v]=r.c[2].v;
        colName.indexOf(r.c[1].v)==-1 ? colName.push(r.c[1].v) : null;
    }
    else {
        tempObj[r.c[0].v][r.c[1].v]=r.c[2].v;
        colName.indexOf(r.c[1].v)==-1 ? colName.push(r.c[1].v) : null;
    }
    })

    result={}
    result.cols=[{"label":"Datetime","type":"date"}];
    for(var i=0;i< colName.length ; i++){
      result.cols.push({"label":colName[i],"type":"string"})
    }
    result.rows=[];
    for(var key in tempObj){
        var temp={};
        temp.c=[];
        temp.c.push({"v":key});
        for(var i=0;i< colName.length ; i++){
          temp.c.push({"v":tempObj[key][colName[i]]});
        }

        result.rows.push(temp);
    }

    console.log(result);