how to pass the list of objects from controller to view and populate google.visualization.DataTable()?

Question

how to pass the list of objects from controller to view and populate google.visualization.DataTable() to draw line chart ?

Model :

 public class Temperaturestatus
 {
        public DateTime Time { get; set; }

        public double? TempMax{ get; set; }

        public double? TempMin { get; set; }

        public double? TempMedian { get; set; }
}

Controller:

 public class ChartController : Controller
    {
        public JsonResult JsonData()
        {
            var tempstatlist = new List<Temperaturestatus>();
            foreach (var item in machineStatus)
            {
                Temperaturestatus tempstat = new Temperaturestatus();
                tempstat.Time= item.currentTime;
                tempstat.TempMax= item.MaximumTemperature;
                tempstat.TempMin= item.MinimumTemperature;
                tempstat.TempMedian = item.MedianTemperature ;

                tempstatlist.Add(tempstat);
            }

            return Json(tempstatlist);
        }

    }

View :

@{
   ViewData["Title"] = "UseDataFromObjectList";
}

<h2>Use Data From Object List</h2>
<hr />

<div class="container">
   <div id="chart1"></div>
</div>


@section scripts{
   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
   <script>
       google.charts.load('current', { 'packages': ['corechart'] });
       google.charts.setOnLoadCallback(callback);


       function callback() {
           var option = {
               title: "TemperatureChart",
               width: 900,
               height: 650,
               legend: { position: 'none' },
               vAxis: { viewWindow: { min: -1, max: 11 }, baselineColor: 'transparent' },
               chartArea: { height: '80%', width: '85%', left: 100, backgroundColor: { stroke: "gray", strokeWidth: 1 } },
               pointSize: 10
           };
           var chart = new google.visualization.LineChart(document.getElementById('chart1'));
           var data = new google.visualization.DataTable();
           data.addColumn('datetime', 'time');
           data.addColumn('number', 'MaxTemp');
           data.addColumn('number', 'MinTemp');
           data.addColumn('number', 'MedianTemp');

           drawChart();


           function drawChart() {
               $.get('JsonData', function (d) {

                 //How to use the Json object here and populate the 
                 // google.visualization.DataTable();

                   chart.draw(data, option);
               });

           }
       }
   </script>
}

Json String :

[  
   {  
      "time":"2019-04-05T01:31:18",
      "tempMax":null,
      "tempMin":0.994149582975367,
      "tempMedian":null
   },
   {  
      "time":"2019-04-05T01:47:19",
      "tempMax":null,
      "tempMin":0.911886229190676,
      "tempMedian":null
   },
   {  
      "time":"2019-04-05T01:47:25",
      "tempMax":null,
      "tempMin":0.942482640991897,
      "tempMedian":null
   },
   {  
      "time":"2019-04-05T01:47:30",
      "tempMax":null,
      "tempMin":0.863435650814746,
      "tempMedian":null
   },
   {  
      "time":"2019-04-05T01:47:35",
      "tempMax":null,
      "tempMin":0.987739249178772,
      "tempMedian":null
   }
]

Thank you

Answer 1

you can use data table method addRow ...

$.get('JsonData', function (d) {
  $.each(d, function (index, row) {
    data.addRow([
      new Date(row.time),
      row.tempMax,
      row.tempMin,
      row.tempMedian
    ]);
  });
});

see following working snippet...

 google.charts.load('current', { packages: ['corechart'] }).then(function () { var option = { title: "TemperatureChart", width: 900, height: 650, legend: { position: 'none' }, vAxis: { viewWindow: { min: -1, max: 11 }, baselineColor: 'transparent' }, chartArea: { height: '80%', width: '85%', left: 100, backgroundColor: { stroke: "gray", strokeWidth: 1 } }, pointSize: 10 }; var chart = new google.visualization.LineChart(document.getElementById('chart1')); var data = new google.visualization.DataTable(); data.addColumn('datetime', 'time'); data.addColumn('number', 'MaxTemp'); data.addColumn('number', 'MinTemp'); data.addColumn('number', 'MedianTemp'); drawChart(); function drawChart() { //$.get('JsonData', function (d) { var d = [ { "time":"2019-04-05T01:31:18", "tempMax":null, "tempMin":0.994149582975367, "tempMedian":null }, { "time":"2019-04-05T01:47:19", "tempMax":null, "tempMin":0.911886229190676, "tempMedian":null }, { "time":"2019-04-05T01:47:25", "tempMax":null, "tempMin":0.942482640991897, "tempMedian":null }, { "time":"2019-04-05T01:47:30", "tempMax":null, "tempMin":0.863435650814746, "tempMedian":null }, { "time":"2019-04-05T01:47:35", "tempMax":null, "tempMin":0.987739249178772, "tempMedian":null } ]; $.each(d, function (index, row) { data.addRow([ new Date(row.time), row.tempMax, row.tempMin, row.tempMedian ]); }); chart.draw(data, option); //}); } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart1"></div>