Google Pie-charts

Question

JavaScript code to add a 3D Pie chart(Google charts).The Pie-chart doesn't shows in the view.How to solve it ?

Javascript:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

    <script type="text/javascript">
        $(function() {
            <?php
                $bookingData = array();
                $i=0;
                foreach($bookingCounts as $booking){
                $bookingData[$i]['label'] = $booking['Name'];
                $bookingData[$i]['data'] = $booking['total'];
                $i++;
                }
            ?>
            var data = <?php echo json_encode($bookingData, JSON_NUMERIC_CHECK);?>;
            console.log(data);

    var options = {
          title: 'Booking',
          is3D: true,
        };

        var chart = new google.visualization.PieChart(document.getElementById('flot-pie-chart'));
        chart.draw(data, options);


});

My View is:

<div class="flot-chart">
    <div class="flot-chart-content" id="flot-pie-chart">
    </div>
 </div>

Answer 1

Something I noticed is that you do not seem to be adding column headers. Simple to do this by just doing in your script tag:

 var data = new google.visualization.DataTable();
     data.addColumn('Type', 'ColName');
     data.addRows([ <?php PHP ?> ]); 

In the code I have posted below, you would need to do a few things.

First you would need column headers. Second, you would need to do you JSON_ENCODE & your query. Third, change the views, I have my google chart only select rows 1, 2 & 3, while omitting row 0. Also change chart type obviously. Lastly in the options add is3D: true.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
function drawChart(test_input) {
    var data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('string', 'Date');
        data.addColumn('number', 'Test_Val_A');
        data.addColumn('number', 'Test_Val_B');
        data.addRows([
            <?php
                $dbName = "test_db";
                $config = parse_ini_file("myconfigfile.ini",true);
                $dbUser = $config["mydb"]["db_user"];
                $dbServer = $config["mydb"]["db_ip"];
                $dbPassword = $config["mydb"]["db_pass"];

                $con = mysql_connect($dbServer, $dbUser, $dbPassword);

                if (!$con) {
                    die('Could not connect: ' . mysql_error());
                }

                mysql_select_db($dbName, $con);
                    $sql = mysql_query("SELECT * FROM MyTable where Name like '$test_input'");
                $output = array();

                while($row = mysql_fetch_array($sql)) {
                    // create a temp array to hold the data
                    $temp = array();

                    // add the data
                    $temp[] = '"' . $row['Name'] . '"';
                    $temp[] = '"' . $row['Date'] . '"';
                    $temp[] = (int) $row['Test_Val_A'];
                    $temp[] = (int) $row['Test_Val_B'];
                    // implode the temp array into a comma-separated list and add to the output array
                    $output[] = '[' . implode(', ', $temp) . ']';
                }
                // implode the output into a comma-newline separated list and echo
                echo implode(",\n", $output);

                mysql_close($con);
            ?>
        ]);
        var view = new google.visualization.DataView(data);
        view.setRows(data.getFilteredRows([
            {column: 0, value: test_input}
        ]));
        view.setColumns([1,2,3]);

        var options = {
            tooltip: {
                trigger: 'both',
            },
            vAxis: { 'title': 'Volume' },
            hAxis: { slantedText: true},
            crosshair: { trigger: 'both'},
            width: 1900,
            height: 400
        };

        var chart = new google.visualization.LineChart(document.getElementById('Whatever_my_id_is'));
        chart.draw(view, options);
    }
</script>

Answer 2

You are using jQuery without supporting it (with the $() function); a quick fix would be adding this element before your main script:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

More on importing jQuery.

However, if that's all the jQuery you're going to be using, I recommend substituting $(function() { /* your code here */ } with a vanilla JavaScript alternative, like:

document.addEventListener("DOMContentLoaded", function(event) { 
  /* your code here */
});

More on this.

Answer 3

Javascript:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
    <?php
        $bookingData = array();
        $i=1;
        $bookingData[0][0] = 'Task';
        $bookingData[0][1] = 'Hours per Day';
        foreach($bookingCounts as $booking){
        $bookingData[$i][0] = $booking['Name'];
        $bookingData[$i][1] = $booking['total'];
        $i++;
        }
    ?>

    var data = <?php echo json_encode($bookingData, JSON_NUMERIC_CHECK);?>;
    console.log(data);
    var data2 = google.visualization.arrayToDataTable(data);

    var options = {
      title: '',
      is3D: true,
    };

    var chart = new google.visualization.PieChart(document.getElementById('flot-pie-chart'));
    chart.draw(data2, options);


};