如何在面板中添加在两种类型的谷歌图表之间切换的按钮
how to add buttons to switch between two types of google charts in a dashboard
我有一个折线图和一个应用于该折线图的日期范围过滤器,这是我现在的代码。。。
function go(){
window.setTimeout( function(){
var p=0;
var table = document.getElementById('mytable');
var rows = table.getElementsByTagName('tr');
var i, j, cells;
var distance=[];
var date=[];
var entryid=[];
j=rows.length;
for (i = 1; i < j; i++) {
cells = rows[i].getElementsByTagName('td');
if (!cells.length) {
continue;
}
distance[i-1] = parseInt(cells[1].innerHTML);
date[i-1]=new Date(reverse(cells[2].innerHTML));
entryid[i-1]=cells[0].innerHTML;
}
var c=[];
for (var z=0;z<distance.length;z++){
c.push([date[z],distance[z]]);
}
/*document.getElementById('cvs').innerHTML=c;*/
function reverse(f){
var g=f.split("/");
var goodstr=g[1]+"/"+g[2]+"/"+g[0];
return goodstr;
}
google.charts.load('44', {
callback: drawBackgroundColor,
packages: ['corechart','controls']
});
function drawBackgroundColor() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Distance');
data.addRows(c);
var options = {
hAxis: {
title: 'Date'
},
vAxis: {
title: 'Distance Ran'
},
backgroundColor: '#f1f8e9'
};
var control;
var chartWrapper;
var dash;
dash = new google.visualization.Dashboard(
document.getElementById('dashboard_div'));
var controlOptions = {
filterColumnIndex: 0
};
///////////////////////////
control = new google.visualization.ControlWrapper({
controlType: 'DateRangeFilter',
containerId: 'control_div',
options: controlOptions
});
chartWrapper = new google.visualization.ChartWrapper({
chartType:'LineChart',//'LineChart', //'LineChart',
containerId: 'cvs',
options: options
});
dash.bind([control], [chartWrapper]);
dash.draw(data);
}
}, 5 * 1000 );
我想修改此代码以添加按钮,在具有相同数据的两种类型的图表(linechart和barchart)之间切换。可能我需要添加另一个chartType="BarChart"的chartWrapper,并使用一些if,else语句,但我似乎无法解决。有人能帮我做到这一点吗。提前感谢:)。
看看文档中的这个例子:https://developers.google.com/chart/interactive/docs/gallery/controls#7-绘制您的仪表板
这似乎正是你所需要的
像这样的东西应该工作
document.getElementById('b2').addEventListener("click", changeType);
function changeType(){
chartWrapper.setChartType('ColumnChart');
chartWrapper.draw();
}
相关文章:
- 使用谷歌地图api 3为MapTypeId.TERRAIN分离按钮
- 在TWebBrowser(谷歌地图)中显示位置,而无需单击按钮
- 如何根据点击按钮重新加载我的谷歌图表
- 谷歌应用程序脚本示例-如何更改单选按钮的列表框相关值
- 如何隐藏谷歌地图Api 3中InfoBox窗口中的关闭(x)按钮
- 按下后退按钮时,谷歌音乐如何继续播放
- 搜索按钮谷歌地图在我的vf页面上不起作用
- 谷歌日历自定义按钮
- 我想在每个按钮点击事件上加载多个图表.我使用了下面的谷歌代码
- 在谷歌地图的信息窗口内点击按钮
- 谷歌工作表中的按钮,当单击时,会更改特定单元格的背景
- 谷歌登录按钮
- 谷歌扩展:如何在弹出窗口中按下按钮时在我的javascript文件中运行函数
- 无法将谷歌+1按钮与CSS定位
- 为什么我的谷歌+1按钮代码不起作用
- 谷歌+按钮不工作在magento
- 我如何得到一个谷歌+ +1按钮的计数器
- 谷歌+按钮删除自由空间/边距向右|对齐到右
- 显示内容后,谷歌+1按钮点击
- 谷歌+1按钮不符合W3C标准