pie-chart hell

16 views

Skip to first unread message

Mike L

unread,

May 19, 2020, 9:34:05 PM5/19/20

to Google Visualization API

Hi,

I am trying to display a pie chart in a generated report.

The code currently used displays X / 100 (38 /100)



<tr><td><?php echo __( 'Average Pagespeed', 'mainwp-pro-reports-extension' ); ?></td><td>[pagespeed.average.desktop] / 100</td></tr> [/remove-if-empty]

<?php var_dump(do_shortcode( '[pagespeed.average.desktop]' )); ?> gives me string(27) "38"

So I try to make the pie-chart like this

<div id="piechart"></div> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> // Load google charts google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); <?php $a = do_shortcode( '[pagespeed.average.desktop]' ); ?> // Draw the chart and set the chart values function drawChart() { var data = google.visualization.arrayToDataTable([ ['Work', <?php echo $a; ?>], ['test', 100], ]); // Optional; add a title and set the width and height of the chart var options = {'title':'My Average Day', 'width':550, 'height':400}; // Display the chart inside the <div> element with id="piechart" var chart = new google.visualization.PieChart(document.getElementById('piechart')); chart.draw(data, options); } </script>

But nothing shows ....

If I try

<!DOCTYPE html> <html lang="en-US"> <body> <h1>My Web Page</h1> <div id="piechart"></div> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> // Load google charts google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); <?php $a = do_shortcode( '[pagespeed.average.desktop]' );; $b = 100 - (int)$a; $c = 4; $d = 2; $e = 8; ?> // Draw the chart and set the chart values function drawChart() { var data = google.visualization.arrayToDataTable([ ['Task', 'Hours per Day'], ['Work', <?php echo (int)$a; ?>], ['Eat', <?php echo $b; ?>], //['TV', <?php echo $c; ?>], //['Gym', <?php echo $d; ?>], //['Sleep', <?php echo $e; ?>] ]); // Optional; add a title and set the width and height of the chart var options = {'title':'My Average Day', 'width':550, 'height':400}; // Display the chart inside the <div> element with id="piechart" var chart = new google.visualization.PieChart(document.getElementById('piechart')); chart.draw(data, options); } </script> </body> </html>