CODEWITHSUNDEEP
javascriptgoogle-app-enginechartsgoogle-apigoogle-visualization
nilesguo
nilesguo

Reputation: 162

One or more participants failed to draw() with google dashboard

I tried to implement a google dashboard prototype with a category picker and a pie chart, while displaying the datatable. However, even while following the sample code from the documentation (https://developers.google.com/chart/interactive/docs/gallery/controls#5-create-control-and-chart-instances), I still run into issues with an error message of: "One or more participants failed to draw()".

I can't seem to figure what the issue is with my Javascript, and would appreciate any help! 

google.charts.load('current', {packages: ['corechart', 'table', 'controls', 'gauge']});
google.charts.setOnLoadCallback(drawDashboard);

function drawDashboard(){

var data = google.visualization.arrayToDataTable([
    ['Category', 'Objective', 'Cost'],
    ['Freshwater Withdraw Cost', 'Financial Cost', 4.2],
    ['Storage Cost', 'Financial Cost', 4.3],
    ['Onsite Treatment Cost', 'Financial Cost', 13.9],
    ['Disposal Cost', 'Financial Cost', 0.06],
    ['Piping Cost', 'Financial Cost', 6.9],
    ['Trucking Cost', 'Financial Cost', 5.5],
    ['NH3 Cost', 'Environmental Cost', 1.3],
    ['NOX Cost', 'Environmental Cost', 1.2],
    ['PM25 Cost', 'Environmental Cost', 2.1]
]);

var table = new google.visualization.ChartWrapper({
    'chartType': 'Table',
    'containerId': 'table_div',
    'options': {

    }
});

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

var pieCategoryFilter = new google.visualization.ControlWrapper({
    'controlType': 'CategoryFilter',
    'containerID': 'programmatic_control_div',
    'options': {
        'filterColumnLabel': 'Objective',
        'allowTyping': false,
        'allowMultiple': false
    }
});

var pieChart = new google.visualization.ChartWrapper({
    'chartType': 'PieChart',
    'containerID': 'chart_div',
    'options': {
        'width': 300,
        'height': 300,
        'title': 'Total Cost Breakdown'
    }
});

dashboard.bind(pieCategoryFilter, [pieChart, table]);
dashboard.draw(data);
}

And my html:

<div id="dashboard_div" style="border: 1px solid #ccc; margin-top: 1em">
<p style="padding-left: 1em"><strong>Total Cost Breakdown</strong></p>
<table class="columns">
<tr>
    <td>
    <div id="programmatic_control_div"></div>
    </td></tr>
<tr>
    <td>
    <div id="chart_div" style="padding-top: 15px"></div>
    </td>
    <td>
    <div id="table_div" style="padding-top: 30px"></div>
    </td></tr></table>
</div>

Upvotes: 2

Views: 939

Answers (1)

WhiteHat
WhiteHat

Reputation: 61232

a couple issues...

1) wrapper property names are case sensitive

for both pieCategoryFilter & pieChart the conatiner id property is wrong,
it should not have a capital D at the end...

bad --> containerID

good --> containerId

2) each chart type has a specific data format

for PieChart the data should have two columns --> 'string', 'number'
the data table in the example has three columns --> 'string', 'string', 'number'

you can use a view on the wrapper to select certain columns from the data table 

var pieChart = new google.visualization.ChartWrapper({
    'chartType': 'PieChart',
    'containerId': 'chart_div',
    'options': {
        'width': 300,
        'height': 300,
        'title': 'Total Cost Breakdown'
    },
    'view': {
      columns: [0, 2]  // <-- set view for first and last columns from data
    }
});

see following working snippet... 

google.charts.load('current', {packages: ['corechart', 'table', 'controls', 'gauge']});
google.charts.setOnLoadCallback(drawDashboard);

function drawDashboard(){
  var data = google.visualization.arrayToDataTable([
      ['Category', 'Objective', 'Cost'],
      ['Freshwater Withdraw Cost', 'Financial Cost', 4.2],
      ['Storage Cost', 'Financial Cost', 4.3],
      ['Onsite Treatment Cost', 'Financial Cost', 13.9],
      ['Disposal Cost', 'Financial Cost', 0.06],
      ['Piping Cost', 'Financial Cost', 6.9],
      ['Trucking Cost', 'Financial Cost', 5.5],
      ['NH3 Cost', 'Environmental Cost', 1.3],
      ['NOX Cost', 'Environmental Cost', 1.2],
      ['PM25 Cost', 'Environmental Cost', 2.1]
  ]);

  var table = new google.visualization.ChartWrapper({
      'chartType': 'Table',
      'containerId': 'table_div',
      'options': {

      }
  });

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

  var pieCategoryFilter = new google.visualization.ControlWrapper({
      'controlType': 'CategoryFilter',
      'containerId': 'programmatic_control_div',
      'options': {
          'filterColumnLabel': 'Objective',
          'allowTyping': false,
          'allowMultiple': false
      }
  });

  var pieChart = new google.visualization.ChartWrapper({
      'chartType': 'PieChart',
      'containerId': 'chart_div',
      'options': {
          'width': 300,
          'height': 300,
          'title': 'Total Cost Breakdown'
      },
      'view': {
        columns: [0, 2]
      }
  });

  dashboard.bind(pieCategoryFilter, [pieChart, table]);
  dashboard.draw(data);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard_div" style="border: 1px solid #ccc; margin-top: 1em">
  <p style="padding-left: 1em"><strong>Total Cost Breakdown</strong></p>
  <table class="columns">
    <tr>
      <td>
        <div id="programmatic_control_div"></div>
      </td>
    </tr>
    <tr>
      <td>
        <div id="chart_div" style="padding-top: 15px"></div>
      </td>
      <td>
        <div id="table_div" style="padding-top: 30px"></div>
      </td>
    </tr>
  </table>
</div>

Upvotes: 1

Related Questions