SilverStripe

Google Summer of Code Fruit #8: Reporting System

Posted by Sigurd on 15 July 2007

Quin Hoxie in the hot American desert has reported in with a much-needed system for building tabular and graphical reports in SilverStripe. So far the fruits of his work are very interesting. For instance, only a single line of PHP code is needed to produce the following graph (which plots the growth of forum members, and new pages, to a site):

$html = Statistics::TrendChart(array('Member', 
'SiteTree'), 'day', 'mchart', 'Line', 'blue'); 

For those interested, the graph is not rendered as an image file nor Flash, but instead uses HTML and CSS through the use of canvas. By using simple SilverStripe reporting functions, it creates the necessary HTML and Javascript to produce the report. The above graph, for instance is the combination of using the prototype and plotr javascript libraries, and this code:

<script type="text/javascript">
var chartdata = { 
MemberSet: [[0, 2], [1, 3], [2, 3], [3, 4], [4, 5],
 [5, 6], [6, 7], [7, 8], [8, 8], [9, 9], [10, 11], 
[11, 12], [12, 15], [13, 15], [14, 15], [15, 15], 
[16, 15], [17, 15], [18, 15], [19, 15], [20, 15], 
[21, 15], [22, 15], [23, 15], [24, 15], [25, 15], 
[26, 15], [27, 15], [28, 15], [29, 15], [30, 15], []],
SiteTreeSet: [[0, 0], [1, 0], [2, 0], [3, 0], [4, 0],
[5, 0], [6, 0], [7, 0], [8, 0], [9, 1], [10, 1],
[11, 1], [12, 2], [13, 2], [14, 2], [15, 2],
[16, 2], [17, 2], [18, 2], [19, 2], [20, 2], [21, 2],
[22, 2], [23, 2], [24, 2], [25, 2], [26, 2], [27, 2],
[28, 2], [29, 2], [30, 2], []],

};

var options = {
    padding: {left: 30, right: 0, top: 10, bottom: 30},
    backgroundColor: '#cccccc',
    colorScheme: 'blue',

xTicks: [{v:0, label:'1'}, {v:1, label:'2'}, 
{v:2, label:'3'}, {v:3, label:'4'}, {v:4, label:'5'},
{v:5, label:'6'}, {v:6, label:'7'}, {v:7, label:'8'},
{v:8, label:'9'}, {v:9, label:'10'}, {v:10, label:'11'},
{v:11, label:'12'}, {v:12, label:'13'},
{v:13, label:'14'}, {v:14, label:'15'},
{v:15, label:'16'},
{v:16, label:'17'}, {v:17, label:'18'},
{v:18, label:'19'}, {v:19, label:'20'},
{v:20, label:'21'}, {v:21, label:'22'},
{v:22, label:'23'}, {v:23, label:'24'},
{v:24, label:'25'}, {v:25, label:'26'},
{v:26, label:'27'}, {v:27, label:'28'},
{v:28, label:'29'}, {v:29, label:'30'},
{v:30, label:'31'}, ]
};

var chart = new Plotr.LineChart('chart',options);
        chart.addDataset(chartdata);
        chart.render();
        chart.addLegend($('chart_legend'));

</script>

We look forward to ending up with a number of great reports, and a well documented, extendable reporting system, for the v2.1 release! Graphs from the official plotr site are shown below to illustrate what may be possible...

2 Comments. Add Yours Tags: gsoc, reporting