如何在同一个html上绘制2个谷歌图表 [英] How to draw 2 google charts on same html
本文介绍了如何在同一个html上绘制2个谷歌图表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试下面的代码，但它只显示第一个图表。
您能否请我哪里出错。我试图做很多改变，但仍然没有运气。
我只获得单一图表，如下图所示：
在此输入代码
< script type =text / javascript>
$ b google.charts.load（'current'，{
callback：function（）{
drawChart（）
window.addEventListener（'resize'，drawChart，假）
}，
包：['corechart'，'table']
}）
函数drawChart（）{
var data = google.visualization.arrayToDataTable（[
['TIME'，'SQL_ID'，'SMPL']
，[new Date（2017， 5,01,09,59），'NO_SQL'，1]
，[new Date（2017,5,01,09,59），'6f02ugbcuw469'，1]
，[new Date（ 2017,5,01,09,59），'2ffdrqqfyz60w'，3]
，[新日期（2017,5,01,10,00），'bpmkc2j8mh7k0'，2]
，[新日期（2017,5,01,10,00），'037z3fuxqsxyr'，1]
，[新日期（2017,5,01,10,00），'NO_SQL'，9]
， [新日期（2017,5,01,10,00），'NO_SQL'，2]
，[新日期（2017,5,01,10,01），'NO_SQL'，1]
，[new Date（2017,5,01,10,01），'037z3fuxqsxyr'，15]
，[new Date（2017,5,01,10,01），'NO_SQL'，1]
，[新日期（2017,5,01,10,01），'NO_SQL'，1]
，[新日期（2017,5,01,10,01），'NO_SQ L'，2]
，[new Date（2017,5,01,10,01），'NO_SQL'，1]
，[new Date（2017,5,01,10,01） ，'NO_SQL'，5]
，[new Date（2017,5,01,10,01），'NO_SQL'，8]
，[new Date（2017,5,01,10， 01），'6f02ugbcuw469'，1]
，[new Date（2017,5,01,10,01），'2ffdrqqfyz60w'，4]
，[new Date（2017,5,01， 10,01），'bpmkc2j8mh7k0'，15]
，[new Date（2017,5,01,10,01），'NO_SQL'，6]
，[new Date（2017,5， 'new Date（2017,0,01,10,01），'NO_SQL'，1]
，[new Date（2017， 5,01,10,01），'NO_SQL'，1]
，[new Date（2017,5,01,10,01），'NO_SQL'，1]
，[new Date（ 'NO_SQL'，1]
，[新日期（2017,5,0,11,11,59），'NO_SQL'，1]
，[new日期（2017,5,01,11,59），'037z3fuxqsxyr'，1]
，[新日期（2017,5,01,11,59），'bpmkc2j8mh7k0'，1]
， [新日期（2017,5,01,11,59），'2ffdrqqfyz60w'，12]
，[新日期（2017,5,01,11,59），'NO_SQL'，1]
，[新日期（2017,5,01,11,59），'6f02ugbcuw469'，7]
，[新日期（2017,5,01,11,59）， '6f02ugbcuw469'，1]
，[新日期（2017,5,01,11,59），'037z3fuxqsxyr'，15]
，[新日期（2017,5,01,11,59） ），'bpmkc2j8mh7k0'，15]
，[new Date（2017,5,01,12,00），'037z3fuxqsxyr'，3]
，[new Date（2017,5,01,12 ，00），'2ffdrqqfyz60w'，4]
，[new Date（2017,5,01,12,00），'NO_SQL'，1]
，[new Date（2017,5,01 ，12,00），'6f02ugbcuw469'，1]
，[new Date（2017,5,01,12,00），'bpmkc2j8mh7k0'，5]
，[new Date（2017,5 ，01,12,00），'6f02ugbcuw469'，4]
，[new Date（2017,5,01,12,00），'NO_SQL'，2]
]）
var colorPallette = ['＃273746'，'＃707B7C'，'＃dc7633'，'＃f1c40f'，'＃1e8449'，'＃2874a6'，'＃6c3483'，'＃922b21']
var wValues = data.getDistinctValues（1）
var viewColumns = [0]
var aggColumns = []
wValues.forEach（function（SQL_ID，index）{
viewColumns.push（{
calc：function（dt，row）{
var wValue = null
if（dt.getValue（row，1）=== SQL_ID）{
wValue = dt.getValue （row，2）
}
返回wValue
$，
标签：SQL_ID，
类型：'数字'
}）
aggColumns.push（{
aggregation：google.visualization。 data.sum，
column：index + 1，
label：SQL_ID，
类型：'number'
}）
}）
var view = new google.visualization.DataView（data）
view.setColumns（viewColumns）
var groupView = google.visualization.data.group（
view，
$ {
aggColumns
}
var container = document.getElementById（'chart_sql_div'）
var chart = new google.visualization.AreaChart（container ）
chart.draw（groupView，{
areaOpacity：1，
colors：colorPallette，
isStacked：true
}）
var table = new google .visualization.Table（document.getElementById（'table_div'））
table.draw（groupView）
<！ - 这开始于sql id - >
var data = google.visualization.arrayToDataTable（[
['TIME'，'W'，'SMPL']
，[new Date（2017,5,01,09,59） ，'CPU'，1]
，[new Date（2017,5,01,09,59），'CPU'，1]
，[new Date（2017,5,01,09， [新日期（2017,5,01,09,59），'CPU'，1]
，[新日期（2017,5,01， 09,59），'CPU'，1]
，[new Date（2017,5,01,09,59），'db file sequential read'，1]
，[new Date（2017 ，5,01,09,59），'db file sequential read'，1]
，[new Date（2017,5,01,09,59），'db file sequential read'，1]
，[new Date（2017,5,01,12,00），'CPU'，1]
，[new Date（2017,5,01,12,00），'log file sync'， 1]
，[new Date（2017,5,01,12,00），'db file sequential read'，1]
]）
var colorPallette = ['＃273746'， '＃707B7C'，'＃dc7633'，'＃f1c40f'，'＃1e8449'，'＃2874a6'，'＃6c3483'，'＃922b21']
var wValues = data.getDistinctValues（1）
var viewColumns = [0]
var aggColumns = []
wValues.forEach（function（w，index）{
viewCol umns.push（{
calc：function（dt，row）{
var wValue = null
if（dt.getValue（row，1）=== w）{
wValue = dt.getValue（row，2）
}
return wValue
}，
label：w，
type：'number'
}）
aggColumns.push（{
aggregation：google.visualization.data.sum，
列：index + 1，
label：w，
type ：'number'
}）
}）
var view = new google.visualization.DataView（data）
view.setColumns（viewColumns）
var groupView = google.visualization.data.group（
view，
[0]，
aggColumns
）
var container = document.getElementById（'chart_wait_div'）
var chart = new google.visualization.AreaChart（container）
chart.draw（groupView，{
areaOpacity：1，
color：colorPallette，
isStacked：true
}）
var table = new google.visualization.Table（document.getElementById（'wait_div'））
table.draw（groupView ）
}
函数drawChart（）{
var data = google.visualization.arrayToDataTable（[
['TIME'，'W'，'SMPL']
，[new Date（2017,5,01,09,59） ，'CPU'，1]
，[new Date（2017,5,01,09,59），'CPU'，1]
，[new Date（2017,5,01,09， [新日期（2017,5,01,09,59），'CPU'，1]
，[新日期（2017,5,01， 09,59），'CPU'，1]
，[new Date（2017,5,01,09,59），'db file sequential read'，1]
，[new Date（2017 ，5,01,09,59），'db file sequential read'，1]
，[new Date（2017,5,01,09,59），'db file sequential read'，1]
，[new Date（2017,5,01,12,00），'CPU'，1]
，[new Date（2017,5,01,12,00），'log file sync'， 1]
，[new Date（2017,5,01,12,00），'db file sequential read'，1]
]）
var colorPallette = ['＃273746'， '＃707B7C'，'＃dc7633'，'＃f1c40f'，'＃1e8449'，'＃2874a6'，'＃6c3483'，'＃922b21']
var wValues = data.getDistinctValues（1）
var viewColumns = [0]
var aggColumns = []
wValues.forEach（function（w，index）{
viewCo lumns.push（{
calc：function（dt，row）{
var wValue = null
if（dt.getValue（row，1）=== w）{
wValue = dt.getValue（row，2）
}
return wValue
}，
label：w，
type：'number'
}）
aggColumns.push（{
aggregation：google.visualization.data.sum，
列：index + 1，
label：w，
type ：'number'
}）
}）
var view = new google.visualization.DataView（data）
view.setColumns（viewColumns）
var groupView = google.visualization.data.group（
view，
[0]，
aggColumns
）
var container = document.getElementById（'chart_wait_div'）
var chart = new google.visualization.AreaChart（container）
chart.draw（groupView，{
areaOpacity：1，
color：colorPallette，
isStacked：true
}）
var table = new google.visualization.Table（document.getElementById（'wait_div'））
table.draw（groupView ）
}
< / script>
< / head>
< body>
< div id =chart_sql_divstyle =width：1200px; height：500px; position：absolute; top：80px; left：0; width：600px; height：400px;>< / div> ;
< div id =chart_wait_divstyle =width：1200px; height：500px; position：absolute; top：80px; right：0; width：600px; height：400px;>< / div> ;
< / body>
< / html>
解决方案
有两个同名的函数 - > drawChart
将其中一个重命名为 drawChart2 ，
并在与 drawChart ...
google.charts.load（'current'，{
callback：function（）{
drawCharts（）;
window.addEventListener 'resize'，drawCharts，false）;
}，
packages：['corechart'，'table']
}）
drawCharts（）{
drawChart（）;
drawChart2（）; //< - 新的fn名称
}
请参阅以下工作片段...
google.charts。 load（'current'，{callback：function（）{drawCharts（）; window.addEventListener（'resize'，drawCharts，false）;}，packages：['corechart']}）drawCharts（）{drawChart（）; drawChart2（）;}函数drawChart（）{var data = google.visualization.arrayToDataTable（[['TIME'，'SQL_ID'，'SMPL']，[new Date（2017,5,01,09,59），' NO_SQL'，1]，[新日期（2017,5,01,09,59），'6f02ugbcuw469'，1]，[新日期（2017,5,01,09,59），'2ffdrqqfyz60w'，3]， [新日期（2017,5,01,10,00），'bpmkc2j8mh7k0'，2]，[新日期（2017,5,01,10,00），'037z3fuxqsxyr'，1]，[新日期（2017， 5,01,10,00），'NO_SQL'，9]，[新日期（2017,5,01,10,00），'NO_SQL'，2]，[新日期（2017,5,01,10， 01），'NO_SQL'，1]，[新日期（2017,5,01,10,01），'037z3fuxqsxyr'，15]，[新日期（2017,5,01,10,01），'NO_SQL' ，1]，[新日期（2017,5,01,10,01），'NO_SQL'，1]，[新日期（2017,5,01,10,01），'NO_SQL'，2]，[新日期（2017,5,01,10,01），'NO_SQL'，1]，[新日期（2017,5,01,10,01），'NO_SQL'，5]，[新日期（2017,5， 'NO_SQL'，8]，[新日期（2017,5,01,10,01），'6f02ugbcuw469'，1]，[新日期（2017,5,01,10,01） ，'2ffdrqqfyz60w'，4]，[新日期（2017,5,01,10,01），'bpmkc2j 8mh7k0'，15]，[新日期（2017,5,01,10,01），'NO_SQL'，6]，[新日期（2017,5,01,10,01），'6f02ugbcuw469'，6]， [新日期（2017,5,01,10,01），'NO_SQL'，1]，[新日期（2017,5,01,10,01），'NO_SQL'，1]，[新日期（2017， 5,01,10,01），'NO_SQL'，1]，[新日期（2017,5,01,11,58），'NO_SQL'，1]，[新日期（2017,5,01,11， '新日期（2017,5,01,11,59），'037z3fuxqsxyr'，1]，[新日期（2017,5,01,11,59），'bpmkc2j8mh7k0'，' ，1]，[新日期（2017,5,01,11,59），'2ffdrqqfyz60w'，12]，[新日期（2017,5,0,11,11,59），'NO_SQL'，1]，[新日期（2017,5,01,11,59），'6f02ugbcuw469'，7]，[新日期（2017,5,01,11,59），'6f02ugbcuw469'，1]，[新日期（2017,5， '新日期（2017,5,01,11,59），'bpmkc2j8mh7k0'，15]，[新日期（2017,5,01,12,00），'037z3fuxqsxyr'，15] ，'037z3fuxqsxyr'，3]，[new Date（2017,5,01,12,00），'2ffdrqqfyz60w'，4]，[new Date（2017,5,01,12,00），'NO_SQL'，1 ]，[新日期（2017,5,01,12,00），'6f02ugbcuw469'，1]，[新日期（2017,5,01,12,00）， bpmkc2j8mh7k0'，5]，[新日期（2017,5,01,12,00），'6f02ugbcuw469'，4]，[新日期（2017,5,01,12,00），'NO_SQL'，2]] ）var colorPallette = ['＃273746'，'＃707B7C'，'＃dc7633'，'＃f1c40f'，'＃1e8449'，'＃2874a6'，'＃6c3483'，'＃922b21'] var wValues = data。 getDistinctValues（1）var viewColumns = [0] var aggColumns = [] wValues.forEach（function（SQL_ID，index）{viewColumns.push（{calc：function（dt，row）{var wValue = null if（dt.getValue行，1）=== SQL_ID）{wValue = dt.getValue（row，2）} return wValue}，label：SQL_ID，type：'number'}）aggColumns.push（{aggregation：google.visualization.data.sum ，column：index + 1，label：SQL_ID，type：'number'}）}）var view = new google.visualization.DataView（data）view.setColumns（viewColumns）var groupView = google.visualization.data.group（view ，[0]，aggColumns）var container = document.getElementById（'chart_sql_div'） var chart = new google.visualization.AreaChart（container）chart.draw（groupView，{areaOpacity：1，colors：colorPallette，isStacked：true}）<！ - 这开始于sql id - > var data = google.visualization.arrayToDataTable（[[''TIME'，'W'，'SMPL']，[new Date（2017,5,01,09,59），'CPU'，1]，[new Date '新'日期（2017,5,01,09,59），'CPU'，1]，[新日期（2017,5,01,5） 09,59），'CPU'，1]，[新日期（2017,5,01,09,59），'CPU'，1]，[新日期（2017,5,01,09,59），' db file sequential read'，1]，[new Date（2017,5,01,09,59），'db file sequential read'，1]，[new Date（2017,5,01,09,59），' db file sequential read'，1]，[new Date（2017,5,01,12,00），'CPU'，1]，[new Date（2017,5,01,12,00）''log file sync '，1]，[new Date（2017,5,01,12,00），'db file sequential read'，1]]）var colorPallette = ['＃273746'，'＃707B7C'，'＃dc7633'， '＃f1c40f'，'＃1e8449'，'＃2874a6'，'＃6c3483'，'＃922b21'] var wValues = data.getDistinctValues（1）var viewColumns = [0] var aggColumns = [] wValues.forEach（function （w，index）{viewColumns.push（{calc：function（dt，row）{var wValue = null if（dt.getValue（row， 1）=== w）{wValue = dt.getValue（row，2）} return wValue}，label：w，type：'number'}）aggColumns.push（{aggregation：google.visualization.data.sum，column ：index + 1，label：w，type：'number'}）}）var view = new google.visualization.DataView（data）view.setColumns（viewColumns）var groupView = google.visualization.data.group（view，[ 0]，aggColumns）var container = document.getElementById（'chart_wait_div'）var chart = new google.visualization.AreaChart（container）chart.draw（groupView，{areaOpacity：1，colors：colorPallette，isStacked：true}）} function drawChart2（）{var data = google.visualization.arrayToDataTable（[['TIME'，'W'，'SMPL']，[new Date（2017,5,01,09,59），'CPU'，1]， [新日期（2017,5,01,09,59），'CPU'，1]，[新日期（2017,5,01,09,59），'CPU'，1]，[新日期（2017， '新'日期（2017,5,01,09,59），'CPU'，1]，[新日期（2017,5,01,09， 59），'db file sequential read'，1]，[new Date（2017,5,01,09,59），'db fil '顺序读'，1]，[新日期（2017,5,01,09,59），'db文件顺序读'，1]，[新日期（2017,5,01,12,00），'CPU '，1]，[new Date（2017,5,01,12,00），'log file sync'，1]，[new Date（2017,5,01,12,00），'db file sequential read' ，1]]）var colorPallette = ['＃273746'，'＃707B7C'，'＃dc7633'，'＃f1c40f'，'＃1e8449'，'＃2874a6'，'＃6c3483'，'＃922b21'] var wValues = data.getDistinctValues（1）var viewColumns = [0] var aggColumns = [] wValues.forEach（function（w，index）{viewColumns.push（{calc：function（dt，row）{var wValue = nullif（dt .getValue（row，1）=== w）{wValue = dt.getValue（row，2）} return wValue}，label：w，type：'number'}）aggColumns.push（{aggregation：google.visualization。 data.sum，column：index + 1，label：w，type：'number'}）}）var view = new google.visualization.DataView（data）view.setColumns（viewColumns）var groupView = google.visualization.data。 group（view，[0]，aggColumns）var container = document.getElementById（'chart_wait_div'）var chart = new google.visuali zation.AreaChart（容器）chart.draw（groupView，{areaOpacity：1，colors：colorPallette，isStacked：true}）}
< script src =https://www.gstatic.com/charts/loader.js>< / script>< div id = < / div>>< / div>< div id =chart_wait_div>< / div>< div id =wait_div>< / div>
i am trying the below code but it is displaying the chart only for first one.
Can you please where i am going wrong. I tried to do many changes but still no luck.
i am only getting single chart as shown in below photo:
enter code here
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
callback: function () {
drawChart()
window.addEventListener('resize', drawChart, false)
},
packages:['corechart', 'table']
})
function drawChart() {
var data = google.visualization.arrayToDataTable([
['TIME', 'SQL_ID','SMPL']
, [new Date(2017,5,01,09,59),'NO_SQL',1]
, [new Date(2017,5,01,09,59),'6f02ugbcuw469',1]
, [new Date(2017,5,01,09,59),'2ffdrqqfyz60w',3]
, [new Date(2017,5,01,10,00),'bpmkc2j8mh7k0',2]
, [new Date(2017,5,01,10,00),'037z3fuxqsxyr',1]
, [new Date(2017,5,01,10,00),'NO_SQL',9]
, [new Date(2017,5,01,10,00),'NO_SQL',2]
, [new Date(2017,5,01,10,01),'NO_SQL',1]
, [new Date(2017,5,01,10,01),'037z3fuxqsxyr',15]
, [new Date(2017,5,01,10,01),'NO_SQL',1]
, [new Date(2017,5,01,10,01),'NO_SQL',1]
, [new Date(2017,5,01,10,01),'NO_SQL',2]
, [new Date(2017,5,01,10,01),'NO_SQL',1]
, [new Date(2017,5,01,10,01),'NO_SQL',5]
, [new Date(2017,5,01,10,01),'NO_SQL',8]
, [new Date(2017,5,01,10,01),'6f02ugbcuw469',1]
, [new Date(2017,5,01,10,01),'2ffdrqqfyz60w',4]
, [new Date(2017,5,01,10,01),'bpmkc2j8mh7k0',15]
, [new Date(2017,5,01,10,01),'NO_SQL',6]
, [new Date(2017,5,01,10,01),'6f02ugbcuw469',6]
, [new Date(2017,5,01,10,01),'NO_SQL',1]
, [new Date(2017,5,01,10,01),'NO_SQL',1]
, [new Date(2017,5,01,10,01),'NO_SQL',1]
, [new Date(2017,5,01,11,58),'NO_SQL',1]
, [new Date(2017,5,01,11,59),'NO_SQL',1]
, [new Date(2017,5,01,11,59),'037z3fuxqsxyr',1]
, [new Date(2017,5,01,11,59),'bpmkc2j8mh7k0',1]
, [new Date(2017,5,01,11,59),'2ffdrqqfyz60w',12]
, [new Date(2017,5,01,11,59),'NO_SQL',1]
, [new Date(2017,5,01,11,59),'6f02ugbcuw469',7]
, [new Date(2017,5,01,11,59),'6f02ugbcuw469',1]
, [new Date(2017,5,01,11,59),'037z3fuxqsxyr',15]
, [new Date(2017,5,01,11,59),'bpmkc2j8mh7k0',15]
, [new Date(2017,5,01,12,00),'037z3fuxqsxyr',3]
, [new Date(2017,5,01,12,00),'2ffdrqqfyz60w',4]
, [new Date(2017,5,01,12,00),'NO_SQL',1]
, [new Date(2017,5,01,12,00),'6f02ugbcuw469',1]
, [new Date(2017,5,01,12,00),'bpmkc2j8mh7k0',5]
, [new Date(2017,5,01,12,00),'6f02ugbcuw469',4]
, [new Date(2017,5,01,12,00),'NO_SQL',2]
])
var colorPallette = ['#273746','#707B7C','#dc7633','#f1c40f','#1e8449','#2874a6','#6c3483','#922b21']
var wValues = data.getDistinctValues(1)
var viewColumns = [0]
var aggColumns = []
wValues.forEach(function (SQL_ID, index) {
viewColumns.push({
calc: function (dt, row) {
var wValue = null
if (dt.getValue(row, 1) === SQL_ID) {
wValue = dt.getValue(row, 2)
}
return wValue
},
label: SQL_ID,
type: 'number'
})
aggColumns.push({
aggregation: google.visualization.data.sum,
column: index + 1,
label: SQL_ID,
type: 'number'
})
})
var view = new google.visualization.DataView(data)
view.setColumns(viewColumns)
var groupView = google.visualization.data.group(
view,
[0],
aggColumns
)
var container = document.getElementById('chart_sql_div')
var chart = new google.visualization.AreaChart(container)
chart.draw(groupView, {
areaOpacity: 1,
colors: colorPallette,
isStacked: true
})
var table = new google.visualization.Table(document.getElementById('table_div'))
table.draw(groupView)
<!-- this starts for sql id -->
var data = google.visualization.arrayToDataTable([
['TIME', 'W','SMPL']
, [new Date(2017,5,01,09,59),'CPU',1]
, [new Date(2017,5,01,09,59),'CPU',1]
, [new Date(2017,5,01,09,59),'CPU',1]
, [new Date(2017,5,01,09,59),'CPU',1]
, [new Date(2017,5,01,09,59),'CPU',1]
, [new Date(2017,5,01,09,59),'db file sequential read',1]
, [new Date(2017,5,01,09,59),'db file sequential read',1]
, [new Date(2017,5,01,09,59),'db file sequential read',1]
, [new Date(2017,5,01,12,00),'CPU',1]
, [new Date(2017,5,01,12,00),'log file sync',1]
, [new Date(2017,5,01,12,00),'db file sequential read',1]
])
var colorPallette = ['#273746','#707B7C','#dc7633','#f1c40f','#1e8449','#2874a6','#6c3483','#922b21']
var wValues = data.getDistinctValues(1)
var viewColumns = [0]
var aggColumns = []
wValues.forEach(function (w, index) {
viewColumns.push({
calc: function (dt, row) {
var wValue = null
if (dt.getValue(row, 1) === w) {
wValue = dt.getValue(row, 2)
}
return wValue
},
label: w,
type: 'number'
})
aggColumns.push({
aggregation: google.visualization.data.sum,
column: index + 1,
label: w,
type: 'number'
})
})
var view = new google.visualization.DataView(data)
view.setColumns(viewColumns)
var groupView = google.visualization.data.group(
view,
[0],
aggColumns
)
var container = document.getElementById('chart_wait_div')
var chart = new google.visualization.AreaChart(container)
chart.draw(groupView, {
areaOpacity: 1,
colors: colorPallette,
isStacked: true
})
var table = new google.visualization.Table(document.getElementById('wait_div'))
table.draw(groupView)
}
function drawChart() {
var data = google.visualization.arrayToDataTable([
['TIME', 'W','SMPL']
, [new Date(2017,5,01,09,59),'CPU',1]
, [new Date(2017,5,01,09,59),'CPU',1]
, [new Date(2017,5,01,09,59),'CPU',1]
, [new Date(2017,5,01,09,59),'CPU',1]
, [new Date(2017,5,01,09,59),'CPU',1]
, [new Date(2017,5,01,09,59),'db file sequential read',1]
, [new Date(2017,5,01,09,59),'db file sequential read',1]
, [new Date(2017,5,01,09,59),'db file sequential read',1]
, [new Date(2017,5,01,12,00),'CPU',1]
, [new Date(2017,5,01,12,00),'log file sync',1]
, [new Date(2017,5,01,12,00),'db file sequential read',1]
])
var colorPallette = ['#273746','#707B7C','#dc7633','#f1c40f','#1e8449','#2874a6','#6c3483','#922b21']
var wValues = data.getDistinctValues(1)
var viewColumns = [0]
var aggColumns = []
wValues.forEach(function (w, index) {
viewColumns.push({
calc: function (dt, row) {
var wValue = null
if (dt.getValue(row, 1) === w) {
wValue = dt.getValue(row, 2)
}
return wValue
},
label: w,
type: 'number'
})
aggColumns.push({
aggregation: google.visualization.data.sum,
column: index + 1,
label: w,
type: 'number'
})
})
var view = new google.visualization.DataView(data)
view.setColumns(viewColumns)
var groupView = google.visualization.data.group(
view,
[0],
aggColumns
)
var container = document.getElementById('chart_wait_div')
var chart = new google.visualization.AreaChart(container)
chart.draw(groupView, {
areaOpacity: 1,
colors: colorPallette,
isStacked: true
})
var table = new google.visualization.Table(document.getElementById('wait_div'))
table.draw(groupView)
}
</script>
</head>
<body>
<div id="chart_sql_div" style="width: 1200px; height: 500px;position: absolute;top: 80px;left: 0;width: 600px;height: 400px;"></div>
<div id="chart_wait_div" style="width: 1200px; height: 500px;position: absolute;top: 80px;right: 0;width: 600px;height: 400px;"></div>
</body>
</html>
解决方案
there are two functions with the same name --> drawChart
rename one of them to drawChart2,
and call it in the same place as drawChart...
google.charts.load('current', {
callback: function () {
drawCharts();
window.addEventListener('resize', drawCharts, false);
},
packages:['corechart', 'table']
})
function drawCharts() {
drawChart();
drawChart2(); // <-- new fn name
}
see following working snippet...
google.charts.load('current', {
callback: function () {
drawCharts();
window.addEventListener('resize', drawCharts, false);
},
packages:['corechart']
})
function drawCharts() {
drawChart();
drawChart2();
}
function drawChart() {
var data = google.visualization.arrayToDataTable([
['TIME', 'SQL_ID','SMPL']
, [new Date(2017,5,01,09,59),'NO_SQL',1]
, [new Date(2017,5,01,09,59),'6f02ugbcuw469',1]
, [new Date(2017,5,01,09,59),'2ffdrqqfyz60w',3]
, [new Date(2017,5,01,10,00),'bpmkc2j8mh7k0',2]
, [new Date(2017,5,01,10,00),'037z3fuxqsxyr',1]
, [new Date(2017,5,01,10,00),'NO_SQL',9]
, [new Date(2017,5,01,10,00),'NO_SQL',2]
, [new Date(2017,5,01,10,01),'NO_SQL',1]
, [new Date(2017,5,01,10,01),'037z3fuxqsxyr',15]
, [new Date(2017,5,01,10,01),'NO_SQL',1]
, [new Date(2017,5,01,10,01),'NO_SQL',1]
, [new Date(2017,5,01,10,01),'NO_SQL',2]
, [new Date(2017,5,01,10,01),'NO_SQL',1]
, [new Date(2017,5,01,10,01),'NO_SQL',5]
, [new Date(2017,5,01,10,01),'NO_SQL',8]
, [new Date(2017,5,01,10,01),'6f02ugbcuw469',1]
, [new Date(2017,5,01,10,01),'2ffdrqqfyz60w',4]
, [new Date(2017,5,01,10,01),'bpmkc2j8mh7k0',15]
, [new Date(2017,5,01,10,01),'NO_SQL',6]
, [new Date(2017,5,01,10,01),'6f02ugbcuw469',6]
, [new Date(2017,5,01,10,01),'NO_SQL',1]
, [new Date(2017,5,01,10,01),'NO_SQL',1]
, [new Date(2017,5,01,10,01),'NO_SQL',1]
, [new Date(2017,5,01,11,58),'NO_SQL',1]
, [new Date(2017,5,01,11,59),'NO_SQL',1]
, [new Date(2017,5,01,11,59),'037z3fuxqsxyr',1]
, [new Date(2017,5,01,11,59),'bpmkc2j8mh7k0',1]
, [new Date(2017,5,01,11,59),'2ffdrqqfyz60w',12]
, [new Date(2017,5,01,11,59),'NO_SQL',1]
, [new Date(2017,5,01,11,59),'6f02ugbcuw469',7]
, [new Date(2017,5,01,11,59),'6f02ugbcuw469',1]
, [new Date(2017,5,01,11,59),'037z3fuxqsxyr',15]
, [new Date(2017,5,01,11,59),'bpmkc2j8mh7k0',15]
, [new Date(2017,5,01,12,00),'037z3fuxqsxyr',3]
, [new Date(2017,5,01,12,00),'2ffdrqqfyz60w',4]
, [new Date(2017,5,01,12,00),'NO_SQL',1]
, [new Date(2017,5,01,12,00),'6f02ugbcuw469',1]
, [new Date(2017,5,01,12,00),'bpmkc2j8mh7k0',5]
, [new Date(2017,5,01,12,00),'6f02ugbcuw469',4]
, [new Date(2017,5,01,12,00),'NO_SQL',2]
])
var colorPallette = ['#273746','#707B7C','#dc7633','#f1c40f','#1e8449','#2874a6','#6c3483','#922b21']
var wValues = data.getDistinctValues(1)
var viewColumns = [0]
var aggColumns = []
wValues.forEach(function (SQL_ID, index) {
viewColumns.push({
calc: function (dt, row) {
var wValue = null
if (dt.getValue(row, 1) === SQL_ID) {
wValue = dt.getValue(row, 2)
}
return wValue
},
label: SQL_ID,
type: 'number'
})
aggColumns.push({
aggregation: google.visualization.data.sum,
column: index + 1,
label: SQL_ID,
type: 'number'
})
})
var view = new google.visualization.DataView(data)
view.setColumns(viewColumns)
var groupView = google.visualization.data.group(
view,
[0],
aggColumns
)
var container = document.getElementById('chart_sql_div')
var chart = new google.visualization.AreaChart(container)
chart.draw(groupView, {
areaOpacity: 1,
colors: colorPallette,
isStacked: true
})
<!-- this starts for sql id -->
var data = google.visualization.arrayToDataTable([
['TIME', 'W','SMPL']
, [new Date(2017,5,01,09,59),'CPU',1]
, [new Date(2017,5,01,09,59),'CPU',1]
, [new Date(2017,5,01,09,59),'CPU',1]
, [new Date(2017,5,01,09,59),'CPU',1]
, [new Date(2017,5,01,09,59),'CPU',1]
, [new Date(2017,5,01,09,59),'db file sequential read',1]
, [new Date(2017,5,01,09,59),'db file sequential read',1]
, [new Date(2017,5,01,09,59),'db file sequential read',1]
, [new Date(2017,5,01,12,00),'CPU',1]
, [new Date(2017,5,01,12,00),'log file sync',1]
, [new Date(2017,5,01,12,00),'db file sequential read',1]
])
var colorPallette = ['#273746','#707B7C','#dc7633','#f1c40f','#1e8449','#2874a6','#6c3483','#922b21']
var wValues = data.getDistinctValues(1)
var viewColumns = [0]
var aggColumns = []
wValues.forEach(function (w, index) {
viewColumns.push({
calc: function (dt, row) {
var wValue = null
if (dt.getValue(row, 1) === w) {
wValue = dt.getValue(row, 2)
}
return wValue
},
label: w,
type: 'number'
})
aggColumns.push({
aggregation: google.visualization.data.sum,
column: index + 1,
label: w,
type: 'number'
})
})
var view = new google.visualization.DataView(data)
view.setColumns(viewColumns)
var groupView = google.visualization.data.group(
view,
[0],
aggColumns
)
var container = document.getElementById('chart_wait_div')
var chart = new google.visualization.AreaChart(container)
chart.draw(groupView, {
areaOpacity: 1,
colors: colorPallette,
isStacked: true
})
}
function drawChart2() {
var data = google.visualization.arrayToDataTable([
['TIME', 'W','SMPL']
, [new Date(2017,5,01,09,59),'CPU',1]
, [new Date(2017,5,01,09,59),'CPU',1]
, [new Date(2017,5,01,09,59),'CPU',1]
, [new Date(2017,5,01,09,59),'CPU',1]
, [new Date(2017,5,01,09,59),'CPU',1]
, [new Date(2017,5,01,09,59),'db file sequential read',1]
, [new Date(2017,5,01,09,59),'db file sequential read',1]
, [new Date(2017,5,01,09,59),'db file sequential read',1]
, [new Date(2017,5,01,12,00),'CPU',1]
, [new Date(2017,5,01,12,00),'log file sync',1]
, [new Date(2017,5,01,12,00),'db file sequential read',1]
])
var colorPallette = ['#273746','#707B7C','#dc7633','#f1c40f','#1e8449','#2874a6','#6c3483','#922b21']
var wValues = data.getDistinctValues(1)
var viewColumns = [0]
var aggColumns = []
wValues.forEach(function (w, index) {
viewColumns.push({
calc: function (dt, row) {
var wValue = null
if (dt.getValue(row, 1) === w) {
wValue = dt.getValue(row, 2)
}
return wValue
},
label: w,
type: 'number'
})
aggColumns.push({
aggregation: google.visualization.data.sum,
column: index + 1,
label: w,
type: 'number'
})
})
var view = new google.visualization.DataView(data)
view.setColumns(viewColumns)
var groupView = google.visualization.data.group(
view,
[0],
aggColumns
)
var container = document.getElementById('chart_wait_div')
var chart = new google.visualization.AreaChart(container)
chart.draw(groupView, {
areaOpacity: 1,
colors: colorPallette,
isStacked: true
})
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_sql_div"></div>
<div id="chart_wait_div"></div>
<div id="wait_div"></div>
这篇关于如何在同一个html上绘制2个谷歌图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
