Как изменить строку JSON для графической строки google

Question

У меня возникает проблема при построении многострочной диаграммы Google. Мое приложение находится в Laravel 5.1, и я извлекаю данные из базы данных MySQL, а затем преобразовываю их в строку JSON. Этот JSON действует как источник данных для таблицы данных Google. Но из-за формата данных JSON мне не удается построить линейную диаграмму и дать мне ошибку «Все серии на данной оси должны иметь один и тот же тип данных».

Мои данные JSON в ниже формате:

{"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}]}]} 

Но Google-диаграммы необходимы данные в ниже формате JSON:

{"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}]}]} 

Короче говоря, данные в этом формате:

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 

Я хочу данные в нижнем формате:

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

Как изменить данные JSON, чтобы сделать его совместимым с графической линией Google?

Answer 1

Вы можете сделать это примерно так. Здесь я пренебрег несколькими случаями краев (например, если вы не получаете DatSun или Fiat в объекте, это провалится, но это также можно легко обработать).

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);