从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数据在网页上放置多个谷歌图表

回答

相关问题