Creating Google Chart in ASP.NET MVC

Question

I was reading this http://blog.platformular.com/2012/03/20/load-google-chart-by-ajax-using-asp-net-mvc-and-jquery/ and this https://google-developers.appspot.com/chart/interactive/docs/gallery/areachart.

How can I create an array like this in VB.NET?

    var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales', 'Expenses'],
      ['2004',  1000,      400],
      ['2005',  1170,      460],
      ['2006',  660,       1120],
      ['2007',  1030,      540]
    ]);

I need to create it from a query, not from static data like in the article I linked to above:

Dim water = db.Tbl_Hydrations.Where(Function(x) x.Hyd_Create_Date >= firstDay And x.Hyd_Create_Date <= lastDay).ToList

If I can create the array, I can display the data in the chart. Thanks for your help.

Edit:

I tried this:

Function WeightAreaChartData() As JsonResult

    Dim data = New Dictionary(Of String, Object)

    data.Add("1", New With {.Name = "China", .Value = "11"})
    data.Add("2", New With {.Name = "China", .Value = "11"})

    Return Json(data, JsonRequestBehavior.AllowGet)

End Function

But, Google Charts says, "No Data."

The JSON it returns is:

{"1":{"Name":"China","Value":"11"},"2":{"Name":"China","Value":"11"}}

Final Edit:

This is the action I'm using:

<EmployeeAuthorize()>
Function WeightAreaChartData() As JsonResult

    Dim myData = db.Tbl_Weights.Where(Function(x) x.Weight_Employee_ID).OrderBy(Function(x) x.Weight_Create_Date)

    Dim data = New List(Of Object)

    data.Add(New Object() {"Date", "Your Weight"})

    For Each i As Tbl_Weight In myData

        data.Add(New Object() {DateTime.Parse(i.Weight_Create_Date).Day, i.Weight_Amount})

    Next

    Return Json(data, JsonRequestBehavior.AllowGet)

End Function

Can you add the json result that WeightAreaChartData returns? — Kaizen Programmer

Kaizen Programmer Kaizen Programmer · Accepted Answer · 2012-09-20T16:21:38

You can create this array:

[
   ['Year', 'Sales', 'Expenses'],
   ['2004',  1000,      400],
   ['2005',  1170,      460],
   ['2006',  660,       1120],
   ['2007',  1030,      540]
]

By using this JsonResult

Function WeightAreaChartData() As JsonResult
    Dim data = New Object() {
                   New Object() {"Year", "Sales", "Expenses"},
                   New Object() {"2004", 1000, 400},
                   New Object() {"2005", 1170, 460},
                   New Object() {"2006", 660, 1120},
                   New Object() {"2007", 1030, 540}
              }


    Return Json(data, JsonRequest.Behavior.AllowGet)
End Function

There's more to your question than this, I know. But this should point you in the right direction. Feel free to comment for more advice.

EDIT

Taking the example from you original post

You can rewrite it to use the JsonResult (change the /Controller/WeightAreaChartData to point to your JsonResult route)

<html>
  <head>
      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load("visualization", "1", { packages: ["corechart"] });
        google.setOnLoadCallback(drawChart);
        function drawChart() {
            $.post('/Controller/WeightAreaChartData', {},
                function (data) {
                    var tdata = new google.visualization.arrayToDataTable(data);

                    var options = {
                        title: 'Company Performance',
                        hAxis: { title: 'Year', titleTextStyle: { color: 'red' } }
                    };

                    var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
                    chart.draw(tdata, options);
                });
        }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Creating Google Chart in ASP.NET MVC

1 Answers