How to draw 2 google charts on same html

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>

标签： javascript charts google-visualization visualization

2条回答

唯我独甜

2楼-- · 2019-07-13 22:22

If you want to draw multiple charts on one web page, include code for the following in the of the page:

Load all the packages required by your charts in a single call to google.charts.load().

For each chart on the page, add a call to google.charts.setOnLoadCallback() with the callback that draws the chart as an input - for example, google.charts.setOnLoadCallback(myPieChart).

This is outlined in the Google Charts Documentation, Draw Multiple Charts.

So instead of doing this:

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

You can bundle all charts into a single function, such as:

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

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

(note, that this won't work if you try and mix material and non-material charts. But for everything else, it'll work )

I was doing the same thing recently, and I found that this JSFiddle helped.

0人赞添加讨论(0) 举报

劳资没心，怎么记你

3楼-- · 2019-07-13 22:26

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>

0人赞添加讨论(0) 举报

How to draw 2 google charts on same html

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间