javascript - Chart Range Filter for Google Charts LineChart - Stack Overflow

admin管理员组

文章数量:1327472

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.

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.

• javascript
• google-visualization

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked May 1, 2016 at 5:10 DrkStrDrkStr 1,93288 gold badges4242 silver badges9898 bronze badges 4

• where is data defined and can you share a sample? – WhiteHat Commented May 1, 2016 at 15:02
• Added a screen shot of the line-graph as it generated without the Chart Controller and the source data for the graph as a Google Charts Table. Let me know if you need any more info. – DrkStr Commented May 1, 2016 at 23:41
• sorry, i was asking to see where you load the data -- it should work the same way for both the chart and the dashboard. but the error sounds like a regular array is being passed instead of a DataTable or DataView...? – WhiteHat Commented May 2, 2016 at 21:57
• It is a data table. Added the method where the data is loaded. – DrkStr Commented May 3, 2016 at 2:54

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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./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>

本文标签： javascriptChart Range Filter for Google Charts LineChartStack Overflow