Web Development

Getting ChartJS to work in Ionic Creator

Guilty

Ok, I admit it, I am a HUGE fan of the Ionic Creator – yes it’s a prototyping tool first and foremost and yes it’s limited using Cordova plugins so you can’t get everything to work in the WYSIWYG editor but as a developer with no design skills whatsoever it is an incredibly handy tool to have at my disposal!

As a data-nerd I have a strange love affair wth dashboards and charts and wanted to see if I could get the popular ChartJS framework working inside Ionic Creator, bearing in mind that Angular operates on a Model-View-Controller setup rather than the standard web pages, I figured this wouldn’t be as easy as CodePen.

Going Pro

I’m not entirely sure if it’s required, but it’s worth noting, I use the ‘Pro’ version of Creator – it’s incredibly sad for me to admit but prototyping potential apps is quite therapeutic and helps me grow from a UI/UX perspective. The example I’m using today is actually for a rather basic incremental tapping RPG I am working on (because there aren’t enough of those already!!)

Dependencies

In order to get pretty charts working, you need to download the following two JS Libraries;

Once downloaded, fire up your web browser and navigate to the Ionic Creator. In the bottom right corner, you have the file browser – you want to create a new JS file by clicking the green + icon – this will give you an ‘untitled.js’ clean slate to work from.

The idea is to insert the downloaded JS files into two newly created ‘Other JS’ files – I opened both files in Sublime and copied and paste (overwriting the contents) each one into their separate files – here’s a screenshot to illustrate what I mean;

Once you have added both JS files into the Creator, make sure they are included by clicking “Code Settings” – the middle button in the top right corner of the code editor at the bottom of the page.

Here are screenshots of my Code Settings (You can disregard the Ionic Cloud JS files if you wish – I’m using that to store and authenticate users and data). Be sure to add ‘Chart.JS’ as an Angular Module!

Uncharted

So open the page you want the chart to be on and drag and drop an HTML component on the page – below is an example of what I put for a Doughnut Chart – you can refer to the Angular Chart Documentation to edit what chart you want.

1
2
3
4
5
6
7
8
9
<div id="canvas-holder" style="width:60%; margin:0 auto;">
<canvas id="doughnut" class="chart chart-doughnut"
value="HPRing"
chart-data="data" 
chart-labels="labels" 
chart-colors="colors"
options="{showTooltip: false}" >
</canvas>
</div>

Populating the data

In Angular Chart you can specify settings by using the data-tags, in this example we have told the chart that chart-data will be pulled from the variable “data”, the chart labels (chart-label) from the variable “labels” and colors will come from “colors” (points for an original naming convention). Bring your attention to the code editor at the bottom of the page, here is where we will set our data!

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
// The following is the constructor function for this page's controller.
// You can include any angular dependencies as parameters for this function
// TIP: Access Route Parameters for your page via $stateParams.parameterName
function ($scope, $stateParams, $ionicUser, $ionicAuth) {
Chart.defaults.global.tooltips.enabled = false;
    $scope.colors = ['#00ff66', '#ff3300'];
    $scope.labels = ["Current HP", ""];
    $scope.data = [100, 0];
//  $scope.data = [$scope.CurrentHPCircle, $scope.LostHP];
} 

Line 5 in the above code removes the tool-tips that float about the chart, they have their place but not here 🙂

Lines 6-8 are where we set the charts data!

The colors are pretty obvious – hex codes for Green and Red.

I’m going to jump straight to ‘data’ and explain my reasoning behind this – the commented out code might explain it better but in the final engine I want the users health to be represented with the colour green, and the difference between maximum health and current health to be represented by the colour red.

I am only focusing on getting that chart working for now but will cover how I went about decreasing and increasing values in another post. For now, its hard coded at 100,0

Below is a GIF of the ChartJS and me testing the damage side of things!

Michael Burdett
Web & App Developer