Data not loading on Line Chart - using ASP.NET MVC and jQuery AJAX.

[chrismar...@gmail.com]

I'm using ASP.NET MVC and Google Charts to try and generate a simple line graph with two data records. I'm pulling the data successfully from the database, but the data isn't appearing on my chart. The data consists of two records with two fields: WeekOfEntry(DateTime) and Weight (decimal). The chart appears, but the data points aren't there. I'm guessing my data is formatted improperly?

Here's my javascript:

<script type="text/javascript">

        

        //Load the Visualization API library and the linechart library.

        google.load('visualization', '1.0', { 'packages': ['corechart'] });

        //Set a callback to run when the Google Visualization API is loaded.

        google.setOnLoadCallback(drawLoseATonLineChart);

        //Callback that creates and populates a data table, instantiates the line chart,

        //passes in the data, and draws it.

        function drawLoseATonLineChart() {

            var url = "@Url.Action("GetChartStatistics")";

            var jsonData = $.ajax({

                method: 'GET',

                url: url,

                dataType: 'JSON',

                async: false

            }).responseText;

            var data = new google.visualization.DataTable();

            data.addColumn('string', 'WeekOfEntry');

            data.addColumn('number', 'Weight');

            for (var i = 0; i < data.length; i++) {

                data.addRow([jsonData[i].WeekOfEntry, jsonData[i].Weight]);

            }

            var options = {

                title: 'Weight Progression',

                legend: {

                    position: 'right',

                    alignment: 'center'

                },

                vAxis: {

                    title: 'Weight'

                },

                hAxis: {

                    title: 'Week',

                    slantedText: true,

                    slantedTextAngle: 45

                },

                colors: ['E81A00']

            };

            var chart = new google.visualization.LineChart(document.getElementById('lose-a-ton-line-chart'));

            chart.draw(data, options);

        }

    </script>

Here's part of my `GetChartStatistics()` method:

var lineChartData = (from a in db.Associates

                join aw in db.AssociateWeights

                    on a.RegistrationId equals aw.RegistrationId

                where a.EventId == eventId &&

                      a.Username == currentuser

                select new LineChartData

                {

                    Weight = aw.Weight,

                    WeekOfEntry = aw.WeekOfEntry

                });

    return Json(lineChartData, JsonRequestBehavior.AllowGet);

Here's how my JSON data is formatted when it gets returned:

`"[{"Weight":190.0,"WeekOfEntry":"\/Date(1431921600000)\/"},{"Weight":121.0,"WeekOfEntry":"\/Date(1432526400000)\/"}]"`

[Daniel Buttery]

Hey.

First thing I always try if I come across issues like this is to add a chart of type Table to the page, as you can then verify easily exactly the type of data the chart has in case something odd is happening. So at the bottom of your code, add:

var tableOptions={};
var dataTable = new google.visualization.LineChart(document.getElementById('test-table'));

dataTable.draw(data, tableOptions);

Its also possible that your date string isn't being interpreted correctly - you have WeekOfEntry set as a String type but your JSON looks like a date. I normally reconstruct dates when importing just to be sure (especially as I'm in the UK so I can guard against the day/month format flip. See https://developers.google.com/chart/interactive/docs/datesandtimes for some examples. 

[Daniel LaLiberte]

Daniel,

Your suggestion of drawing a Table chart is a good one.  But in your example, you forgot to change "LineChart" to "Table", and it would probably be better to rename your "dataTable" variable as "tableChart" to avoid confusion with DataTables.  Another thing to keep in mind is that when you call google.load(), you should also include the "table" package.

The Table chart is documented here: https://developers.google.com/chart/interactive/docs/gallery/table

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte  - 978-394-1058

dlaliberte@Google.com   5CC, Cambridge MA

daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA

[Daniel Buttery]

Very true sir - the coffee obviously hadn't really set in yet. ;)