Google charts and google table not displaying simultaneously

Question

I am using google charts and google table for my project. The problem is that, I am not able to display two google charts and one google table on a single page. How can this be solved?

My code:

    <script type="text/javascript">

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

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

        function drawChart() {

            // Create our data table out of JSON data loaded from server.
            var data = new google.visualization.DataTable(<?= $jsonTable ?>);
            var options = {
                title: ' Audit Schedule ',
                is3D: 'true',
                width: 500,
                height: 250


            };
            // Instantiate and draw our chart, passing in some options.
            // Do not forget to check your div ID
            var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
            chart.draw(data, options);

        }
    </script>


    <script type="text/javascript">
        google.charts.load('current', {'packages': ['corechart']});
        google.charts.setOnLoadCallback(drawChart);
        function drawChart() {

            var data = google.visualization.arrayToDataTable([
                ['Task', 'Hours per Day'],
                ['Work', 11],
                ['Eat', 2],
                ['Commute', 2],
                ['Watch TV', 2],
                ['Sleep', 7]
            ]);

            var options = {
                title: 'My Daily Activities',
                width: 501.2,
                height: 250
            };

            var chart = new google.visualization.PieChart(document.getElementById('piechart'));

            chart.draw(data, options);
        }

    </script>


    <script type="text/javascript">
        google.charts.load('current', {'packages': ['table']});
        google.charts.setOnLoadCallback(drawTable);

        function drawTable() {
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Name');
            data.addColumn('number', 'Salary');
            data.addColumn('boolean', 'Full Time Employee');
            data.addRows([
                ['Mike', {v: 10000, f: '$10,000'}, true],
                ['Jim', {v: 8000, f: '$8,000'}, false],
                ['Alice', {v: 12500, f: '$12,500'}, true],
                ['Bob', {v: 7000, f: '$7,000'}, true]
            ]);

            var table = new google.visualization.Table(document.getElementById('table_div'));

            table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
        }
    </script>

//html code

                                    <div id="piechart" style="margin-top: -300px; margin-left:490px;"></div><br>

                                    <div class="chart-wrapper">
                                        <div id="chart" style="width:1006px; height:400px; margin-left: -15px"></div>
                                    </div><br>

                                    <div id="table_div"></div>

Link to google charts: https://google-developers.appspot.com/chart/interactive/docs/gallery/columnchart#column-styles

Answer 1

You have defined multiple instances of google.charts.setOnLoadCallback(). This function should only be defined ONCE in your code, because otherwise you'll be overwriting the callback event everytime. Anyway, you should wrap all your chart drawing functions in something like :

  function drawCharts(){
     drawchart1();
     drawchart2(); 
     drawwhateveryouwant(); 
  }

  google.setOnLoadCallback(drawCharts);

Also, I might have to point out that you have two functions with the same name ^^, you might want to correct that. Other than that, you might want to call all your chart packages at once by doing this since I also noticed that you were loading the same package twice, which is a waste of resources even if it doesn't stop your code from functioning correctly :

 google.load('visualization', '1', {'packages': ['corechart','table']});

I modified your code a bit to help you towards achieving desired results :

<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

</head>
<body>
    <div id="piechart"></div>
    <div id="table_div"></div>
</body>
<script>

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

//Function to draw piechart 
function drawChart() {

    var data = google.visualization.arrayToDataTable([
        ['Task', 'Hours per Day'],
        ['Work', 11],
        ['Eat', 2],
        ['Commute', 2],
        ['Watch TV', 2],
        ['Sleep', 7]
    ]);

    var options = {
        title: 'My Daily Activities',
        width: 501.2,
        height: 250
    };

    var chart = new google.visualization.PieChart(document.getElementById('piechart'));

    chart.draw(data, options);
};

//Function to draw table 
function drawTable() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('number', 'Salary');
    data.addColumn('boolean', 'Full Time Employee');
    data.addRows([
        ['Mike', {v: 10000, f: '$10,000'}, true],
        ['Jim', {v: 8000, f: '$8,000'}, false],
        ['Alice', {v: 12500, f: '$12,500'}, true],
        ['Bob', {v: 7000, f: '$7,000'}, true]
    ]);

    var table = new google.visualization.Table(document.getElementById('table_div'));

    table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
}

//Function to initialize everything 
function init(){

    drawTable(); 
    drawChart();

}

</script>
</html>

You'll forgive me for skipping the chart with JSON data though :p