Creating Charts for Titanium Using RaphaelJS

Creating Charts for Titanium Using RaphaelJS

June 26, 2011

I needed a way to display charts and graphs in a recent Appcelerator application. Without a native charting API that meant digging around some solutions online and trying to implement something that was both open source and preferably, vector-based. I could have used Google Charts, which is free, however this solution would have meant my apps needed to be online everytime I wished to generate a chart - something I definitely didn't want. Plus, from prior experience, I was fairly sure that Google Charts returned a generated JPG or PNG file at the requested size - not great for zooming in when viewed on a phone or iPad.

This brought me straight around to RaphaelJS - which has a charting module, is MIT licensed, and most favourably can be packaged along with my app and can generate charts without a need for a constant Internet connection. I had seen Raphael's creater, Dmitry Baranovskiy, give a presentation about it at WebDU in 2010 and was impressed by its power and brilliant vector implementation; I'd been waiting for a chance to use it in a project ever since.

Here's the process I used to get it working in my own Titanium project, note that if you want to just download my sample source I have already included the main RaphaelJS and Charting libraries along with the pie chart javascript file as well:

1) Download the main RaphaelJS library from http://raphaeljs.com/ (Direct link: http://github.com/DmitryBaranovskiy/raphael/raw/master/raphael-min.js). 

2) Download the main Charting library from http://g.raphaeljs.com/ (Direct link: http://github.com/DmitryBaranovskiy/g.raphael/blob/master/g.raphael-min.js?raw=true) and any other charting libraries you wish to use. For this example I am just implementing the PieChart, which is here: http://github.com/DmitryBaranovskiy/g.raphael/blob/master/g.pie-min.js?raw=true

3) Create a new project in Titanium Developer or open an existing one, and put your downloaded files into your Resources directory. You could put them into a subfolder if you wish, but bear in mind you'd have to ensure your references in the following steps are correct.

4) The next step is to rename your 'raphael-min.js' file to something like 'raphael-min.lib'. The main reason here is that if your file is a known javascript file (as in it ends in '.js'), the JSLint validator in Titanium will try to validate the RaphaelJS library and fail, causing Titanium to lock up - meaning you won't be able to run your app! 

5) Create a WebView in your app, referencing an external HTML file which we will call 'chart.htm'. 

 

6) Create a new HTML file and put it into your Resources directory, and name it 'chart.htm'. Use the following code in your new HTML file to reference the RaphaelJS libraries and create a Pie Chart. 

 

7) Run the app and you should see a RaphaelJS generated Pie Chart appearing within the webview on your app! 

 

Note: Webviews can be expensive in processor terms, however not only is this a easy solution to implement for charting on Appcelerator, but the Webview allows the user to pinch-zoom and scroll through a larger version of the chart without you having to do any extra work. 

 

Download

You can download the full source for this tutorial from here: download source.