Formatting JSON for Google Charts API
Question
Using MongoDB / Node consider the following payload:
var myObj = {
"date" : "1-23-45",
"one" : [
{
"a" : 8
},
{
"b" : 1
},
{
"c" : 9
},
{
"d" : 10
},
{
"e" : 12424
},
{
"f" : 11
},
{
"g" : 7
}
],
"two" : [
{
"h" : 6
},
{
"i" : 10
}
]
},
{
"date" : "1-24-45",
"one" : [
{
"a" : 8
},
{
"b" : 1
},
{
"c" : 9
},
{
"d" : 10
},
{
"e" : 12424
},
{
"f" : 11
},
{
"g" : 7
}
],
"two" : [
{
"h" : 6
},
{
"i" : 10
}
]
}
I am using Google Charts API and I would like to plot these points to a line graph. (see snippet)
<html> <head> <script type="text/javascript" src="https://www.google.com/jsapi?autoload={ 'modules':[{ 'name':'visualization', 'version':'1', 'packages':['corechart'] }] }"></script> <script type="text/javascript"> google.setOnLoadCallback(drawChart); var myObj = { "cols": [{ "id": "", "label": "year", "type": "string" }, { "id": "", "label": "sales", "type": "number" }, { "id": "", "label": "expenses", "type": "number" }], "rows": [{ "c": [{ "v": "2001" }, { "v": 3 }, { "v": 5 }] }, { "c": [{ "v": "2002" }, { "v": 5 }, { "v": 10 }] }, { "c": [{ "v": "2003" }, { "v": 6 }, { "v": 4 }] }, { "c": [{ "v": "2004" }, { "v": 8 }, { "v": 32 }] }, { "c": [{ "v": "2005" }, { "v": 3 }, { "v": 56 }] }] } function drawChart() { var data = new google.visualization.DataTable(myObj); var options = { title: 'My Chart', curveType: 'function', legend: { position: 'right' } }; var chart = new google.visualization.LineChart(document.getElementById('curve_chart')); chart.draw(data, options); } </script> </head> <body> <div id="curve_chart" style="width: 100%; height: 500px"></div> </body> </html>
Using the JSON I am provided, what would be the most effective way to massage the data into the format accepted by Google Charts API? I have looked into D3 but it seemed to have a higher learning curve, would that be the most recommended route? Would it be better to query the dataset differently / aggregate the result?
Help is much appreciated, as this has been a 2 day long venture!
Update -- TL;DR I need a script that goes from Format #1 => Format #2, no matter how big the payload is.
Format #1 - myObj
Format #2 -
var myObj = {
"cols": [{
"label": "Date",
"type": "string"
}, {
"label": "a",
"type": "number"
}, {
"label": "b",
"type": "number"
}, {
"label": "c",
"type": "number"
}, {
"label": "d",
"type": "number"
}, {
"label": "e",
"type": "number"
}, {
"label": "f",
"type": "number"
}, {
"label": "g",
"type": "number"
}, {
"label": "h",
"type": "number"
}, {
"label": "i",
"type": "number"
}
],
"rows": [{
"c": [{
"v": "day1"
}, {
"v": 300
}, {
"v": -500
}, {
"v": 23
}, {
"v": 120
}, {
"v": 150
}, {
"v": 1210
}, {
"v": 160
}, {
"v": 180
}, {
"v": 190
}]
}, {
"c": [{
"v": "day2"
}, {
"v": 1300
}, {
"v": -5200
}, {
"v": 253
}, {
"v": 6120
}, {
"v": 1350
}, {
"v": 110
}, {
"v": 2160
}, {
"v": 1180
}, {
"v": 1190
}]
}
]
}
1 answers
solution1
4 ACCPTED 2015-07-02 18:01:33
Looking at your data and how it needs to be formatted, something like the below would work. You will need to loop over each object to get the cols and then map over each array to get the rows .
var dataObj = {
"cols": [],
"rows": []
};
for(property in myObj) {
if(typeof myObj[property] === 'string') {
dataObj.cols.push({
"label": property,
"type": "string"
});
} else {
dataObj.rows.push({
"c": []
});
dataObj.rows[dataObj.rows.length - 1]["c"].push({
"date": "day" + dataObj.rows.length // The day: 1, 2, 3, etc.
});
myObj[property].map(function(object) {
for(prop in object) {
dataObj.cols.push({
"label": prop,
"type": "number"
});
dataObj.rows[dataObj.rows.length - 1]["c"].push({
"v": object[prop]
});
}
});
}
}
JSFiddle with Google Chart example (Open Console to see formatted data)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.