I am trying to draw multiple charts using Google Charts library on single page. It seems, everything is fine but what I'm getting is rendering of a single chart (randomly defined). The second on is in the page source but empty. I'm getting no clue what could go wrong and why chart is rendered empty. Please, help. My code below.
<html>
<head>
<title>Campaign progress dashboard</title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>
var graph_data = {};
var options = {};
var material = {};
var data = {};
function drawDualX() {
graph_data["clientA"] = [[
{label: 'Campaign', type: 'string'},
{label: 'Days passed', type: 'number'},
{label: 'Budget spent', type: 'number'}
]];
graph_data["clientA"].push([
"clientA - YT",
28.5714285714,
1.29998611111
]);
graph_data["clientA"].push([
"clientA - search",
43.8775510204,
27.1253170732
]);
data["clientA"] = google.visualization.arrayToDataTable(graph_data["clientA"]);
options["clientA"] = {
width: 800,
legend: {
position: 'bottom'
},
height: graph_data["clientA"].length * 75 + 40,
chart: {
title: "Campaign progress of clientA"
},
axes: {
x: {
0: {
side: 'top',
label: '% Progress',
viewWindow: {
min: 0,
max: 100
}
}
}
},
bars: 'horizontal'
};
material["clientA"] = new google.charts.Bar(document.getElementById("clientA"));
material["clientA"].draw(data["clientA"], options["clientA"]);
graph_data["clientB"] = [[
{label: 'Campaign', type: 'string'},
{label: 'Days passed', type: 'number'},
{label: 'Budget spent', type: 'number'}
]];
graph_data["clientB"].push([
"GDN_gfx_09",
120.689655172,
71.3906666667
]);
graph_data["clientB"].push([
"Search_09",
120.689655172,
74.40475
]);
graph_data["clientB"].push([
"Search_ALL",
75.7746478873,
63.5448310388
]);
graph_data["clientB"].push([
"Search_ALL_H2",
28.3333333333,
17.2075238095
]);
graph_data["clientB"].push([
"GDN_gfx_ALL_H2",
28.3333333333,
17.4727352941
]);
graph_data["clientB"].push([
"GDN_gfx_ALL",
75.7746478873,
67.2122571128
]);
data["clientB"] = google.visualization.arrayToDataTable(graph_data["clientB"]);
options["clientB"] = {
width: 800,
legend: {
position: 'bottom'
},
height: graph_data["clientB"].length * 75 + 40,
chart: {
title: "Campaign progress of clientB"
},
axes: {
x: {
0: {
side: 'top',
label: '% Progress',
viewWindow: {
min: 0,
max: 100
}
}
}
},
bars: 'horizontal'
};
material["clientB"] = new google.charts.Bar(document.getElementById("clientB"));
material["clientB"].draw(data["clientB"], options["clientB"]);
}
google.setOnLoadCallback(drawDualX);
google.load('visualization', '1.1', {packages: ['bar']});
</script>
</head>
<body>
<div id="clientA" style="margin:auto; width: 800px;"></div>
<p></p>
<div id="clientB" style="margin:auto; width: 800px;"></div>
</body>
</html>
