ChartWrapper rendering same output for all graphs

Question

Using Google Charts, I'm trying to draw 2 charts on a dashboard based on the ChartWrapper library. I'm binding a slider to the two charts for which I set up a ControlWrapper. As you can see I'm using 2 different datatables, with the same columns in it. The issue I'm facing is that two times the same chart is rendered, i.e. the distance chart. Why is this happening and how can I remediate this? Thanks!

Here's the code for the same:

// Instantiate and draw our Heartrate chart, passing in some options.
  heartrateChart = new google.visualization.ChartWrapper({
    'chartType': 'ColumnChart',
    'containerId': 'heartrate_container',
    'options': {
        'width': width,
        'height': height
    }
});

    dashboard.bind(dateRangeSlider, heartrateChart);

    dashboard.draw(HRdata);


  // Instantiate and draw our Distance chart, passing in some options.
  distanceChart = new google.visualization.ChartWrapper({
    'chartType': 'ColumnChart',
    'containerId': 'distance_container',
    'options': {
        'width': width,
        'height': height
    }
}); 

    dashboard.bind(dateRangeSlider, distanceChart);

dashboard.draw(Distancedata);

asgallant asgallant · Accepted Answer · 2014-03-03T16:39:10

Dashboards can bind only a single set of data to a set of charts and controls. You code binds dateRangeSlider to heartrateChart and draws them with HRdata, then binds dateRangeSlider to distanceChart and draws both charts with Distancedata. If you want to use two separate DataTables, you need to either have two Dashboards (with unique controls for each Dashboard), or you need to use a bit of trickery to effectively have the filter work on two data sets. The latter is probably what you would prefer (if I understand your intentions correctly), so I'll show you how to do that:

heartrateChart = new google.visualization.ChartWrapper({
    'chartType': 'ColumnChart',
    'containerId': 'heartrate_container',
    'options': {
        'width': width,
        'height': height
    }
});

// Instantiate and draw our Distance chart, passing in some options.
distanceChart = new google.visualization.ChartWrapper({
    'chartType': 'ColumnChart',
    'containerId': 'distance_container',
    'options': {
        'width': width,
        'height': height
    }
});

google.visualization.events.addListener(heartrateChart, 'ready', function () {
    var state = dateRangeSlider.getState();

    // this assumes you are filtering column 0 in the DataTable
    // and that "dateRangeSlider" is a DateRangeFilter control
    var view = new google.visualization.DataView(Distancedata);
    view.setRows(Distancedata.getFilteredRows([{
        column: 0,
        minValue: state.minValue,
        maxValue: state.maxValue
    }]));
    distanceChart.setDataTable(view);
    distanceChart.draw();
});

dashboard.bind(dateRangeSlider, heartrateChart);
dashboard.draw(HRdata);

ChartWrapper rendering same output for all graphs

1 Answers