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.
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.
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.