Lara Lara - 3 months ago 63
ASP.NET (C#) Question

Formatting the data to populate google charts

I am trying to display Line charts using Google API. For the same I tried to format the data from ASP.net Webmethod like

[WebMethod]
public static List<object> GetChartData()
{
List<object> chartData = new List<object>();


chartData.Add(new object[] { "DateTime", "Bugs" });
chartData.Add(new object[] { "2011", 12 });
chartData.Add(new object[] { "2011", 45 });
chartData.Add(new object[] { "2011", 40 });
chartData.Add(new object[] { "2011", 98 });

return chartData;
}


and here is my Client side code.

<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);

function drawChart() {
var options = {
title: 'Bug Tracker'
};
$.ajax({
type: "POST",
url: "WebForm1.aspx/GetChartData",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
var charData = r.d;
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Bugs');

for (var i = 0; i < charData.length; i++) {
data.addRow([charData[i].DateTime, parseInt(charData[i].Bugs)]);
}

var options = {
title: "Bug Tracker",
pointSize: 5
};

var lineChart = new google.visualization.LineChart(document.getElementById('chart'));
lineChart.draw(data, options);

},
failure: function (r) {
alert(r.d);
},
error: function (r) {
alert(r.d);
}
});
}

</script>
</head>
<body>
<div id="chart" style="width: 900px; height: 500px;">
</div>
</body>


On running the above code I am getting an error like
0x800a139e - JavaScript runtime error: Row 0 has 8 columns, but must have 2
What is wrong and how to resolve that ?

Here is the Chart Pic.
Chart Pic

Answer

any column after the first, should be a number
unless given a specific role, such as tooltip

try this...

chartData.Add(new object[] {"DateTime", "Bugs"});
chartData.Add(new object[] {"2011", 12});
chartData.Add(new object[] {"2014", 45});
chartData.Add(new object[] {"2015", 40});
chartData.Add(new object[] {"2016", 98});

or on the client, adjusting the code in the comment...

var charData = r.d;
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Bugs');

for (var i = 0; i < charData.length; i++) {
  data.addRow([charData[i].DateTime, pareseInt(charData[i].Bugs)]);
}

EDIT

with data as follows...
[["DateTime","Bugs"],["2011",12],["2014",45],["2015",40],["2016",98]]

then only need arrayToDataTable to create DataTable

see following working snippet...

google.charts.load('current', {
  callback: function () {
    var r = {};

    r.d = [["DateTime","Bugs"],["2011",12],["2014",45],["2015",40],["2016",98]];

    var data = google.visualization.arrayToDataTable(r.d);

    var options = {
      title: "Bug Tracker",
      pointSize: 5
    };

    var lineChart = new google.visualization.LineChart(document.getElementById('chart'));
    lineChart.draw(data, options);
  },
  packages:['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>