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

admin管理员组

文章数量:1347657

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);
                   }
               }

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);
                   }
               }

• c#
• javascript
• asp-mvc

Share Improve this question Follow edited Dec 15, 2013 at 18:34 GEOCHET 21.3k1515 gold badges7777 silver badges9999 bronze badges asked May 30, 2013 at 11:20 peterpeter 2,11377 gold badges2525 silver badges5151 bronze badges 0

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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 pletes 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);
    }

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);

   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);
  });
      }

本文标签： cMVC 4 amp Google ChartsHow to pass data for Line Chart from Controller to ViewStack Overflow