Javascript 如何在同一html上绘制2个google图表

我正在尝试下面的代码，但它只为第一个代码显示图表

你能告诉我哪里出了问题吗。我试着做了很多改变，但还是没有成功

我只得到一张图表，如下图所示：

在此处输入代码
google.charts.load（'current'{
回调：函数（）{
图纸（）
window.addEventListener（'resize'，drawChart，false）
},
包：['corechart'，'table']
})
函数绘图图（）{
var data=google.visualization.arrayToDataTable([
['TIME'，'SQL_ID'，'SMPL']
，[新日期（2017,5,01,09,59），'NO_SQL'，1]
，[新日期（2017,5,01,09,59），'6f02ugbcuw469'，1]
，[新日期（2017,5,01,09,59），'2FFDRQFYZ60W'，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,01,10,01），'NO_SQL'，8]
，[新日期（2017,5,01,10,01），'6f02ugbcuw469'，1]
，[新日期（2017,5,01,10,01），'2FFDRQFYZ60W'，4]
，[新日期（2017,5,01,10,01），'bpmkc2j8mh7k0'，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,59），'NO_SQL'，1]
，[新日期（2017,5,01,11,59），'037z3fuxqsxyr'，1]
，[新日期（2017,5,01,11,59），'bpmkc2j8mh7k0'，1]
，[新日期（2017年5月1日11月59日），'2FFDRQFYZ60W'，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]
，[新日期（2017,5,01,12,00），'037z3fuxqsxyr'，3]
，[新日期（2017,5,01,12,00），'2FFDRQFYZ60W'，4]
，[新日期（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]
])
变量ColorPallete=['#273746'、'#707B7C'、'#dc7633'、'#f1c40f'、'#1e8449'、'#2874a6'、'#6c3483'、'#922b21']
var wValues=data.getDistinctValues（1）
var viewColumns=[0]
var aggColumns=[]
forEach（函数（SQL\u ID，索引）{
viewColumns.push({
计算：函数（dt，行）{
var wValue=null
if（dt.getValue（行，1）==SQL\u ID）{
wValue=dt.getValue（第2行）
}
返回wValue
},
标签：SQL\u ID，
键入：“数字”
})
推({
聚合：google.visualization.data.sum，
列：索引+1，
标签：SQL\u ID，
键入：“数字”
})
})
var view=new google.visualization.DataView（数据）
view.setColumns（viewColumns）
var groupView=google.visualization.data.group(
看法
[0],
聚合柱
)
var container=document.getElementById（'chart\u sql\u div'）
var chart=新的google.visualization.AreaChart（容器）
图表绘制（组视图{
面积不透明度：1，
颜色：彩色托盘，
伊斯塔克德：是的
})
var table=new google.visualization.table（document.getElementById（'table_div'））
table.draw（组视图）
var data=google.visualization.arrayToDataTable([
[‘时间’、‘W’、‘SMPL’]
，[新日期（2017,5,01,09,59），'CPU'，1]
，[新日期（2017,5,01,09,59），'CPU'，1]
，[新日期（2017,5,01,09,59），'CPU'，1]
，[新日期（2017,5,01,09,59），'CPU'，1]
，[新日期（2017,5,01,09,59），'CPU'，1]
，[新日期（2017,5,01,09,59），“数据库文件顺序读取”，1]
，[新日期（2017,5,01,09,59），“数据库文件顺序读取”，1]
，[新日期（2017,5,01,09,59），“数据库文件顺序读取”，1]
，[新日期（2017,5,01,12,00），'CPU'，1]
，[新日期（2017,5,01,12,00），“日志文件同步”，1]
，[新日期（2017,5,01,12,00），“数据库文件顺序读取”，1]
])
变量ColorPallete=['#273746'、'#707B7C'、'#dc7633'、'#f1c40f'、'#1e8449'、'#2874a6'、'#6c3483'、'#922b21']
var wValues=data.getDistinctValues（1）
var viewColumns=[0]
var aggColumns=[]
forEach（函数（w，索引）{
viewColumns.push({
计算：函数（dt，行）{
var wValue=null
如果（dt.getValue（第1行）==w）{
wValue=dt.getValue（第2行）
}
返回wValue
},
标签：w，
键入：“数字”
})
推({
聚合：google.visualization.data.sum，
列：索引+1，
标签：w，
键入：“数字”
})
})
var view=new google.visualization.DataView（数据）
view.setColumns（viewColumns）
var groupView=google.visualization.data.group(
看法
[0],
聚合柱
)
var container=document.getElementById（'chart\u wait\u div'）
var chart=新的google.visualization.AreaChart（容器）
图表绘制（组视图{
面积不透明度：1，
颜色：彩色托盘，
伊斯塔克德：是的
})
var table=new google.visualization.table（document.getElementById（'wait\u div'））
table.draw（组视图）
}
函数绘图图（）{
var data=google.visualization.arrayToDataTable([
[‘时间’、‘W’、‘SMPL’]
，[新日期（2017,5,01,09,59），'CPU'，1]
，[新日期（2017,5,01,09,59），'CPU'，1]
，[新日期（2017,5,01,09,59），'CPU'，1]
，[新日期（2017,5,01,09,59），'CPU'，1]
，[新日期（2017,5,01,09,59），'CPU'，1]
，[新日期（2017,5,01,09,59），“数据库文件顺序读取”，1]
，[新日期（2017,5,01,09,59），“数据库文件顺序读取”，1]
，[新日期（2017,5,01,09,59），“数据库文件顺序读取”，1]
，[新日期（2017,5,01,12,00），'CPU'，1]
，[新日期（2017,5,01,12,00），“日志文件同步”，1]
，[新日期（2017,5,01,12,00），“数据库文件顺序读取”，1]
])
变量ColorPallete=['#273746'、'#707B7C'、'#dc7633'、'#f1c40f'、'#1e8449'、'#2874a6'、'#6c3483'、'#922b21']
var wValues=data.getDistinctValues（1）
var viewColumns=[0]
var aggColumns=[]
forEach（函数（w，索引）{
viewColumns.push({
计算：函数（dt，行）{
var wValue=null
如果（dt.getValue（第1行）==w）{
wValue=dt.getValue（第2行）
}
返回wValue
},
标签：w，
键入：“数字”
})
推({
聚合：google.visualization.data.sum，
列：索引+1，
标签：w，
键入：“数字”
})
})
变量v
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>

google.charts.load('current', {
  callback: function () {
    drawCharts();
    window.addEventListener('resize', drawCharts, false);
  },
  packages:['corechart', 'table']
})

function drawCharts() {
  drawChart();
  drawChart2();  // <-- new fn name
}

window.addEventListener('resize', drawChart, false);
window.addEventListener('resize', drawChart2, false);

window.addEventListener('resize', drawCharts, false);

drawCharts(...){
    drawChart1();
    drawChart2();
    drawChart3();
    ..........
}