Google Chart dashboard multiple data

Question

I created a google chart dashboard with different data for each donut chart but only data_2 returns, instead of data_1 for the first chart <div> and data_2 for the second chart <div>. Source document for multi chart w/ different data requires separate functions, but is there a way to use two datasets in the first function drawStuff_1?
I ultimately want one dashboard, one ControlWrapper (one-to-many), multiple data sets (carlos, josh, etc.) and multiple donut charts (<div> for carlos, <div> for josh, whoever else).

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

      function drawStuff_1() {

        var dashboard = new google.visualization.Dashboard(
          document.getElementById('programmatic_dashboard_div'));
          
        programmaticFilter_1 = new google.visualization.ControlWrapper({
          'controlType': 'CategoryFilter',
          'containerId': 'programmatic_control_div_1',
          'options': {
            'filterColumnLabel': 'Status',
            'ui': {'labelStacking': 'vertical'}
          }
        });
    // First dataset
       var data_1 = new google.visualization.arrayToDataTable([
        ['Status', 'Count'],
        ['Dual Approved' , 5],
        ['Approved', 7],
        ['Review', 3],
        ['Draft', 2],
        ['Not In', 6],
        ['Edit Rerun', 1],
        ]);
       programmaticChart_1  = new google.visualization.ChartWrapper({
        'chartType': 'PieChart',
        'containerId': 'programmatic_chart_div_1',
        'options': {
          'width': 290,
          'height': 220,
          'chartArea': {'left': 20, 'top': 20, 'right': 0, 'bottom': 0},
          'pieSliceText': 'value', //percentage' 'value' 'label''none'
          'pieHole': 0.4,
          'legend': {position: 'left', textStyle: {color: 'black', fontSize: 9, fontName: 'Garamond' }},
          'pieSliceBorderColor': 'Black',
          'title': 'Josh',
          
        }
      });

      dashboard.bind(programmaticFilter_1, programmaticChart_1);
      dashboard.draw(data_1);

    }
    
   function drawStuff_2() {

        var dashboard = new google.visualization.Dashboard(
          document.getElementById('programmatic_dashboard_div'));
          
// second dataset      
           var data_2 = new google.visualization.arrayToDataTable([
        ['Status', 'Count'],
        ['Dual Approved' , 1],
        ['Approved', 10],
        ['Review', 2],
        ['Draft', 9],
        ['Not In', 10],
        ['Edit Rerun', 4],
        ]);
        
       programmaticChart_2  = new google.visualization.ChartWrapper({
        'chartType': 'PieChart',
        'containerId': 'programmatic_chart_div_2',
        'options': {
          'width': 250,
          'height': 220,
          'legend': 'none',
          'chartArea': {'left': 20, 'top': 20, 'right': 0, 'bottom': 0},
          'pieSliceText': 'value', //percentage' 'value' 'label''none'
          'pieHole': 0.4,
          'pieSliceBorderColor': 'Black',
          'title': 'Carlos',
        }
      });

      dashboard.bind(programmaticFilter_1, programmaticChart_2);
      dashboard.draw(data_2);
}
    </script>
 
  <body>
    <div id="programmatic_dashboard_div" style="border: 1px solid #ccc">
                <td>
            <div id="programmatic_control_div_1" style="padding-left: 2em; min-width: 250px"></div>
          </td>
      <table class="columns">
        <tr>
          <td>
            <div id="programmatic_chart_div_1"></div>
          </td>
          <td>
            <div id="programmatic_chart_div_2"></div>
          </td>
        </tr>
      </table>
    </div>
  </body>

score 4 · Accepted Answer · answered Sep 05 '16 at 02:07

first, setOnLoadCallback should only be used once per page

but it's an easy work around, and you can include the callback directly in the load statement

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

next, you can only have one dataset per Dashboard

however, you can use the view property on the ChartWrapper
to control which columns, or rows, apply to the chart

the view property is also available on the ControlWrapper

see following working snippet, which includes one dashboard, one control,
and two charts (one for each Carlos and Josh)

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

function drawStuff() {
  var dashboard = new google.visualization.Dashboard(
    document.getElementById('dashboard_div')
  );

  // Combined dataset
  var data = new google.visualization.arrayToDataTable([
    ['Status', 'Carlos', 'Josh'],
    ['Dual Approved', 5, 1],
    ['Approved', 7, 10],
    ['Review', 3, 2],
    ['Draft', 2, 9],
    ['Not In', 6, 10],
    ['Edit Rerun', 1, 3]
  ]);

  var programmaticFilter = new google.visualization.ControlWrapper({
    controlType: 'CategoryFilter',
    containerId: 'control_div',
    options: {
      filterColumnLabel: 'Status',
      ui: {
        labelStacking: 'vertical'
      }
    }
  });

  var programmaticChart_Carlos = new google.visualization.ChartWrapper({
    chartType: 'PieChart',
    containerId: 'chart_div_Carlos',
    options: {
      width: 290,
      height: 220,
      chartArea: {'left': 20, 'top': 20, 'right': 0, 'bottom': 0},
      pieSliceText: 'value',
      pieHole: 0.4,
      legend: {position: 'left', textStyle: {color: 'black', fontSize: 9, fontName: 'Garamond' }},
      pieSliceBorderColor: 'Black'
    },
    view: {
      columns: [0, 1]
    }
  });
  programmaticChart_Carlos.setOption('title', 'Carlos');

  var programmaticChart_Josh = new google.visualization.ChartWrapper({
    chartType: 'PieChart',
    containerId: 'chart_div_Josh',
    options: {
      width: 290,
      height: 220,
      chartArea: {'left': 20, 'top': 20, 'right': 0, 'bottom': 0},
      pieSliceText: 'value',
      pieHole: 0.4,
      legend: {position: 'left', textStyle: {color: 'black', fontSize: 9, fontName: 'Garamond' }},
      pieSliceBorderColor: 'Black'
    },
    view: {
      columns: [0, 2]
    }
  });
  programmaticChart_Josh.setOption('title', 'Josh');

  dashboard.bind(
    programmaticFilter,
    [programmaticChart_Carlos, programmaticChart_Josh]
  );
  dashboard.draw(data);
}

.ggl-dashboard {
  border: 1px solid #ccc;
}

.ggl-control (
  min-width: 250px;
  padding-left: 2em;
)

.ggl-chart (
  display: inline-block;
)

<script src="https://www.gstatic.com/charts/loader.js"></script>

<div class="ggl-dashboard" id="dashboard_div">
  <div class="ggl-control" id="control_div"></div>
  <div class="ggl-chart" id="chart_div_Carlos"></div>
  <div class="ggl-chart" id="chart_div_Josh"></div>
</div>

Ah, yes I considered combining datasets but was too stubborn thinking there was a way, lol. Thank you WhiteHat, very helpful! — Omar V., Sep 05 '16 at 14:54
Thank you so much, this view columns option was exactly what i was looking for but having great trouble finding that existed... google docs not the best — Hayden Thring, Sep 28 '18 at 08:08

Google Chart dashboard multiple data

1 Answers1

Linked