從MYSQL數據在網頁上放置多個谷歌圖表

我已經能夠顯示來自mysql數據的谷歌圖表，但是當我添加第二個圖表時，我只能看到來自第二個數組的數據（對於第二個圖表）在我的PHP腳本中使用了json_encode。如果我更改數組編碼的順序，以便第二個圖表的數組現在先編碼，我不再看到它，但現在第一個圖表是可見的。 任何人都可以看到這個問題嗎？也許我應該使用柱狀圖而不是材料表？這裏是我的javascript：從MYSQL數據在網頁上放置多個谷歌圖表

<script type="text/javascript"> 

    google.setOnLoadCallback(drawCharts); 

    function drawCharts() { 
    drawChartA(); 
    drawChartB(); 

    } 

     function drawChartB(){ 
      var data = new google.visualization.DataTable(<?=$jsonTable?>); 
      var options = { 
       chart: { 
        title: 'Calls for <?php echo $cLabel;?>', 
        subtitle: 'Something to put Here', 



       }, 
       annotations:{ 
        textStyle:{ 
         fontName: 'Times-Roman', 
         fontSize: 12, 
         bold: true, 
         italic: false 
        } 
       }, 
       width: 1200, 
       height: 600, 


      }; 

      var chart = new 
      google.charts.Bar(document.getElementById('chart_div')); 
      chart.draw(data, google.charts.Bar.convertOptions(options)); 

     } 

      function drawChartA(){ 
      var data = new google.visualization.DataTable(<?=$jsonTable_ct?>); 
      var options = { 
       chart: { 
        title: 'Calls for <?php echo $cLabel;?>', 
        subtitle: 'Something to put Here', 

       }, 
       annotations:{ 
        textStyle:{ 
         fontName: 'Times-Roman', 
         fontSize: 12, 
         bold: true, 
         italic: false 
        } 
       }, 
       width: 1200, 
       height: 600, 
       isStacked: 'true', 

      }; 

var chart = new google.charts.Bar(document.getElementById('chart_div_ct')); 

      chart.draw(data, google.charts.Bar.convertOptions(options)); 

     } 

</script>

我json_encoded文件是：

{"cols":[{"label":"Time Interval","type":"string"},{"label":"Calls - All Offices","type":"number"}],"rows":[{"c":[{"v":"05:00"},{"v":1}]},{"c":[{"v":"06:00"},{"v":3}]},{"c":[{"v":"07:00"},{"v":9}]},{"c":[{"v":"07:30"},{"v":22}]},{"c":[{"v":"08:00"},{"v":82}]},{"c":[{"v":"08:30"},{"v":68}]},{"c":[{"v":"09:00"},{"v":97}]},{"c":[{"v":"09:30"},{"v":48}]},{"c":[{"v":"10:00"},{"v":56}]},{"c":[{"v":"10:30"},{"v":70}]},{"c":[{"v":"11:00"},{"v":75}]},{"c":[{"v":"11:30"},{"v":53}]},{"c":[{"v":"12:00"},{"v":56}]},{"c":[{"v":"12:30"},{"v":48}]},{"c":[{"v":"13:00"},{"v":22}]},{"c":[{"v":"13:30"},{"v":42}]},{"c":[{"v":"14:00"},{"v":40}]},{"c":[{"v":"14:30"},{"v":60}]},{"c":[{"v":"15:00"},{"v":69}]},{"c":[{"v":"15:30"},{"v":65}]},{"c":[{"v":"16:00"},{"v":73}]},{"c":[{"v":"16:30"},{"v":37}]},{"c":[{"v":"17:00"},{"v":20}]},{"c":[{"v":"17:30"},{"v":10}]},{"c":[{"v":"18:00"},{"v":10}]},{"c":[{"v":"18:30"},{"v":2}]},{"c":[{"v":"19:00"},{"v":1}]},{"c":[{"v":"19:30"},{"v":2}]},{"c":[{"v":"20:00"},{"v":1}]},{"c":[{"v":"20:30"},{"v":1}]}]}

，另一個是在這裏：（他們都工作，所以審查，這可能不是必要的）

