code meets music

There are a lot of very good Javascript libraries around at the moment, and while the variety is certainly a good thing, it’s a shame that there is so much duplicated effort.

I’ve been using Prototype (and Scriptaculous) for quite a while now and I like it. I genuinely feel now that I understand how it works, and I’m comfortable using it. Recently though, there have been a few occasions where my life would have been easier, if only I’d been using Mochikit.

Most recently, the only decent newsticker I could find (that met client requirements…grr) was reliant on Mochikit. Fortunately the reliance was quite small, and I was able to convert it to use prototype instead.

A while ago, I was asked to look into ways of presenting graphs and charts for the web application I work on. I came across a rather nifty looking javascript solution called Plotkit, but after discovering it relied on the Mochikit library, it got put on the back burner and we’re currently using a Flash-based solution, as it ticks all the ‘pretty’ boxes.

At the end of last week, my attention was drawn to plotr, a prototype-based version of Plotkit, and I got very excited.

My current plan is not to rip out the Flash charts, but instead give the users the choice over which rendering method should be used, with the data retrieval and calculations remaining the same. The Flash files are fed data by providing them with a url to an XML file that contains the necessary data points and config options, and having plotr working in a similar way would probably make my life easiest.

I’ve been having a play around with the code, and I’ve had a go at extending it to allow for remote (insofar as the same-domain policy of xhr will allow…) dataset- and options-retrieval.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

Object.extend(Plotr.LineChart.prototype,{
        getRemoteDatasetAndRender: function(url) {
                var xhr_options = {
                        method: 'get'                                
                }
                xhr_options.onComplete = function(xhr) {
                        var json = eval('('+xhr.responseText+')');
                        this.addDataset(json.dataset);
                        this.setOptions(Object.extend(this.options,json.options));
                        this.render();
                }.bind(this);
                new Ajax.Request(url,xhr_options);                
        }        
});
//we won't include the axis details in the options,
// as the remote call will provide them
var options = {
        padding: {left: 30, right: 0, top: 10, bottom: 30},
        backgroundColor: '#dbdbdb',
        colorScheme: 'green'
};
var line = new Plotr.LineChart('plotr',options);
//then just pass the URL to the function
line.getRemoteDatasetAndRender('/dataset.php');

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<?php
$dataset = array(
        'ds1'=>array(
                array(0,0),
                array(1,2),
                array(2,8),
                array(3,32)
        )
);

$options = array(
        'xTicks'=>array(
                array('v'=>0,'label'=>'Mon'),
                array('v'=>1,'label'=>'Tue'),
                array('v'=>2,'label'=>'Wed'),
                array('v'=>3,'label'=>'Thur')
        )
);
$return = array(
        'dataset'=>$dataset,
        'options'=>$options
);
header("Content-type: text/json");
echo json_encode($return);
?>

I’m not really sure whether this method will be suitable for my purposes or not, I will need to try and integrate it into the actual code, but getting my thoughts down in writing seems to help me think things through, and if it’s useful to anyone else, then excellent.