Create a Google Chart from string

Question

I have a javascript string that contains all the data for "arrayToDataTable".

var pieData = "['Red', 3], ['Blue', 6] , ['Green', 8]";

My pie chart:

function drawPieChart() {
    var data = google.visualization.arrayToDataTable([
    ['Team', 'Votes'],
    pieData
    ]);

    var options = {         
        sliceVisibilityThreshold: 0,
        width: 620,
        height: 300,
    };

    var chart = new google.visualization.PieChart(document.getElementById('pieChart'));
    chart.draw(data, options);
  }

When the function is run, the following error is rendered "Invalid type for row 0".

Is there some simple way to make the string pieData usable for arrayToDataTable?

please provide your work in jsfiddle... – Sagar R Jul 15 '16 at 10:29 — Sagar R, Jul 15 '16 at 10:29

RH7 · Accepted Answer · 2016-07-15T11:14:02.867

One of the solutions is to use eval() to evaluate the expression inside the string as JavaScript code. More information on this function is available here.

Solution

function drawPieChart() {
    var pieData = "['Red', 3], ['Blue', 6] , ['Green', 8]";
    var dataArray = [
      ['Team', 'Votes']        
    ];

    var newDataArray = dataArray.concat(eval("[" + pieData + "]"));
    var data = google.visualization.arrayToDataTable(newDataArray);

    var options = {         
       sliceVisibilityThreshold: 0,
       width: 620,
       height: 300,
    };

    var chart = new google.visualization.PieChart(document.getElementById('pieChart'));
    chart.draw(data, options);
  }

Once the String is evaluated as a JavaScript expression the array is concatenated into the dataArray to form your data array for your new chart .

recommend using [JSON.parse() vs. eval()](http://stackoverflow.com/q/1843343/5090771) — WhiteHat, Jul 15 '16 at 12:24

Create a Google Chart from string

1 Answers1