Chart Range Filter for Google Charts LineChart

Question

I am using Google Charts Line Charts, I am having some trouble binding it to a Chart Range Filter.

Here is what I have tried: The containers:

<div id="dashboard_div">
                <!--Divs that will hold each control and chart-->
                <div id="control_div" style="width: 100%; height: 100%"></div>
                <div id="daily_container_count_lineChart" style="width: 100%; height: 100%"></div>
            </div>

The JS part:

var chart = new google.visualization.ChartWrapper({
    chartType: 'LineChart',
    containerId: 'daily_container_count_lineChart',
    options: {
        theme: 'maximized'
    }
});

var control = new google.visualization.ControlWrapper({
    controlType: 'ChartRangeFilter',
    containerId: 'control_div',
    options: {
        filterColumnIndex: 0
    }
});

var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
dashboard.bind([control], [chart]);
dashboard.draw(data);

I get the following error in place of the dashboard in the webpage. No error in the console.

One or more participants failed to draw()

You called the draw() method with the wrong type of data rather than a DataTable or DataView

You called the draw() method with the wrong type of data rather than a DataTable or DataView

If I try to just draw a line graph without the chart Range filter like below, it works just fine with out any errors:

Drawing just a line graph without ChartRangeFilter:

var dailyContainerChart = new google.charts.Line(document.getElementById('daily_container_count_lineChart'));
dailyContainerChart.draw(data, {allowHtml: true, width: '100%', height: '100%'});

Loading the data:

var getDailyContainerLineData = function (sourceData)
{
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'VIC - STH CRT');
data.addColumn('number', 'NSW - MINTO');
data.addColumn('number', 'QLD - PINKENBA');
data.addColumn('number', 'WA - HAZELMERE');

for(k =1;k< sourceData.getNumberOfColumns();k++)
{
    var rowData = new Array();
    var rowStart = sourceData.getColumnLabel(k);
    rowData.push(new Date(rowStart));
    for(l =0;l<sourceData.getNumberOfRows()-1;l++) // we don't want the 'total' row from the daily container table
    {
        var test = sourceData.getValue(l, k);
        if(typeof test === 'string')
        {
            var date = Date.parse(test);
            rowData.push(date);
        }
        else
        {
            rowData.push(test);
        }

    }

    data.addRow(rowData);
}

return data;
}

The data that is returned from above is used to draw the dashboard and and the LineGraph.

My questions is: Why am I getting a wrong data type error when I try to draw the line graph with the ChartRangeFilter, but not when I draw only the line graph

Can I get the ChartRangeFiler to filter 2 graphs(a table and line graph) with different data sources at the same time ?

Cheers.

Answer 1

A dashboard accepts the same data format as a regular chart.
Building a DataTable from the sample data provided seems to draw just fine.
Didn't see the load statement, check to see that all the necessary packages are being loaded when drawing the dashboard.

As for second question...
Although you cannot bind a single control to more than one data source, you can use the 'statechange' event to control other sources.

See following example...

 google.charts.load('current', { callback: function () { var data = new google.visualization.DataTable(); data.addColumn('date', 'Date'); data.addColumn('number', 'VIC - STH CRT'); data.addColumn('number', 'NSW - MINTO'); data.addColumn('number', 'QLD - PINKENBA'); data.addColumn('number', 'WA - HAZELMERE'); data.addRow([new Date('04/01/2001'), 3, 4, 7, 6]); data.addRow([new Date('04/02/2001'), 0, 9, 8, 7]); data.addRow([new Date('04/03/2001'), 9, 9, 0, 7]); data.addRow([new Date('04/04/2001'), 5, 5, 5, 2]); data.addRow([new Date('04/05/2001'), 6, 7, 1, 1]); data.addRow([new Date('04/06/2001'), 4, 4, 1, 9]); data.addRow([new Date('04/07/2001'), 4, 5, 9, 0]); var dataOther = new google.visualization.DataTable(); dataOther.addColumn('date', 'Date'); dataOther.addColumn('number', 'HLS - FLORENCE'); dataOther.addColumn('number', 'FGT - GAY'); dataOther.addColumn('number', 'KNX - FULTON'); dataOther.addColumn('number', 'TN - VOLS'); dataOther.addRow([new Date('04/01/2001'), 1, 8, 5, 2]); dataOther.addRow([new Date('04/02/2001'), 2, 9, 6, 3]); dataOther.addRow([new Date('04/03/2001'), 3, 0, 7, 4]); dataOther.addRow([new Date('04/04/2001'), 4, 1, 8, 5]); dataOther.addRow([new Date('04/05/2001'), 5, 2, 9, 6]); dataOther.addRow([new Date('04/06/2001'), 6, 3, 0, 7]); dataOther.addRow([new Date('04/07/2001'), 7, 4, 1, 8]); var chart = new google.visualization.ChartWrapper({ chartType: 'LineChart', containerId: 'daily_container_count_lineChart', options: { theme: 'maximized' } }); var control = new google.visualization.ControlWrapper({ controlType: 'ChartRangeFilter', containerId: 'control_div', options: { filterColumnIndex: 0 } }); var table = new google.visualization.ChartWrapper({ chartType: 'Table', containerId: 'table_div', dataTable: dataOther, options: { sortColumn: 1 } }); google.visualization.events.addListener(control, 'statechange', function () { var state = control.getState(); var view = new google.visualization.DataView(dataOther); view.setRows(view.getFilteredRows([{column: 0, minValue: state.range.start, maxValue: state.range.end}])); table.setDataTable(view); table.draw(); }); var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div')); dashboard.bind([control], [chart]); dashboard.draw(data); table.draw(); }, packages: ['controls', 'corechart', 'table'] }); 

 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="dashboard_div"> <div id="control_div" style="width: 100%; height: 100%"></div> <div id="daily_container_count_lineChart" style="width: 100%; height: 100%"></div> </div> <div id="table_div"></div>