Transform string into array

2

I'm searching data and mounting a string to go to the graphics api of google but I'm having trouble, I'm doing it like this:

var variavel = "['Data', 'Membros', 'Visitantes'],";
for(var b = 0; b < pontos.length; b++){
    var obj = pontos[b][0];
    variavel = variavel + "['" + obj.data + "', " + obj.membros + ", " + obj.visitantes + "],"
   }

   variavel = variavel.replace(/'/g, '"');

   var parsVal = JSON.parse(variavel);

In this part I'm creating this string.

The problem you're experiencing is because of , the last time it passes in. In the console the following error was plotted:

  

Uncaught SyntaxError: Unexpected token,

After this I'm doing is plotting on the div the graph:

   google.charts.load('current', {'packages':['corechart']});
   google.charts.setOnLoadCallback(drawChart);

   function drawChart() {
    var data = google.visualization.arrayToDataTable(parsVal);

    var options = {
     title: 'Membros x Visitantes',
     curveType: 'function',
     legend: { position: 'bottom' }
    };

    var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

    chart.draw(data, options);
   }

My chart is not appearing on the page.

In the documentation, let me do it this way:

<script type="text/javascript">
  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales', 'Expenses'],
      ['2004',  1000,      400],
      ['2005',  1170,      460],
      ['2006',  660,       1120],
      ['2007',  1030,      540]
    ]);

    var options = {
      title: 'Company Performance',
      curveType: 'function',
      legend: { position: 'bottom' }
    };

    var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

    chart.draw(data, options);
  }
</script>

But what I need to do is do it dynamically, so the data is taken when the page loads. This graphic is getting here:

https://developers.google.com/chart/interactive/docs/gallery/linechart
    
asked by anonymous 12.07.2016 / 19:10

1 answer

7

In your case, using string is an unnecessary step because you can use JS objects yourself to get the desired result.

Based on this, a simplification of your original code follows:

var variavel = [['Data', 'Membros', 'Visitantes']];
for(var b = 0; b < pontos.length; b++){
    var obj = pontos[b][0];
    variavel.push( [ obj.data, obj.membros, obj.visitantes ] );
}

In this way, variavel will already contain the ready object, without conversion.

To understand better, we start by creating an array array :

var variavel = [['Data', 'Membros', 'Visitantes']];

And here, we simply put each new iteration in a new array of 3 items in the main:

    variavel.push( [ obj.data, obj.membros, obj.visitantes ] );

Assuming that data , membros and visitantes are respectively 1, 2 and 3 in the first iteration and 10, 20 and 30 in the second it is thus:

[
   ['Data', 'Membros', 'Visitantes'],
   [      1,        2,            3],
   [     10,       20,           30]
]

and so on.

See working at CODEPEN .

    

12.07.2016 / 19:36