{"cols":[{"label":"Time Interval","type":"string"},{"label":"NP Calls","type":"number"},{"label":"DR Calls","type":"number"},{"label":"RE Today Calls","type":"number"},{"label":"RE Future","type":"number"},{"label":"ACCT","type":"number"},{"label":"EMER","type":"number"},{"label":"Other Calls","type":"number"}],"rows":[{"c":[{"v":"05:00"},{"v":0},{"v":0},{"v":0},{"v":0},{"v":0},{"v":0},{"v":1}]},{"c":[{"v":"06:00"},{"v":0},{"v":0},{"v":1},{"v":0},{"v":0},{"v":0},{"v":0}]},{"c":[{"v":"07:00"},{"v":0},{"v":0},{"v":0},{"v":0},{"v":0},{"v":0},{"v":2}]},{"c":[{"v":"07:30"},{"v":2},{"v":0},{"v":3},{"v":0},{"v":0},{"v":1},{"v":2}]},{"c":[{"v":"08:00"},{"v":9},{"v":3},{"v":11},{"v":5},{"v":0},{"v":4},{"v":23}]},{"c":[{"v":"08:30"},{"v":1},{"v":2},{"v":13},{"v":7},{"v":2},{"v":4},{"v":14}]},{"c":[{"v":"09:00"},{"v":3},{"v":1},{"v":15},{"v":11},{"v":6},{"v":3},{"v":23}]},{"c":[{"v":"09:30"},{"v":0},{"v":0},{"v":4},{"v":6},{"v":5},{"v":0},{"v":16}]},{"c":[{"v":"10:00"},{"v":1},{"v":3},{"v":2},{"v":10},{"v":2},{"v":0},{"v":17}]},{"c":[{"v":"10:30"},{"v":5},{"v":1},{"v":1},{"v":10},{"v":2},{"v":3},{"v":23}]},{"c":[{"v":"11:00"},{"v":5},{"v":3},{"v":7},{"v":11},{"v":10},{"v":1},{"v":23}]},{"c":[{"v":"11:30"},{"v":4},{"v":1},{"v":2},{"v":6},{"v":2},{"v":0},{"v":18}]},{"c":[{"v":"12:00"},{"v":3},{"v":0},{"v":5},{"v":11},{"v":2},{"v":0},{"v":21}]},{"c":[{"v":"12:30"},{"v":5},{"v":1},{"v":4},{"v":4},{"v":4},{"v":1},{"v":5}]},{"c":[{"v":"13:00"},{"v":2},{"v":1},{"v":3},{"v":2},{"v":2},{"v":0},{"v":6}]},{"c":[{"v":"13:30"},{"v":2},{"v":0},{"v":1},{"v":3},{"v":1},{"v":0},{"v":15}]},{"c":[{"v":"14:00"},{"v":5},{"v":3},{"v":1},{"v":5},{"v":3},{"v":1},{"v":4}]},{"c":[{"v":"14:30"},{"v":3},{"v":1},{"v":5},{"v":6},{"v":6},{"v":0},{"v":19}]},{"c":[{"v":"15:00"},{"v":3},{"v":1},{"v":4},{"v":8},{"v":4},{"v":1},{"v":22}]},{"c":[{"v":"15:30"},{"v":8},{"v":1},{"v":0},{"v":10},{"v":4},{"v":0},{"v":22}]},{"c":[{"v":"16:00"},{"v":6},{"v":5},{"v":1},{"v":12},{"v":3},{"v":2},{"v":20}]},{"c":[{"v":"16:30"},{"v":3},{"v":4},{"v":3},{"v":7},{"v":3},{"v":1},{"v":7}]},{"c":[{"v":"17:00"},{"v":1},{"v":0},{"v":0},{"v":4},{"v":1},{"v":0},{"v":5}]},{"c":[{"v":"17:30"},{"v":0},{"v":1},{"v":0},{"v":1},{"v":1},{"v":0},{"v":1}]},{"c":[{"v":"18:00"},{"v":1},{"v":0},{"v":1},{"v":0},{"v":0},{"v":0},{"v":2}]},{"c":[{"v":"18:30"},{"v":0},{"v":0},{"v":0},{"v":1},{"v":0},{"v":0},{"v":0}]}]}Can

來源

2015-10-14 Bryan

這很可能是the same issue在google-visualization-issues存儲庫中報告的。

有至少兩個解決方案可在瞬間：

選項1.生成圖表同步

的總體思路是，以圖表呈現同步。由於繪圖函數是異步的，因此我們使用ready事件處理程序來達到此目的。在每一個功能

廣場ready事件處理程序之前draw函數調用：

if (typeof ready != "undefined") google.visualization.events.addOneTimeListener(chart, 'ready', ready);

，改變drawChartN()函數簽名drawChartN(ready)

然後更換：

function drawCharts() { 
    drawChartA(); 
    drawChartB(); 
}

有：

function drawCharts() { 
    drawChartA(function(){ 
     drawChartB(); 
    }); 
}

PhpFiddle

選項2.使用凍結版本裝載機。

由於

的V43發行候選版本會解決這個問題

開關使用凍結版本裝載機的推出。

步驟：

1）的引用添加到裝載機：<script src="//www.gstatic.com/charts/loader.js"></script>

2）然後裝入43版本庫：

3）替換：

function drawCharts() { 
    drawChartA(); 
    drawChartB(); 
}

與

google.charts.setOnLoadCallback(drawChartA); 
google.charts.setOnLoadCallback(drawChartB);

來源

2015-10-25 19:51:10

從MYSQL數據在網頁上放置多個谷歌圖表

回答

相關問題