Cannot get Calendar chart to display on the same page as any other charts

[mpi-iiot]

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>

[Daniel LaLiberte]

Given some recent changes in the loader, it is possible we have broken some ways of using it.  However, your repeated calls of the resize function (with its repeated calls of setOnLoadCallback), via window.onload and window.onresize are suspicious as well.  Could you try avoiding one or the other, or both (just call resize directly).    

You could also combine your two setOnLoadCallback functions into one:

  google.charts.setOnLoadCallback(drawCharts);

  function drawCharts () {

    drawChart1();

    drawChart2();

  }

--
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 google-visualizati...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/8f310528-b820-4ff5-93ca-493a7475ecb6%40googlegroups.com.

--

Daniel LaLiberte

dlaliberte@Google.com   Cambridge MA

[mpi-iiot]

Combining them did not work. I have already stripped the resize function. That did not help either.

I have also tried to insert them separately in <iframe> windows. Again, I can accomplish multiple pie charts or multiple calendars, but not a mixture of the two.

Neither chart appears with the code below. If I delete either chunk of code for each chart, the other populates. I think this is broken and the charts in package 'corechart' are not compatible with 'calendar'.

There is some conflict elsewhere.

<script type="text/javascript">

function drawChart() {

<?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 chartc = new google.visualization.Calendar(document.getElementById('calendar1'));

var options = {

title: "Utilization " + mName + ": " + sDate + " to " + eDate,

noDataPattern: {

backgroundColor: '#c9f9c6',

color: '#eeeeee'

},

colorAxis: {colors:['#ffffff','#EC1717','yellow','#35BF2E'],maxValue:100}

};

chartc.draw(dataTable, options);

var chartp = new google.visualization.PieChart(document.getElementById('pie1'));

chartp.draw(data, options);

}

google.charts.load('current', {packages:['calendar','corechart']});

    google.charts.setOnLoadCallback(drawChart);

    

</script>

[mpi-iiot]

I didn't post the full code with both charts... see below