I have a calendar chart and a pie chart working independently on separate
pages. I want them to display on the same page. I have figured out that I
cannot call load() twice, so I have changed it to the following:
google.charts.load('current', {packages:['calendar', 'corechart']});
I can display multiple pie charts on the same page. I can display multiple
calendars on the same page. I cannot display one of each.
My function drawChart1() and function drawChart2() will individually
display their respective charts. If I add both functions into the code they
will not display. There is no error. If I delete either function code, the
other displays. If I comment out either functions, they also will not
display. The code must be deleted to display the other chart.
<script type="text/javascript">
function drawChart1() {
<?php include_once 'qry_reportCalendar.php';?>
var jArray = <?php echo $jsonTableCalendar; ?>;
var mName = "<?php $machName = ltrim($varMachine, 'm');echo $machName;?>";
var sDate = "<?php echo $varStartDate;?>";
var eDate = "<?php echo $varEndDate;?>";
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'date', id: 'Date' });
dataTable.addColumn({ type: 'number', id: 'Running' });
for(var i = 0; i < jArray.length; i++){
dataTable.addRow([ new
Date(jArray[i][0],jArray[i][1],jArray[i][2]),jArray[i][3]]);
}
var chart = new
google.visualization.Calendar(document.getElementById('calendar_basic'));
var options = {
title: "Utilization " + mName + ": " + sDate + " to " + eDate,
noDataPattern: {
backgroundColor: '#c9f9c6',
color: '#eeeeee'
},
colorAxis: {colors:['#ffffff','#EC1717','yellow','#35BF2E'],maxValue:100}
};
chart.draw(dataTable, options);
}
function drawChart2(){
<?php include_once 'qry_reportPie.php';?>
var data = new google.visualization.arrayToDataTable(<?php echo $jsonTable;
?>);
var options = {
//title:'Utilization',
titleTextStyle: {
bold: true,
fontSize: 20,
color: '#000000'
},
animation: {
startup: false
},
slices: {
0: {color: '#35BF2E'},
1: {color: 'yellow'},
2: {color: '#EC1717'}
},
pieSliceTextStyle: {
color: 'black',
bold: true,
fontSize: 16,
},
pieHole: 0.3,
legend: {
position: 'bottom',
textStyle: {color: '#000000'},
},
width: 300,
height: 300,
backgroundColor: '#ffffff',
};
var chart = new
google.visualization.PieChart(document.getElementById('piechart2'));
chart.draw(data, options);
}
google.charts.load('current', {packages:['calendar', 'corechart']});
function resize(){
google.charts.setOnLoadCallback(drawChart1);
//google.charts.setOnLoadCallback(drawChart2);
}
window.onload = resize;
window.onresize = resize;
</script>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/google-visualization-api/8f310528-b820-4ff5-93ca-493a7475ecb6%40googlegroups.com.
