Map JSON to array-specific format for Google Charts line chart

Asked

Viewed 65 times

0

I have a JSON in the following format:

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

I need to use this JSON to generate a line chart (Line Charts google Charts). If you want to see an example of what the chart will look like, it will look like in the snippet hidden below:

      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>

For that I need to map the JSON for a array in the format below:

[
    [Year, ListValues[0],  ListValues[1],  ListValues[2], ...,  ListValues[9]],
    ...
]

Thus remaining:

[
    [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]
]

I already managed to format the array, but I wonder if you have any way to map this format of JSON simpler than the one I made below:

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

javascript json array google-charts

1 answer

2


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 dataLineChart = result[0].ListDataPerYear.map(dataPerYear => [ dataPerYear.Year, ...dataPerYear.ListValues ]);
console.log(dataLineChart);

Is this readable? I believe this is the most practical way to create the array, but you can understand what is happening?

  • It became much more elegant, I can understand yes, but I could explain the reason for '...' in this excerpt: [ dataPerYear.Year, ...dataPerYear.Listvalues ]?

  • 1

    The three points is the operator spread. When used before an array, this operator deconstructs the array and passes each of the array items as a different parameter.

  • Perfect! Would you mind editing and adding this explanation in your reply? It helped me too, I knew there was a more practical way!! :)

Browser other questions tagged javascript json array google-charts

You are not signed in. Login or sign up in order to post.