CODEWITHSUNDEEP
phpmysqlgoogle-visualization
Bryan
Bryan

Reputation: 15

Placing Multilple Google Charts on webpage from MYSQL Data

I have been able to show a google chart from mysql data, but when I add the second chart I am only able to see the data from the 2nd array(for 2nd chart) I used json_encode on in my php script. If I change the order of the array encoding so that the 2nd chart's array is now encoded first I no longer see it, but now the first chart is visible. Can anyone see the issue? Maybe I should use column charts instead of material charts?? here is my javascript:

    <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>

my json_encoded files are:

    {"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}]}]}

and the other is here: (they both work so reviewing this may not be necessary)

    {"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

Upvotes: 1

Views: 56

Answers (1)

Vadim Gremyachev
Vadim Gremyachev

Reputation: 59348

It's most likely the same issue that was reported in google-visualization-issues repository.

There are at least two solution available at the moment:

Option 1. Render charts synchronously

The general idea is to render chart synchronously. Since draw function is asyncronous, we utilize ready event handler for that purpose.

Place ready event handler in every function before draw function invocation:

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

and change drawChartN() function signature to drawChartN(ready)

Then replace: 

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

with:

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

PhpFiddle

Option 2. Using the frozen version loader.

Since

The rollout of the v43 candidate release that would fix this problem

switch to using the frozen version loader.

Steps:

1)Add a reference to loader: <script src="//www.gstatic.com/charts/loader.js"></script>

2)Then load a 43 version of library: google.charts.load("43",{packages:["corechart","bar"]});

3)Replace: 

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

with

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

Upvotes: 0

Related Questions