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...
Post your comment
Comments for this post are now closed.
Very clever implementation, Quin. Awesome!
Posted on 15 Jul 2007 by Brian Calhoun
Great job Quin!
Keep up good work! :)
- Elijah
Posted on 15 Jul 2007 by Elijah Lofgren
Comments
RSS