Implementing Charts in Titanium Appcelerator
Posted By : Ajit Jati | 23-Aug-2013
Charts in mobile devices is a rare requirement. Though its a challenging task for the developers to implement the required chart and graphs in a particular mobile platform as well.
The ti.charts module available in Appcelerator marketplace is for iOS only. I have been searching around for a lightweight solution that could be easily implemented on both Android and iOS and fulfill the requirements for most common of charts, bar, line, pie, etc. The simplest way to do this for me was to use a charting javascript library within a web view.
Now there are a lot Charting javascript libraries available but none can provide the lightweight and easy way to design and animate the chart UI. After a long effort I got the solution that was exactly what i want is ChartJS. Here is how to implement a chart into a webView, while also passing custom data points.
- Add the Chart.js library file into your project located Here.
- Now replace the app.js file with the following code
app.js
var win = Titanium.UI.createWindow({
backgroundColor : '#fff'
});
var chartView = Ti.UI.createWebView({
height : 250,
width : "100%",
left : 0,
top : 0,
showScrollbars : false,
touchEnabled : false,
url : 'chart.html',
backgroundColor : "gray"
});
win.add(chartView);
var button = Ti.UI.createButton({
title : 'Generate Chart',
top : 270,
});
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));
setTimeout(function() {
Ti.App.fireEvent('renderChart', options);
}, 400);
});
win.open();
When the button is clicked, we create an object called options. 5 random numbers between 1 and 1000 are generated and assigned to the options.data array. Ti.App.fireEvent is then called,then we need to have a corresponding event listener with the same name. Remeber if we don't pass options of our own defined then the Chart will be created with its default parameters defined in chart.js
- Now create a file chart.html with following code
chart.html
<html>
<head>
<title>Chart</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<script src="Chart.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div>
<canvas id="myChart"> </canvas>
</div>
<script>
Ti.App.addEventListener('renderChart', function(options) {
Ti.API.info('rendering chart');
var canvas = document.getElementById('myChart');
canvas.width = 200;
canvas.height = 190;
var data = {
labels : ["Day1","Day2","Day3","Day4","Day5"],
datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
data : options.data
},
]
}
Ti.API.info(options);
var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx).Line(data,options);
//Ti.API.info(ctx);
});
</script>
</body>
</html>
Hope it helps. Cheers !
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Ajit Jati
Ajit is an proficient Project Manager specializing in Mobile technologies. He possesses extensive development experience in Titanium, Android, Kotlin, Roku, and PHP. Ajit has successfully delivered various projects in the OTT, AR/VR, and Travel industries. His skill set includes developing and maintaining project plans, schedules, and budgets, ensuring timely delivery while staying within the allocated budget. He excels in collaborating closely with clients to define project scope and requirements, establish project timelines and milestones, and effectively manage expectations. He conducts regular project status meetings, ensuring effective communication and providing updates to clients and stakeholders on project progress, risks, and issues. Furthermore, Ajit takes on the role of a coach and mentor for team,offering guidance on project management best practices and assisting in their skill development.