選択可能なGoogleグラフタイプのダッシュボード

Question

私はGoogleのチャートに精通していません。

私は可能なチャートのリストから選択可能なチャートタイプを使用してGoogleグラフダッシュボードを作成することができますか？同じデータセットについては、適用可能なすべてのチャートタイプを表示し、ユーザが希望するチャートタイプを選択する必要があります。その後、選択されたチャートに従ってデータが自動的にレンダリングされます。

たとえば、チェックVisualizing SPARQL query results in GraphDBを選択すると、選択して設定できる対応するGoogleグラフのセットを使用してクエリの結果を視覚化できます。これを試すには、クエリ編集ペインの右上に保存されたクエリを選択できるフォルダアイコンがあり、ペインの一番下にはGoogleグラフを選択して構成し、結果をレンダリングします。

これは既に存在するコンポーネントですか、使用できますか？助言がありますか？

Answer 1

あなたは

var chart = new google.visualization.ChartWrapper({ 
    chartType: 'BarChart', // <-- chart type property 
    containerId: 'chart', 
    dataTable: data, 
    options: { 
    height: 240, 
    theme: 'maximized' 
    } 
}); 

が作業スニペット以下を参照してください...それはchartTypeのプロパティを持ってい'controls'パッケージから

をChartWrapper classを使用することができ、グラフの種類は<select>

によって変更されます

google.charts.load('current', { 
 
    callback: drawChart, 
 
    packages: ['controls', 'corechart'] 
 
}); 
 

 
function drawChart() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ['x', 'y0'], 
 
    ['a', 898], 
 
    ['b', 37319], 
 
    ['c', 8980], 
 
    ['d', 35400] 
 
    ]); 
 

 
    var chartType = document.getElementById('chart-type'); 
 
    var chartWrapper = new google.visualization.ChartWrapper({ 
 
    chartType: chartType.value, 
 
    containerId: 'chart', 
 
    dataTable: data, 
 
    options: { 
 
     height: 240, 
 
     theme: 'maximized' 
 
    } 
 
    }); 
 
    chartType.addEventListener('change', drawChartWrapper, false); 
 
    drawChartWrapper(); 
 

 
    function drawChartWrapper() { 
 
    chartWrapper.setChartType(chartType.value); 
 
    chartWrapper.draw(); 
 
    } 
 
}

div { 
 
    padding: 6px; 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div> 
 
    <select id="chart-type"> 
 
    <option value="BarChart" selected>Bar</option> 
 
    <option value="ColumnChart">Column</option> 
 
    <option value="LineChart">Line</option> 
 
    <option value="PieChart">Pie</option> 
 
    </select> 
 
</div> 
 
<div id="chart"></div>