Home/ Questions/Q 8564981
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T17:19:08+00:00

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

  • 0

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
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0