Google 차트 : 동적 데이터

Question

하드 코딩 번호를 VB.Net 3.5 웹 앱의 코드에서 계산 된 숫자로 대체하고 싶습니다. 즉, 아래의 숫자 20, 13 및 34입니다. 귀하의 도움에 미리 감사드립니다. (등, MVC를 사용하는 경우 또는 모델의 일부)

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

Answer 1

이 단지 3 개 개의 숫자를 제공하는 것보다 더 일반적인 할 필요가 가정, 당신은 뒤에 코드에서 JSONArray 변수를 만들 수 있습니다. 뒤에

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

코드에서 당신은 구축 할 위치를 문자열 JSON을 어떤 계산에서 당신이하고있는 :

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 

Answer 2

을 대신의 조작 여기에 당신이 가야한다 단순한 샘플입니다 문자열을 코드에 직접 입력하면 Google.com/DataTable.Net.Wrapper 라이브러리를 사용하여 편리하게 유형이 안전한 방식으로 편리한 JSON 문자열을 만들 수 있습니다. 여기

당신이 광범위한 예를 찾을 수 있습니다로 http://www.agile-code.com/blog/using-the-google-datatable-net-wrapper/

코드는 간단하다

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(); 
} 

같은 JSON 표현 당신에게

{ 
"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}]} 
     ] 
} 

을 반환하는 그 다음 당신 자바 스크립트에 직접 포함시킬 수 있습니다.

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