GoogleCharts Bar Chart

Bar Chart with filters

by tototatutu

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>
      Dashboard Test
    </title>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1.0', {packages: ['controls']});
    </script>
    <script type="text/javascript">
      function drawVisualization() {

        // Prepare the data
        var data = google.visualization.arrayToDataTable([
          ['KPI', 'Peer Group', 'Products', 'Amount', { role: 'style' }],
          ['KPI 1', 'EMEA', 'Product A', 4, '#003E7D'],
          ['KPI 1', 'EMEA', 'Product B', 6, '#003E7D'],
          ['KPI 1', 'EMEA', 'Product C', 2, '#F46B1B'],
          ['KPI 1', 'Americas', 'Product A', 3, '#003E7D'],
          ['KPI 1', 'Americas', 'Product B', 8, '#003E7D'],
          ['KPI 1', 'Americas', 'Product C', 7, '#F46B1B'],
          ['KPI 2', 'EMEA', 'Product A', 9, '#003E7D'],
          ['KPI 2', 'EMEA', 'Product B', 1, '#003E7D'],
          ['KPI 2', 'EMEA', 'Product C', 4, '#F46B1B'],
          ['KPI 2', 'Americas', 'Product A', 4, '#003E7D'],
          ['KPI 2', 'Americas', 'Product B', 6, '#003E7D'],
          ['KPI 2', 'Americas', 'Product C', 7, '#F46B1B']
        ]);

        // Define category pickers for 'KPI', 'Peer Group'
        var kpiPicker = new google.visualization.ControlWrapper({
          controlType: 'CategoryFilter',
          containerId: 'control1',
          options: {
            filterColumnLabel: 'KPI',
            ui: {
              labelStacking: 'vertical',
              allowTyping: false,
              allowMultiple: false,
              caption: 'Choose KPI',
              sortValues: true,
              allowNone: false
          }}
        });

        var regionPicker = new...