Creating Charts with Titanium Appcelerator
Hey there! So, I found this awesome thing called the ti.charts module in the Appcelerator marketplace, but here’s the thing – it’s only for iOS. Now, I needed a solution that could work on both Android and iOS and give me all the common types of charts like bar, line, and pie. So, what did I do? I decided to use a charting JavaScript library within a web view. Simple and effective!
- First of all, it’s fast. No lagging here.
- And guess what? No jQuery dependency. Woohoo!
- It even has cool animations when you first draw the chart.
- And let’s not forget about the good default styling. Looks great out of the box.
Now, there are quite a few JavaScript charting libraries out there, but not many that tick all the boxes like this one. I mean, a lot of them rely on jQuery. And let me tell you, I’ve tried a few of those before, and they just don’t cut it. They tend to slow down when you have more data points, and I’m talking about not even a whole lot of data points. Plus, web views are pretty resource-intensive components, so keeping things simple is definitely the way to go.
But hey, after weeks of searching, I finally stumbled upon a gem – ChartJS. And let me show you how to implement it in your project and even customize the data points.
So, in this project, we’ve got 3 files (aside from the automatically generated ones):
app.js
var win = Titanium.UI.createWindow({
backgroundColor: ‘#fff’
});
var chartView = Ti.UI.createWebView({
height: 200,
width: 320,
left: 0,
top: 0,
showScrollbars: false,
touchEnabled: false,
url: ‘/source/chart.html’
});
win.add(chartView);
var button = Ti.UI.createButton({
title: ‘Regenerate’,
top: 220
});
win.add(button);
button.addEventListener(‘click’, function() {
var options = {};
options.data = new Array(
Math.floor(Math.random() * 1001),
Math.floor(Math.random() * 1001),
Math.floor(Math.random() * 1001),
Math.floor(Math.random() * 1001),
Math.floor(Math.random() * 1001)
);
Ti.App.fireEvent(‘renderChart’, options);
});
win.open();
Alright, let’s break it down. We start off by creating a window and a web view for the chart. And hey, we even have a button to redraw the graph with new data. When you click the button, we generate an object called options. This object contains an array of 5 random numbers between 1 and 1000. Cool, right?
Now, here’s the fun part. We use the Ti.App.fireEvent function to call an event called “renderChart”. Hold on, though. We need to have a corresponding event listener with the same name somewhere in our code. And guess what? The options object we created earlier? We pass it as the second argument to the fireEvent function. I know, I know, why didn’t I just pass the array directly? Well, it won’t work like that. We need to attach the array to an object so we can pass it along to the event listener inside our HTML file. Makes sense, right?
Oh, by the way, this communication between the webView and Titanium itself? Yeah, it’s necessary. They need a way to talk to each other, and this is how it’s done.
views/chart.html
Chart
Ti.App.addEventListener(‘renderChart’, function(options) {
Ti.API.info(‘rendering chart’);
var canvas = document.getElementById(‘myChart’);
canvas.width = 310;
canvas.height = 190;
var data = {
labels: [“Jan”, “Feb”, “Mar”, “Apr”, “May”],
datasets: [
{
fillColor: “rgba(220, 220, 220, 0.5)”,
strokeColor: “rgba(220, 220, 220, 1)”,
data: options.data
}
]
};
var ctx = document.getElementById(“myChart”).getContext(“2d”);
new Chart(ctx).Bar(data);
});
So, here’s our charting JavaScript code. It’s inside the eventListener for the “renderChart” event. Remember, this is triggered when we call the fireEvent function from our Titanium code. Oh, and see how we set the width and height of the canvas in JavaScript instead of using HTML attributes? This is to make sure that the canvas is cleared out when we generate a new chart with new data. Neat, huh?
Oh, one last thing. The default file extension for our charting library is .js. But using that extension can cause conflicts with Titanium. So, just make sure you rename your JavaScript files that are being called from a webView. I personally prefer using .wvjs, but you can use whatever you like.
Alright, that’s it! Now you have a lightweight solution for displaying charts in your Titanium Appcelerator app. Pretty nifty, huh? Have fun charting!
