X軸としてDatatable列を持つAsp.net棒グラフ

Question

私はASP.netのチャートオブジェクトで非常に新しいです。私は、SQLデータベースから質問された単一の行の列を持っています。

+-------+-------+-------+-------+-------+-------+-------+-------+-------+-------+ 
| CPass | CFail | WPass | WFail | SPass | SFail | HPass | HFail | APass | AFail | 
+-------+-------+-------+-------+-------+-------+-------+-------+-------+-------+ 
|  3 |  0 |  0 |  0 |  3 |  0 |  5 |  2 |  0 |  0 | 
+-------+-------+-------+-------+-------+-------+-------+-------+-------+-------+ 

棒グラフに設定されたASP.netウェブページのチャートオブジェクトにアタッチしたいと思います。列ヘッダーがXで値の単一行がYになるように系列を設定するには？

私はこれが簡単だと思うが、これまでのところGoogleが私を失望させてしまった。

Answer 1

あなたはここでGoogleのチャート（縦棒グラフ）

https://developers.google.com/chart/interactive/docs/gallery/columnchart

を使用できるサンプルコード

https://jsfiddle.net/L80x1e0t/

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
<script type="text/javascript"> 
google.charts.load('current', {packages: ['corechart', 'bar']}); 
google.charts.setOnLoadCallback(drawStacked); 

function drawStacked() { 
     var data = new google.visualization.DataTable(); 
     data.addColumn('string', 'Score'); 
     data.addColumn('number', 'Frequency'); 


     data.addRows([ 
     ['CPass ', 3], 
     ['CFail ', 3], 
     ['WPass ', 0], 
     ['WFail ', 0], 
     ['HPass ', 5], 
     ['HFail ', 2], 
     ['APass ', 0], 
     ['AFail ', 0] 

     ]); 

     var options = { 
     title: 'Scoring system', 
     isStacked: true, 
     hAxis: { 
      title: 'Score', 

     }, 
     vAxis: { 
      title: 'Frequency' 
     } 
     }; 

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

のフィドルです