Formatting the data to populate google charts

Question

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",
                  "2014","45",
                  "2015","40",
                  "2016","98"
                });

        return chartData;
 }

and here is my Client side code.

<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 data = google.visualization.arrayToDataTable(r.d);
                var chart = new google.visualization.LineChart($("#chart")[0]);
                chart.draw(data, options);
            },
            failure: function (r) {
                alert(r.d);
            },
            error: function (r) {
                alert(r.d);
            }
        });
    }

</script>

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 ?

Answer 1

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 = {}; rd = [["DateTime","Bugs"],["2011",12],["2014",45],["2015",40],["2016",98]]; var data = google.visualization.arrayToDataTable(rd); 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> 

Answer 2

To answer your question:

"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 ?

You are adding the entire table and it's reading the number of rows as the number of columns. It's expecting two columns with 8 rows of data. Break it down to something like this, this is if you are accessing the data from the class.:

Without seeing all your code this is a sample of the type of algorithm you would need:

Create a class for your objects' data:

public class MyData{

    public string Year {get; set;}
    public int Bugs {get; set;}

    var bugs = new List<MyData>BugList():
    // add data.

Get that data with your ajax to a method that will get the List of data and serialize it into a Json format.

return JsonConvert.SerializeObject(bugs);

You can then access the data from within the javascript. It's important to separate out the chart part of the code from the C# data, for the sake of modularisation. Hence the details for the chart are added where the chart is created.

var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Bugs');
for (var i in chardata) {
    data.addRow([chardata.Year[i], ints[chardata.Bugs[i]]]);
}

As an example try the following:

var str = new string[3] {"2011", "2012", "2013"};

var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Bugs');
for (var i in str) {
    data.addRow([str[i], ints[i]]);
}

Test it on something simple like this, then work on accessing your data through the ajax.