Adding charts to apps has always been a problem for developers. There isn’t an easy solution that allows for simple integration of charts in a BlackBerry 10 app. To solve this problem I have developed, and added to the Cascades examples on GitHub, a project that shows how to insert a chart with a few simple steps, allowing the possibility of reusing existing code. The type of charts available are:
- Polar Area
- Pie & Doughnut
In the WebView event onLoadingChanged the function just created will be called to generate the chart when the HTML page loads.
- The HTML page catches the event from the attached function with navigator.cascades.onmessage and creates the chart with the data decoded from the received JSON string.
- Optionally, the HTML page can return a Base64 format string that encodes the image of the chart.
We mentioned how the HTML page response sent back to the WebView may have several uses. Indeed, in some situations, it’s necessary to get the image of the chart just created to save or use it inside the app. For this we can use toBase64Image() a method, available from the ChartJS library, that encodes the image in a Base64 string.
In this way, it’s possible to use the image inside the app or to share it.
I’ve created an example project in the Cascades-Community-Samples on GitHub with the name ChartsForBB10. The app is composed of 7 Tabs, 6 of them for the creation of each supported chart type, and the seventh Tab for viewing custom charts and the optional saving function for each chart.