CODEWITHSUNDEEP
c#javascriptasp.net-mvc
peter
peter

Reputation: 2103

MVC 4 & Google Charts - How to pass data for Line Chart from Controller to View?

I'm trying to display information collected like this (Controller):

    public JsonResult GetDataAssets()
    {
        List<string[]> data = new List<string[]>();
        data.Add(new[] { "Day", "Kasse", "Bonds", "Stocks", "Futures", "Options" });
        data.Add(new[] { "01.03.", "200", "500", "100", "0", "10" });
        data.Add(new[] { "01.03.", "300", "450", "150", "50", "30" });
        data.Add(new[] { "01.03.", "350", "200", "180", "80", "40" });
        return Json(data);
    }

..in a Google Chart, like this (View):

function drawChart() {

    var data = google.visualization.arrayToDataTable($.post('GetDataAssets', {}).responseText);
    var options = {
        title: 'Performance'
    };

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

This gives me a js exception stating data is not an array. It's probably not done with passing the data like i tried.. How would i need to work the data returned by the ajax call to be in valid format?

Answer:

This performed fetching & very flexible converting data as handed over already jsonyfied by the controller written above. Great Link: this blog post

               var tdata = new google.visualization.DataTable();
               var rows = data.length;
               var cols = data[0].length;

               tdata.addColumn('string', data[0][0]);
               for (var i = 1; i < cols; i++) {
                   tdata.addColumn('number', data[0][i]);
               }

               tdata.addRows(data.length);
               for (var i = 0; i < data.length; i++) {
                   tdata.setCell(i, 0, data[i][0]);
                   for (var j = 1; j < cols; j++) {
                       var value = parseInt(data[i][j]);
                       tdata.setCell(i, j, value);
                   }
               }

Upvotes: 4

Views: 12783

Answers (3)

JudasPriest
JudasPriest

Reputation: 85

   function drawChart() {
          $.get('/Home/GetData', {},

   function (data) {
      var tdata = new google.visualization.DataTable();

      tdata.addColumn('string', 'day');
      tdata.addColumn('number', 'kasse');
      tdata.addColumn('number', 'Bonds');
      tdata.addColumn('number', 'Stocks');
      tdata.addColumn('number', 'Futures');


      for (var i = 0; i < data.length; i++) {
          tdata.addRow([data[i].day, data[i].Kasse, data[i].Bonds, data[i].Stocks, data[i].Futures]);
      }

      var options = {
          title: "Year Wheel"
      };

      var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
      chart.draw(tdata, options);
  });
      }

Upvotes: 2

Ajeesh M
Ajeesh M

Reputation: 2092

function drawChart() {

    $.post('GetDataAssets', {}, function(d){
        var data = google.visualization.arrayToDataTable(d);
    var options = {
        title: 'Performance'
    };

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

$.post() returns an XMLHttpRequest. Its initial responseText will be empty until request completes with status 4. What you are doing wrong is, you are passing XMLHttpRequest immediately.

UPDATE

Try this on your controller

public JsonResult GetDataAssets() {
        List<object> data = new List<object>();
        data.Add(new[] { "Day", "Kasse", "Bonds", "Stocks", "Futures", "Options" });
        data.Add(new[] { 01.03, 200, 500, 100, 0, 10 });
        data.Add(new[] { 01.03, 300, 450, 150, 50, 30 });
        data.Add(new[] { 12.15, 350, 200, 180, 80, 40 });
        return Json(data);
    }

Upvotes: 2

haim770
haim770

Reputation: 49095

I don't know much about Google Charts, but i do know that this line:

var data = google.visualization.arrayToDataTable($.post('GetDataAssets', {}).responseText);

will not fill data with the json response from the server, since (unless otherwise specified) ajax requests are done in an asynchronous way.

This is the way to go about it:

var jsonData = null;

$.post('GetDataAssets',
       {},
       function(data) { jsonData = data; },
       'json');

var data = google.visualization.arrayToDataTable(jsonData);

Upvotes: 2

Related Questions