Google Chart Example

From nuBuilderPro
Jump to: navigation, search

Here is an example that can be used to create a Google Chart in a nuBuilderPro iFrame Object

Create some PHP Code

Chart1.PNG

PHP Code Sample (to be placed in the PHP Code Tab)

<source lang="php">

ob_start(); print 'hi';

$chart_data = array(); $s = "


SELECT count(*) as c, dri_name as d

FROM driver GROUP BY dri_name;

";

$t = nuRunQuery($s); $chart_data[] = "['Driver', 'Trips']";

while($r = db_fetch_object($t)){

  $chart_data[] = "['$r->d', $r->c]";

}

$js_string = implode(',', $chart_data);

$gg = "

<html>

 <head>
   <script type='text/javascript' src='https://www.google.com/jsapi'></script>
   <script type='text/javascript'>
     google.load('visualization', '1', {packages:['corechart']});
     google.setOnLoadCallback(drawChart);
     function drawChart() {
       var data = google.visualization.arrayToDataTable([
       $js_string		

// -- replaced with js_string // ['Task', 'Hours per Day'], // ['Work', 11], // ['Eat', 2], // ['Commute', 2], // ['Watch TV', 2], // ['Sleep', 7]

       ]);
       var options = {
         title: 'My Daily Activities'
       };
       var chart = new google.visualization.PieChart(document.getElementById('piechart'));
       chart.draw(data, options);
     }
   </script>
 </head>
 <body>
 </body>

</html>

";


ob_end_clean(); echo $gg;

</source>

SQL For Recreating Sample Data

<source lang="sql">


CREATE TABLE IF NOT EXISTS driver (

 driver_id varchar(25) COLLATE utf8_unicode_ci NOT NULL DEFAULT ,
 dri_name varchar(200) COLLATE utf8_unicode_ci NOT NULL,
 PRIMARY KEY (driver_id)

) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

INSERT INTO driver (driver_id, dri_name) VALUES ('53b5099282a8df6', 'Darryl'), ('53b5099282a8df61', 'Darryl'), ('53b509bf71d0f63', 'Kerry'), ('53b509bf71d0f6312', 'Kerry'), ('53b509bf71d0f632', 'Kerry'), ('53b509e72660832', 'Tom'), ('53b509e726608321', 'Tom'), ('53b509e726608322', 'Tom'), ('53b50a077f54e042', 'Clayton'), ('53b50bcf443c1c8', 'Butch'), ('53b50bcf443c1c81', 'Butch'), ('53b50bcf443c1c812', 'Butch'), ('53b50bcf443c1c82', 'Butch'); </source>


Add PHP in the PHP Code

Create iFrame Object

Chart2.PNG


Chart Result

Chart3.PNG