Displaying Charts with Titanium? A Practical Guide

Displaying charts with Titanium is done by integrating a charting library into your Titanium app, then rendering chart views within your app’s UI. You can choose from native module libraries like Titanium.UI.ListView-based custom views, or more commonly, use a WebView with a JavaScript charting library like Chart.js. This guide covers the main approaches, their pros and cons, and how to get started.

Formula

The calculator above computes your average pace and speed for a run or ride. The formulas are:

• Average pace (min/km) = Time (min) ÷ Distance (km)
• Average speed (km/h) = Distance (km) ÷ (Time (min) ÷ 60)

Where Time is in minutes and Distance in kilometers. The pace is expressed as minutes per kilometer, and speed as kilometers per hour.

Worked Example

Using the default values: Time = 30 min, Distance = 5 km.

1. Pace = 30 ÷ 5 = 6.00 min/km
2. Speed = 5 ÷ (30 ÷ 60) = 5 ÷ 0.5 = 10.00 km/h

The calculator returns a pace of 6.00 min/km and a speed of 10.00 km/h.

Why Use a Charting Library?

Titanium (now part of Axway’s Appcelerator) does not include a built-in chart component. To display charts, you must either build custom views or integrate a third-party library. The most common approach is to use a WebView with a JavaScript charting library, because it gives you access to a huge ecosystem of chart types (line, bar, pie, scatter, etc.) without writing native code. Alternatively, you can use native modules that wrap native charting libraries (like MPAndroidChart for Android or Charts for iOS), but these require separate modules for each platform and more setup.

WebView + Chart.js (Most Popular)

This method involves creating an HTML file with Chart.js (or another library like D3.js or ECharts) and loading it into a Titanium WebView. You pass data from your Titanium app to the WebView via evalJS() or by setting a URL with query parameters.

1. Create an HTML file with your chart code and place it in your app/assets folder.
2. In your Titanium controller, create a Ti.UI.WebView and set its url to the HTML file.
3. After the WebView loads, use webView.evalJS() to pass data or update the chart.

For example, to update a Chart.js line chart with new data:

webView.evalJS('updateChart(' + JSON.stringify(data) + ')');

The HTML file would have a function updateChart() that updates the chart’s data and calls chart.update().

Native Modules (Performance)

If you need high performance (e.g., real-time streaming data) or a native look and feel, you can use native modules. For iOS, you might use the ti.charts module (if still maintained) or write your own using the Charts framework. For Android, MPAndroidChart is a popular option, and you can wrap it in a Titanium module. This approach requires more development effort, but it avoids the overhead of a WebView and provides smoother interactions.

Choosing the Right Approach

Consider these factors:

• Chart complexity: For simple line/bar charts, WebView is fine. For complex interactive charts, WebView with a mature library is easier.
• Performance: If you have thousands of data points or need 60fps animations, native modules are better.
• Development time: WebView is faster to implement, especially if you know JavaScript web charting.
• Offline capability: Both work offline, but WebView requires bundling the HTML/JS files.

Common Problems and Solutions

Here are typical issues you might encounter:

• Blank WebView: Ensure the HTML file is in the correct folder and the path is correct. Use a relative path like '/app.js' or '/chart.html'.
• Data not updating: Make sure you call evalJS() after the WebView has loaded (listen to the load event).
• Touch events conflict: If the WebView intercepts touches, set touchEnabled: false on the WebView and handle touches on a parent view if needed.
• Memory leaks: WebViews can leak if not closed properly. Null out references and remove the WebView when done.

Comparing WebView vs Native Modules

Here’s a quick comparison:

• Setup: WebView is simpler; native modules require more configuration.
• Chart types: WebView offers more variety; native modules may be limited.
• Performance: Native modules are faster and smoother.
• Maintenance: WebView is easier to update (just change HTML/JS); native modules require rebuilding.
• Platform consistency: WebView looks the same on both platforms; native modules may look different.

Costs and Licensing

Most JavaScript charting libraries like Chart.js are open-source (MIT license) and free to use. Native modules may be open-source or commercial; check the specific module’s license. Titanium itself is open-source, but the Axway platform may have commercial licensing for enterprise support. Always verify the license for any library you use.

Safety and Accuracy

When displaying data, ensure accuracy by validating inputs and using correct units. For example, if you’re charting temperatures, be consistent with Celsius or Fahrenheit. Also, be mindful of data privacy: if you’re sending data to a WebView, it stays on-device, but if you use a remote URL, data may be transmitted. For sensitive data, keep the HTML local and avoid external requests.

Frequently Asked Questions

Can I use Titanium’s built-in ListView to create charts?

Yes, you can manually draw charts using views and the drawing API, but it’s tedious. For simple bar charts, you could use a ListView with custom rows that have colored views of varying heights. However, this is not scalable for complex charts, and a WebView is usually easier.

How do I pass data from Titanium to the WebView?

Use the evalJS() method after the WebView has loaded. You can pass a JSON string and parse it in JavaScript. Alternatively, you can set the url to a data URI, but that’s limited in size.

Is it possible to use D3.js in Titanium?

Yes, you can include D3.js in your HTML file just like any other JavaScript library. D3 is powerful for custom visualizations, but it has a steeper learning curve. Make sure the D3 version is compatible with the WebView’s JavaScript engine.

What about using native charts like MPAndroidChart?

You can use MPAndroidChart by creating a Titanium module that wraps it. This gives you native performance and access to many chart types. However, you’ll need to write Java code and build the module for Android. For iOS, you can similarly wrap the Charts library.

Why is my WebView chart not showing on Android?

Check that the WebView’s url is correct and that the HTML file is included in the build. Also, ensure that JavaScript is enabled in the WebView (it is by default). If you’re using a local file, make sure the path is absolute or relative to the app’s resources.

Can I create interactive charts that respond to touch?

Yes, Chart.js and other libraries support tooltips and click events. In a WebView, these events are handled within the HTML/JS. You can then communicate back to Titanium using Ti.App.fireEvent() or by adding a Ti.App.addEventListener in the WebView context.

Related

• Outlook “Message Has Been Changed” Error: How to Fix It
• Cybersecurity Facts and Stats: What the Numbers Mean
• Is Thumbtack Safe? How to Hire With Confidence

in t | Time (min) | min | 30 | 0
in d | Distance (km) | km | 5 | 0 | 100000
out pace | Average pace | min/km | t / d | 2
out speed | Average speed | km/h | d / (t / 60) | 2