動態JavaScript的C＃谷歌圖表

Question

我想顯示一個谷歌圖表動態數據時，我的網頁加載。澄清我使用webMatrix（asp.net，c＃，sql db）。

我有c＃codebehind，它每5分鐘查詢我的主數據庫並將數據存儲在服務器數據庫「目標」中。

我的目標是使用「目標」作爲谷歌圖表的數據源。我非常困惑的谷歌圖表文檔，因爲所有的例子都顯示JavaScript代碼與硬編碼數據。我如何操作JavaScript以便它包含我的動態數據？

 <script> 
     function initialize() { 
      var db = 'Target' 
      var query = new google.visualization.Query(db); 

      query.setQuery('select Problem group by Queue'); 

      query.send(handleQueryResponse); 
     } 

     function handleQueryResponse(response) { 

      if (response.isError()) { 
      alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); 
      return; 
      } 

      var data = response.getDataTable(); 
      var chart = new google.visualization.PieChart(document.getElementById('chart')); 
      chart.draw(data, {width: 400, height: 240, is3D: true}); 
     } 

    </script> 

Answer 1

我能弄清楚這一個...

我並沒有意識到，剃刀語法允許一個腳本中的代碼隱藏變量。

C＃

{ 
int a = 100; 
int b = 350; 
} 

的Javascript

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

    dataArray = []; 



    dataArray[0] = ['0', 'Title1', 'Title2']; 
    dataArray[1] = ['Element 1', @a, 0]; 
    dataArray[2] = ['Element 2', 0, @b]; 

    function drawChart() { 


     //var dt = new google.visualization.DataTable(); 
     //dt.addRows(data); 
     var data = google.visualization.arrayToDataTable(dataArray); 

     var options = { 
      title: 'Tickets', 
      vAxis: { titleTextStyle: { color: 'red'} }, 
      backgroundColor: 'lightgray' 

     }; 

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