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, Commented Sep 20, 2012 at 15:59

Kaizen Programmer · Accepted Answer · 2012-09-20 17:07:22Z

3

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>

edited Sep 20, 2012 at 17:07

answered Sep 20, 2012 at 16:21

Kaizen Programmer

3,8181 gold badge16 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user1477388 Over a year ago

Thanks that does answer my question and I do have more questions. For instance, how can I use JSON to get it into the Google Chart? This page has JSON in a specific format (at the bottom) google-developers.appspot.com/chart/interactive/docs/…

user1477388 Over a year ago

This is the actual param list, I think I have to build an object that will create json like this google-developers.appspot.com/chart/interactive/docs/…. Then I have to try to make the object get created dynamically from my database using a query.

Kaizen Programmer Over a year ago

There are numerous ways to achieve your goal. Based upon what we've already done, I'd use the arrayToDataTable function as shown in the edit.

user1477388 Over a year ago

Michael, thank you so much! This puts me closer. Now, I just have to be able to get the data from a query. I think I just have to make my query and then loop through and create objects for each row.

Kaizen Programmer Over a year ago

That's the way I'd go about it.

|

Collectives™ on Stack Overflow

Creating Google Chart in ASP.NET MVC

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related