[SOLVED] Dashboard with selectable Google chart type

Dashboard with selectable Google chart type

I am not familiar with google charts, so excuse me if this question is somehow too broad or senseless.

I am wondering how it is possible to create a google charts dashboard with the chart type selectable from a list of possible charts. For the same set of data, all the applicable chart types should be shown and the user selects the one he wants. Afterward, the data are automatically rendered according to the the chart selected.

For example, check Visualizing SPARQL query results in GraphDB, the results of any query could be visualized using a set of corresponding google charts that could be selected and even configured. To try it, on the top right corner of the query edit pane, there is a folder icon where you can select a saved query and then at the bottom of the pane select google charts and configure then render the results.

Is this a component that already exists and I can use? Any suggestions?

Solution

you can use the ChartWrapper class from the 'controls' package

it has a property for chartType...

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

see following working snippet, the chart type is changed by the <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>