データセットの異なる複数のGoogleグラフ

Question

同じ.htmlページに2つの棒グラフがありますが、最初のグラフは2番目のグラフを上書きしています。 1つのグラフしか表示されません。私はiFramesを使いたくないので、関数/変数をユニークにしました。ほかに何が足りないのですか？

<script type="text/javascript"> 
// Load the Visualization API and the piechart package. 
google.charts.load('current', {'packages':['corechart']}); 

// Set a callback to run when the Google Visualization API is loaded. 
google.charts.setOnLoadCallback(drawCycleStatusChart); 

function drawCycleStatusChart() { 
var jsonCycleData = $.ajax({ 
     url: "cycleStatus.php", 
     dataType: "json", 
     async: false 
     }).responseText; 
var jsonCycleObj = eval(jsonCycleData); 
    console.log(typeof jsonCycleData); 

    // Create our data table out of JSON data loaded from server. 
    var dataCycle = new google.visualization.arrayToDataTable(jsonCycleObj); 

    var optionsCycle = { 
    //isStacked: 'percent', 
    orientation: 'horizontal', 
    height: 600, 
    chartArea: {height: 500}, 
    width: '100%', 
    fontName: 'Arial', 
    fontSize: 15, 
    annotations: { 
     textStyle: {fontSize: 10, fontName: 'Calibri'} 
    }, 
    legend: {position: 'top', maxLines: 4}, 
    hAxis: { 
     minValue: 0, 
     //title: 'Web UI Release Night Test Cycles in Production', 
     //titleTextStyle: {fontSize: 25, bold: true}, 
     textStyle: {fontSize: 15, bold: false} 
     } 
    }; 

    // Instantiate and draw our chart, passing in some options. 
    var chartCycle = new google.visualization.ColumnChart(document.getElementById('cycle_status')); 
    chartCycle.draw(dataCycle, optionsCycle); 
    } 

// Load the Visualization API and the piechart package. 
google.charts.load('current', {'packages':['corechart']}); 

// Set a callback to run when the Google Visualization API is loaded. 
google.charts.setOnLoadCallback(drawChart); 

function drawChart() { 
var jsonData = $.ajax({ 
     url: "executionStatus.php", 
     dataType: "json", 
     async: false 
     }).responseText; 
var jsonObj = eval(jsonData); 
    console.log(typeof jsonData); 

    // Create our data table out of JSON data loaded from server. 
    var data = new google.visualization.arrayToDataTable(jsonObj); 

    var options = { 
    isStacked: 'percent', 
    orientation: 'horizontal', 
    height: 600, 
    chartArea: {height: 300}, 
    //width: '100%', 
    fontName: 'Arial', 
    fontSize: 15, 
    annotations: { 
     textStyle: {fontSize: 10, fontName: 'Calibri'} 
    }, 
    legend: {position: 'top', maxLines: 4}, 
    hAxis: { 
     minValue: 0, 
     //title: 'Web UI Release Night Test Cycles in Production', 
     //titleTextStyle: {fontSize: 25, bold: true}, 
     textStyle: {fontSize: 15, bold: false} 
     } 
    }; 

    // Instantiate and draw our chart, passing in some options. 
    var chart = new google.visualization.ColumnChart(document.getElementById('stacked_bar')); 
    chart.draw(data, options); 
    } 

</script> 

<div id="cycle_status"</div> 
<div id="stacked_bar"></div> 

Answer 1

<div id="cycle_status"></div> 

閉じる>タグがありません