Tenho um JSON
no seguinte formato:
[
{
"Countrys": [
"Cyprus",
"Finland",
"Germany",
"Grenada",
"Haiti",
"Ireland",
"North Korea",
"Swaziland",
"Turkmenistan",
"Zambia"
],
"ListDataPerYear": [
{
"Year": 2011,
"ListValues": [
2110,
6540,
3870,
0,
387,
2870,
566,
0,
4770,
609
]
},
{
"Year": 2012,
"ListValues": [
1960,
6280,
3880,
0,
396,
2850,
574,
0,
4850,
620
]
},
{
"Year": 2013,
"ListValues": [
1690,
6120,
3940,
0,
393,
2810,
434,
0,
4880,
635
]
}
]
}
]
Preciso usar esse JSON
para gerar um gráfico de linha (Line Charts do google charts). Caso queiram ver um exemplo de como será o gráfico, será algo como está no snippet oculto abaixo:
google.charts.load('current', {'packages':['line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Ano');
data.addColumn('number', 'Cyprus');
data.addColumn('number', 'Finland');
data.addColumn('number', 'Germany');
data.addColumn('number', 'Grenada');
data.addColumn('number', 'Haiti');
data.addColumn('number', 'Ireland');
data.addColumn('number', 'North Korea');
data.addColumn('number', 'Swaziland');
data.addColumn('number', 'Turkmenistan');
data.addColumn('number', 'Zambia');
data.addRows([
[2011, 2110, 6540, 3870, 321, 387, 2870, 566, 630, 4770, 609],
[2012, 1960, 6280, 3880, 407, 396, 2850, 574, 900, 4850, 620],
[2013, 2930, 6120, 3940, 201, 393, 2810, 434, 1500, 4880, 635]
]);
var options = {
chart: {
title: 'Box Office Earnings in First Two Weeks of Opening',
subtitle: 'in millions of dollars (USD)'
},
width: 800,
height: 400
};
var chart = new google.charts.Line(document.getElementById('linechart_material'));
chart.draw(data, google.charts.Line.convertOptions(options));
}
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<div id="linechart_material"></div>
</body>
</html>
Para isso preciso mapear o JSON
para um array
no formato abaixo:
[
[Year, ListValues[0], ListValues[1], ListValues[2], ..., ListValues[9]],
...
]
Ficando assim:
[
[2011, 2110, 6540, 3870, 0, 387, 2870, 566, 0, 4770, 609],
[2012, 1960, 6280, 3880, 0, 396, 2850, 574, 0, 4850, 620],
[2013, 1690, 6120, 3940, 0, 393, 2810, 434, 0, 4880, 635]
]
Eu já consegui formatar o array
, mas gostaria de saber se tem alguma forma de mapear esse formato de JSON
de forma mais simples do que essa que fiz abaixo:
var result = [
{
"Countrys": [
"Cyprus",
"Finland",
"Germany",
"Grenada",
"Haiti",
"Ireland",
"North Korea",
"Swaziland",
"Turkmenistan",
"Zambia"
],
"ListDataPerYear": [
{
"Year": 2011,
"ListValues": [
2110,
6540,
3870,
0,
387,
2870,
566,
0,
4770,
609
]
},
{
"Year": 2012,
"ListValues": [
1960,
6280,
3880,
0,
396,
2850,
574,
0,
4850,
620
]
},
{
"Year": 2013,
"ListValues": [
1690,
6120,
3940,
0,
393,
2810,
434,
0,
4880,
635
]
}
]
}
];
var arrayAux = result.map(value => value.ListDataPerYear)[0];
var dataArray = [ arrayAux.map(value => value.Year), arrayAux.map(value => value.ListValues) ];
var dataLineChart = [];
arrayLength = dataArray.length;
//Montar array com valores (cada ano representa um linha)
for (var i = 0; i < dataArray[0].length; i++) {
var row = [];
row.push(dataArray[0][i]);
for (var j = 0; j < dataArray[1][i].length; j++) {
row.push(dataArray[1][i][j]);
}
dataLineChart.push(row);
}
console.log(dataLineChart);