To the rest of my Blog

sdInteractiveChartPlugin Examples...

Current Version: 0.5.0

sdInteractiveChartPlugin is a plugin for the PHP Symfony framework and allows you to use Google's Visualization API to create Interactive Javascript charts without writing any javascript. It simplifies the creation of charts and makes the code a lot neater, which is especially useful if your planning to include more than one chart in a page.

This page is designed to show you how simple it is to create fancy looking charts using Google's Visualization API and how little php code you have to write using this Symfony plugin.

Examples:

Area Chart

All Chart Options: http://code.google.com/apis/visualization/documentation/gallery/areachart.html

 
<?php
use_helper('sdInteractiveChart');
 
$chart = InteractiveChart::newAreaChart();
$chart->setWidthAndHeight('400', '240');
$chart->setDataColors(array('#aa0000'));
$chart->setBaselineColor('#ccc');
$chart->inlineGraph(array('hits' => array(1,9,5)), array('Monday', 'Tuesday', 'Wednesday'), 'chart_div');
$chart->render();
?>
 
<div id="chart_div"></div>

Annotated Time Line

All Chart Options: http://code.google.com/apis/visualization/documentation/gallery/annotatedtimeline.html

 
<?php
use_helper('sdInteractiveChart');
 
$chart = InteractiveChart::newTimeLineChart();
$chart->setWidthAndHeight('700', '250');
$chart->setOption('thickness', 5);
// timestamps = unix timestamps (seconds since 1970, like php function time(), mktime() etc.)
$timestamps = array(1291935600,129383640,1295218800,1295823600);
$chart->inlineGraph(array('hits' => array(100,131,150,127)), $timestamps, 'chart_div');
$chart->render();
?>
 
<div id="chart_div" style="width:700px; height:250px;"></div>

Bar Chart

All Chart Options: http://code.google.com/apis/visualization/documentation/gallery/barchart.html

 
<?php
use_helper('sdInteractiveChart');
 
$chart = InteractiveChart::newBarChart();
$chart->setWidthAndHeight('400', '240');
$chart->setDataColors(array('#27F943'));
$chart->setBaselineColor('#ccc');
$chart->inlineGraph(array('hits' => array(1,9,5)), array('Monday', 'Tuesday', 'Wednesday'), 'chart_div');
$chart->render();
?>
 
<div id="chart_div"></div>

Column Chart

All Chart Options: http://code.google.com/apis/visualization/documentation/gallery/columnchart.html

 
<?php
use_helper('sdInteractiveChart');
 
$chart = InteractiveChart::newColumnChart();
$chart->setWidthAndHeight('600', '250');
$chart->setDataColors('#4FB0FF');
$chart->setBaselineColor('#ccc');
$chart->setVerticalAxisExtremeValues(0, 100);
$chart->inlineGraph(array('Downloads' => array(76,34,55,78,22)), array('Monday', 'Tuesday', 'Wednesday','Thursday','Friday'), 'chart_div');
$chart->render();
?>
 
<div id="chart_div"></div>

Pie Chart

All Chart Options: http://code.google.com/apis/visualization/documentation/gallery/piechart.html

 
<?php
use_helper('sdInteractiveChart');
 
 $chart = InteractiveChart::newPieChart();
    $chart->setWidthAndHeight('600', '450');
    $chart->setDataColors(array('#4FB0FF','#F43350','#13F444','#F4AD13','#08DDDD','#F927E4'));
    $chart->setOption('title', 'Visits By Browser');
    $chart->inlineGraph(array('Downloads' => array(1831,1038,322,247,106,29)),
        array('Firefox', 'Chrome', 'IE','Safari','Opera','Mozilla'), 'chart_div');
    $chart->render();
?>
 
<div id="chart_div"></div>

Line Chart

All Chart Options: http://code.google.com/apis/visualization/documentation/gallery/linechart.html

 
<?php
use_helper('sdInteractiveChart');
 
 $chart = InteractiveChart::newLineChart();
    $chart->setWidthAndHeight('900', '400');
    $chart->setDataColors(array('#4FB0FF','#F43350'));
    $chart->setOption('title', 'Site Visits and Downloads');
    $data = array(
        'number of requests' => array(1500,2103,4012,4342,5001,5117,4899,4761,4333),
        'Downloads' => array(200,213,348,344,501,527,481,325,289)
    );
    $times = array('0800','0900','1000','1100','1200','1300','1400','1500','1600');
    $chart->inlineGraph($data, $times, 'chart_div');
    $chart->render();
?>
 
<div id="chart_div"></div>

Scatter Chart

All Chart Options: http://code.google.com/apis/chart/interactive/docs/gallery/scatterchart.html

 
<?php
use_helper('sdInteractiveChart');
 
 $chart = InteractiveChart::newScatterChart();
    $chart->setWidthAndHeight('900', '400');
    $chart->setDataColors(array('#F49300','#99CC00'));
    $chart->setOption('title', 'Bottles of beer/wine drunk vs height');
    $data = array(
        'height (cm)' => array(165,158,159,200,189,191,140,163,171,173),
              'Beers' => array(5,2,7,3,8,8,4,9,2,3),
    'Bottles of Wine' => array(1,1,3,2,1,0,2,2,1,3)
    );
    $chart->inlineGraph($data, null, 'chart_div');
    $chart->render();
?>
 
<div id="chart_div"></div>