CODEWITHSUNDEEP
vb.net
user1422570
user1422570

Reputation: 33

Google Charts: Dynamic Data

I would like to replace the hard-coded numbers with numbers calculated in the code behind of my VB.Net 3.5 web app. In other words, the numbers 20, 13 and 34 below. Thanks in advance for your help.

<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Tiers', 'Apps'],
      ['Tier 1', 20],
      ['Tier 1.5', 13],
      ['Tier 2', 34]
    ]);

    var options = {
      title: 'Balance'
    };

    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
</script>

Upvotes: 1

Views: 2484

Answers (2)

zoranmax
zoranmax

Reputation: 79

Instead of manipulating the string directly in your code, you could use the Google.DataTable.Net.Wrapper library that would create a handy JSON string for you in a compleletely type safe way.

Here you may find an extensive example: http://www.agile-code.com/blog/using-the-google-datatable-net-wrapper/

The code is as easy as:

using Google.DataTable.Net.Wrapper;
private static string GetDataTableJson()
{
    var dt = new DataTable();

    //Act -----------------
    dt.AddColumn(new Column(ColumnType.Number, "Tiers"));
    dt.AddColumn(new Column(ColumnType.String, "Apps"));

    var row1 = dt.NewRow();
    var row2 = dt.NewRow();
    var row3 = dt.NewRow();


    row1.AddCellRange(new[] { new Cell("Tier 1"),   new Cell(20) });
    row2.AddCellRange(new[] { new Cell("Tier 1.5"), new Cell(13) });
    row3.AddCellRange(new[] { new Cell("Tier 2"),   new Cell(34) });


    dt.AddRow(row1);
    dt.AddRow(row2);
    dt.AddRow(row3);

    return dt.GetJson();
}

which would return you such a JSON representation

{
"cols": [
            {"type": "string" ,"id": "Tiers" }, 
            {"type": "number" ,"id": "Apps" }
        ],
"rows" : 
        [
            {"c" : [{"v": "Tier 1"},   {"v": 20}]}, 
            {"c" : [{"v": "Tier 1.5"}, {"v": 13}]}, 
            {"c" : [{"v": "Tier 2"},   {"v": 34}]}
        ]
}

that you then you may embed directly in your javascript

// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(jsonData);

Upvotes: 0

Jim O&#39;Neil
Jim O&#39;Neil

Reputation: 23784

Assuming this needs to be more general than just providing 3 numbers, you can create a JSONArray variable in your code behind (or part of your Model if using MVC, etc.). Here's a simplistic sample that should get you going:

<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([ <%= JSONArray %> ]);
  ...

In your code behind, where you'd build up the string JSON from whatever calculations you're doing: 

Public Class WebForm1
    Inherits System.Web.UI.Page

    Protected JSONArray As String

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        JSONArray = "" + _
              "['Tiers', 'Apps'], " + _
              "['Tier 1', 20], " + _
              "['Tier 1.5', 13], " + _
              "['Tier 2', 34]"

    End Sub

End Class

Upvotes: 2

Related Questions