Error in Google charts JavaScript library

Question

Error in Google charts JavaScript library

I am currently attempting to generate a Google pie chart using data extracted from an Excel sheet. The string that is returned is outlined below, which I am passing into

google.visualization.arrayToDataTable();

. Here is the code snippet that I have implemented:

    <script type="text/javascript">
  google.charts.load("current", {packages:["corechart"]});
  google.charts.setOnLoadCallback(drawChart);
   var str = '<%= JSNstring %>';     //the string returned from C#.


  var res= str.replace(/""/g,"'");
  res=res.replace(/"/g,"'");
  // 
  var ss=[res];
  document.write(ss);    //the output of this is:

[['Solution','TOTAL'],['Check',23],['FULL',18],['POP',109]]

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

    var options = {
      title: 'My Daily Activities',
      pieHole: 0.4,
    };

    var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
    chart.draw(data, options);
  }
</script>

The issue I am encountering is as follows:

JavaScript runtime error: First row is not an array.

Please advise on what mistakes I may be making and how I can address them effectively. Thank you in advance.

javascript asp.net json google-visualization

Answer 1

Answer №1

  `document.write(ss);`

Is this code specific to the example? If not, remove it and check the value of ss within your function like this-

function drawChart() {
console.write(ss);   
 var data = google.visualization.arrayToDataTable(ss);

    var options = {
      title: 'My Daily Activities',
      pieHole: 0.4,
    };

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

Update

Try rewriting your drawChart() function as follows-

function drawChart() {
    var str = '<%= JSNstring %>';     //returned string from C#.


  var res= str.replace(/""/g,"'");
  res=res.replace(/"/g,"'");
  // 
  var ss=[res];
  var data = google.visualization.arrayToDataTable(ss);

    var options = {
      title: 'My Daily Activities',
      pieHole: 0.4,
    };

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

Update 2

I have created a jsfiddle for you here, with your array hardcoded. As you can see, it works fine here. It seems that there might be an issue either on the server side or with the value of ss.

Answer 2

  `document.write(ss);`

Is this code specific to the example? If not, remove it and check the value of ss within your function like this-

function drawChart() {
console.write(ss);   
 var data = google.visualization.arrayToDataTable(ss);

    var options = {
      title: 'My Daily Activities',
      pieHole: 0.4,
    };

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

Update

Try rewriting your drawChart() function as follows-

function drawChart() {
    var str = '<%= JSNstring %>';     //returned string from C#.


  var res= str.replace(/""/g,"'");
  res=res.replace(/"/g,"'");
  // 
  var ss=[res];
  var data = google.visualization.arrayToDataTable(ss);

    var options = {
      title: 'My Daily Activities',
      pieHole: 0.4,
    };

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

Update 2

I have created a jsfiddle for you here, with your array hardcoded. As you can see, it works fine here. It seems that there might be an issue either on the server side or with the value of ss.

Answer 3

Answer №2

To properly handle the string and convert it into an array, you can follow these steps:

google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
 var dataString = '<%= jsonData %>';  //data returned from server-side code.


var parsedData= dataString.replace(/""/g,"'");
parsedData=parsedData.replace(/"/g,"'");
var dataArray='[' + parsedData + ']';

function drawChart() {
  var dataTable = google.visualization.arrayToDataTable(eval(dataArray));

  var options = {
    title: 'My Daily Activities',
    pieHole: 0.4,
  };

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

Answer 4

To properly handle the string and convert it into an array, you can follow these steps:

google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
 var dataString = '<%= jsonData %>';  //data returned from server-side code.


var parsedData= dataString.replace(/""/g,"'");
parsedData=parsedData.replace(/"/g,"'");
var dataArray='[' + parsedData + ']';

function drawChart() {
  var dataTable = google.visualization.arrayToDataTable(eval(dataArray));

  var options = {
    title: 'My Daily Activities',
    pieHole: 0.4,
  };

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

Error in Google charts JavaScript library

Answer №1

Answer №2

Similar questions

Unable to retrieve the value of a JSON object

Server Tag Parsing Error in Asp.Net

Ways to manage an element that has been loaded using the load query function

Tips for Omitting Hours, Minutes, and Seconds from AngularJS Date Display

Loop through a collection of items based on the values in a separate array using jQuery

Using ESP8266 to send JSON Parameters through HTTP POST Request

Retrieving JSON data containing peculiar characters and numerical values in iPhone SDK

Converting my HTML navigation menu to PHP

Why is jQuery button function only functioning for the first button?

Limit the vertical movement in Vue drag and drop operations

Retrieving the result of a LINQ query within a repository

Using ReactJS to load JSON data into a state array

Using Next-Image Relative Paths can lead to 404 errors when being indexed by web crawlers

Using Axios to facilitate communication between API and Interface

Encountered an error in the React.js app where it cannot read the property 'Tag' of undefined from domhandler

Learn the process of retrieving JSON data in an Excel file using the json_to_sheet function

When attempting to utilize nsIPrefBranch in a Firefox extension to save data, an unexpected error of NS_ERROR_UNEXPECTED occurs

Image uploading using AJAX onchange event

Extract hierarchical JSON data into a DataTable

Show specific keys in the JSON response