CODEWITHSUNDEEP
javascriptasp.net-mvcgoogle-visualization
The OrangeGoblin
The OrangeGoblin

Reputation: 794

Google line charts doesn't show data

I have the following code that gives me a JSON output as follows:

[{ReadingDate: "2018-09-14 00:00:00", ReadingValues: "17796"}
{ReadingDate: "2018-09-13 23:45:00", ReadingValues: "17793"}
{ReadingDate: "2018-09-13 23:30:00", ReadingValues: "17791"}
{ReadingDate: "2018-09-13 23:15:00", ReadingValues: "17789"}
{ReadingDate: "2018-09-13 23:00:00", ReadingValues: "17786"}
{ReadingDate: "2018-09-13 22:45:00", ReadingValues: "17783"}
{ReadingDate: "2018-09-13 22:30:00", ReadingValues: "17781"}
{ReadingDate: "2018-09-13 22:15:00", ReadingValues: "17778"}
{ReadingDate: "2018-09-13 22:00:00", ReadingValues: "17776"}]

I have tested that the output from my action is being transmitted and received by the page and I am happy that it is. However, I cannot get it to draw the line chart with data in it.

My chart code is as follows: 

google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawLineChart);

function drawLineChart() {

var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');        
data.addColumn('number', 'Value');       

var options = {
    'legend': {
        'position': 'none'
    },
    'chartArea': {
        'width': '80%',
        'height': '80%'
    },
    title: 'Data'
};

$.ajax({
    url: '@Url.Action("GetChartData", "CheckData")',
    datatype: 'json',
    type: 'post',
    async: false,
    contentType: 'application/json; charset=utf-8',
    success: function (d) {  
        $.each(d, function (index, item) {  
            //data.addRows([[item.ReadingDate], [item.ReadingValues]]); 
            //data.addRows([item.ReadingDate], [item.ReadingValues]);                     
            data.addRows([item.ReadingDate, item.ReadingValues]);
        });
    },
    error: function () {
        alert("Error loading chart data.")
    }
});

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

}

I want to plot the chart with the X-axis as the Date and the Y-axis as the value.

Upvotes: 1

Views: 57

Answers (1)

Pawnesh Kumar
Pawnesh Kumar

Reputation: 494

First put below line before $ajax call

var chart = new google.visualization.LineChart(document.getElementById('linechart_div'));

then replace the success code with

$.each(d, function (index, item) {  
   data.addRow([new Date(item.ReadingDate), parseInt(item.ReadingValues)]);
});
chart.draw(data, options);

Your code had three issues,

  1. You have to pass a multidimensional array if you use data.addRows otherwise use data.addRow
  2. You define the data type as date and number but pass date as string and figure as a string. Which handle by conversion.
  3. You called the chart.draw just after initiating the ajax call. As ajax calls are asynchronous, google chart never receives any data object. TO fix that put the draw chart code in success function.

Upvotes: 2

Related Questions