Reputation: 5295
This is probably a simple fix, but I can't see what is going wrong. I am trying to use a bit of code from Candlesticks is always on top of lines in combo chart google chart and https://google-developers.appspot.com/chart/interactive/docs/gallery/candlestickchart. I have tried placing it in my html code (this works for other examples) but its not working in this case. Just wondering if you can help me debug it.
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawVisualization);
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Day');
data.addColumn('number', 'Dummy');
data.addColumn('number', 'Range');
data.addColumn({type: 'number', role: 'interval'});
data.addColumn({type: 'number', role: 'interval'});
data.addColumn('number', 'Trend');
data.addRows([
['Mon', 28, 10, -8, 17, 42.8],
['Tue', 38, 17, -7, 28, 47.5],
['Wed', 55, 22, -5, 25, 52.2],
['Thu', 66, 11, -16, 11, 56.9],
['Fri', 22, 44, -7, 44, 61.6],
]);
// Create and draw the visualization.
var ac = new google.visualization.ComboChart(document.getElementById('visualization'));
ac.draw(data, {
title : 'Monthly Coffee Production by Country',
width: 600,
height: 400,
vAxis: {title: "Cups"},
hAxis: {title: "Month"},
isStacked: true,
seriesType: "bars",
series: {0: {color: 'transparent'}, 2: {type: "line"}}
});
}
</script>
</head>
<body>
</body>
</html>
Upvotes: 2
Views: 2780
Reputation: 2601
Your HTML body doesn't contain an element called visualization - this is where the chart is inserted in the below line:
var ac = new google.visualization.ComboChart(document.getElementById('visualization'));
Here's a fiddle: http://jsfiddle.net/s2nya2Lv/
Does this solve your problem, or is there another problem? Your question doesn't clearly explain what exactly the problem is.
Upvotes: 4