Google Chart, PHP, JSON Blank page

46 views
Skip to first unread message

Ron Allen Aduna

unread,
Dec 23, 2021, 5:30:01 PM12/23/21
to Google Visualization API
What am I doing wrong? Google chart appears as blank. I'm trying to display a multi dimension line chart using google chart.

I need to display this multi level associative array in googlechart. I'm using PHP. I combined two SQL query to a single json file so that I could display this year and last year data but I can't display it in google chart. The page appears blank.

Here's the URL for the chart, https://myndsyn.com/lb-admin/sample

Here's a sample JSON file
```
{"data1":[{"num":"1","rdate":"1"},{"num":"1","rdate":"2"},{"num":"1","rdate":"3"},{"num":"1","rdate":"4"},{"num":"1","rdate":"5"},{"num":"1","rdate":"6"},{"num":"2","rdate":"8"},{"num":"1","rdate":"10"},{"num":"1","rdate":"11"},{"num":"5","rdate":"12"}],"data2":[{"num2":"7","rdate2":"11"},{"num2":"8","rdate2":"12"}]}
```
**PHP file**
```
<?php require_once('../../private/initialize.php'); ?>

<?php require_login(); ?>

<?php require_once('../../private/db_config.php'); ?>
<!-- start of the HTML part that Google Chart needs -->
<script src="https://www.gstatic.com/charts/loader.js"></script>

<?php
$year = idate('Y');
//MONTH Query
//$result = mysqli_query($connection, "SELECT COUNT(id) AS num, MONTH(regdate) as month FROM customers WHERE YEAR(regdate) = $year GROUP BY MONTH(regdate) ");

//Year Query
$result_this_year = mysqli_query($connection, "SELECT COUNT(id) AS num, MONTH(regdate) AS rdate FROM customers WHERE YEAR(regdate) = $year GROUP BY MONTH(regdate)");

$result_last_year = mysqli_query($connection, "SELECT COUNT(id) AS num, MONTH(regdate) AS rdate FROM customers WHERE YEAR(regdate) = $year - 1  GROUP BY MONTH(regdate)");

//loop through the returned data
$data_this_year = array();

foreach ($result_this_year as $row_current) {
    $data_this_year[] = $row_current;
}

$data_last_year = array();

foreach ($result_last_year as $row_last) {
    $data_last_year[] = $row_last;
}
//free memory associated with result
$result_last_year->close();
$result_this_year->close();
print json_encode(['data1' => $data_this_year, 'data2' => $data_last_year]);?>

<!--Google chart-->
<script type="text/javascript">
    google.charts.load('current', {'packages':['corechart']}).then(function drawChart() {
        var num1 = [];
        var rdate1 = [];
        var num2 = [];
        var rdate2 = [];
        var data1 = [];
        var data2 =[];
        //var data_currentyear = <?php //echo json_encode($data_this_year); ?>//;
        //var data_lastyear = <?php //echo json_encode($data_last_year); ?>//;

        for(var i in data1) {
            num1.push( data1[i].num);
            rdate1.push(data1[i].rdate);
        }

        for(var x in data2) {
            num2.push( data2[x].num);
            rdate2.push(data2[x].rdate);
        }

// Current month
        var data1 = new google.visualization.DataTable();
        data1.addColumn({label: num1, type: 'number'});
        data1.addRows({label: rdate1, type: 'number'});

// Last Month
        var data2 = new google.visualization.DataTable();
        data1.addColumn({label: num2, type: 'number'});
        data2.addRows({label: rdate2, type: 'number'});



// Join data tables
        var join1 = google.visualization.data.join(data1, data2, 'full', [[0,0]], [1], [1]);


// Curved line
        var options = {
            title: '',
            curveType: 'function',
            legend: { position: 'bottom' }
        };

// Curved chart
        var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
        chart.draw(join1, options);

    }); // End bracket from drawChart
</script>
<div id="curve_chart" style="width: 1800px; height: 960px;"></div>
``` 
Reply all
Reply to author
Forward
0 new messages