Menu
I am using Google visualization api. Following is my sample code. Either of the two charts can be shown if it is the only one to be drawn. But I can not get both working. Thanks for your advice.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>
<title>Home Page</title>
<!--Load the AJAX API-->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
//Load the Visualization API and the ready-made Google table visualization
google.load('visualization', '1', {'packages':['corechart']});
</script>
<script type='text/javascript'>
function drawA() {
// Define the chart using setters:
var wrap = new google.visualization.ChartWrapper();
wrap.setChartType('ColumnChart');
wrap.setDataSourceUrl('dataurl');
wrap.setContainerId('checkin-column');
wrap.setOptions({'title':'Daily Check-in Numbers', 'width':500,'height':400});
wrap.draw();
wrap.getChart();
}
function drawB() {
// Define the chart using setters:
var wrap = new google.visualization.ChartWrapper();
wrap.setChartType('ColumnChart');
wrap.setDataSourceUrl('dataurl2');
wrap.setContainerId('redemption-table');
wrap.setOptions({'title':'Redemption History', 'width':500,'height':400});
wrap.draw();
}
function drawVisualization() {
drawA();
drawB();
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body>
<div id="checkin-column"/>
<p/>
<div id="redemption-table"/>
</body>
</html>
919
A combo chart is a combination of two column charts, two line graphs, or a column chart and a line graph. You can make a combo chart with a single dataset or with two datasets that share a common string field. Combo charts can answer questions about your data, such as: What are the trends for the same categories?
Google chart tools are powerful, simple to use, and free.
A chart that lets you render each series as a different marker type from the following list: line, area, bars, candlesticks, and stepped area. To assign a default marker type for series, specify the seriesType property. Use the series property to specify properties of each series individually.
The problem is in your divs.
Replace this:
<div id="checkin-column"/>
<p/>
<div id="redemption-table"/>
With this:
<div id="checkin-column"></div>
<p></p>
<div id="redemption-table"></div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
