admin管理员组文章数量:1327090
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.
Share Improve this question edited Jun 20, 2020 at 9:12 CommunityBot 11 silver badge asked May 1, 2016 at 5:10 DrkStrDrkStr 1,9328 gold badges42 silver badges98 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
1 Answer
Reset to default 6A 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
版权声明:本文标题:javascript - Chart Range Filter for Google Charts LineChart - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742209455a2433435.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论