Adding charts to an Ionic project

Categories

One of the great things about developing with Ionic is the range of third-party plugins and packages that can be integrated with the framework to implement different types of functionality.

Case in point: generating charts and graphs.

Let's be honest here, raw data isn't the most exciting of content to work with (unless of course you happen to be a data-mining analyst who gets off on that stuff - but we're not going to dwell there) and as human beings we tend to be heavily visually biased. We like the combination of colour, shape, layout, typography and imagery to communicate content whether that be in the form of ideas, topics, themes or messages (internet memes anyone?)

As designers and developers part of our job is to not only deliver that content but also find ways to make that more engaging for the end user. Not always an easy task when working with bland looking datasets and statistics right?

Enter ChartJS - an open source library that allows developers to render data in any of the following chart types:

Line

Bar

Radar

Doughnut

Pie

Polar Area

Bubble

Scatter

Area

Mixed

In addition to the wide range of available charts the online documentation that accompanies the software (particularly the configuration options available globally and per chart type) is also quite impressive, not to mention helpful.

Using this library I'm going to take you through developing a single page Ionic application that provides a daily breakdown of my typical technology usage and digital related tasks using the following charts:

Bar

Line

Pie

By the end of the tutorial you should see the following application being rendered to your system browser:

Ready to get started?

Let's go!

Laying the foundation

Select a location on your computer where you would normally store your digital projects and create a new Ionic project named ionic-charts that uses a blank template with the following command:

ionic start ionic-charts blank

Sit back and relax for a few minutes as this might take a while to complete.

Once the project has been generated you'll then need to install the ChartJS package using npm:

npm install chart.js --save

With that node package added to the project we now have everything we need to start developing our application.

First steps

Let's begin by fleshing out the basic skeleton for the application's logic in the ionic-charts/src/pages/home/home.ts file with the following code:

We start by importing the ViewChild Angular module so we can programmatically interact with and access the HTML elements in our page template where the charts will be situated, as well importing the Chart module from our recently installed chart.js library.

Within the HomePage class we begin by using the @ViewChild annotation to programmatically access each individual chart element in our HTML template (we'll code the markup for the application towards the end of this tutorial):

This is then followed by defining the data that will be used for each chart in the technologies array; consisting of the item key, item value, the colour for that item when rendered as an individual segment on the chart and what colour that chart segment will be displayed as when hovered over/activated by the user:

We then define the remaining public properties; the first three of which will be used as references to the individual chart types with the remaining properties used to store the data for each key/value pair from the technologies array that was defined previously:

public pieChartEl : any;
public barChartEl : any;
public lineChartEl : any;
public chartLabels : any = [];
public chartValues : any = [];
public chartColours : any = [];
public chartHoverColours : any = [];

defineChartData - Parses the data from the technologies array, pushing the value for each key into a specific array

createPieChart - Configures/generates a pie chart for the application

createBarChart - Configures/generates a bar chart for the application

createLineChart - Configures/generates a line chart for the application

The defineChartData method simply loops through the technologies array and pushes the value for each key into its own array (which will be subsequently used within each chart method when configuring the data/structure and format of that specific chart):

With the basic skeleton of the class now in place we can turn our attention to implementing the code for each chart type.

I'm not going to spend time going over every single configuration option in-depth - these can be viewed here - but I will concentrate on the most important aspects that you need to be aware of for each chart.

Before we do this though you need to understand that every chart that is generated follows the same basic format:

The HTML element where the chart will be assigned

The configuration options for the chart (data, axes, legend etc)

Let's look at how this is implemented for each of the chart types beginning with the bar chart.

In Summary

As you can no doubt appreciate from this tutorial adding charts and graphs to an Ionic application is fairly simple with ChartJS - an extensive API, multiple chart types and in-depth online documentation allow developers to quickly and easily get to grips with the library.

For rendering data into beautiful, visually engaging charts and graphs there's a lot to like about this library.

If I have one gripe about ChartJS though it's this: formatting the legend is not so straightforward - despite the documentation and different configuration options in fact it's more challenging than it really should be, particularly when it comes to aligning each key item.

That said though it's a great library, packed full of charting types and options with extensive online documentation, for any developer looking to add charting functionality to their Ionic applications.

Tags

Categories

Post a comment

All comments are welcome and the rules are simple - be nice and do NOT engage in trolling, spamming, abusiveness or illegal behaviour. If you fail to observe these rules you will be permanently banned from being able to comment.

In the following tutorial I'm going to guide you through using Angular FormBuilder, FormGroup and FormArray modules to dynamically add and remove input fields in forms for your Ionic framework applications...

Thank you for signing up to the mailing list!

Error!

You might also like...

Let's face it, form validation is one of those tasks rarely enjoyed by developers - particularly with the volume of data checks and requirements that often entails - but thanks to Angular's FormBuilder class validating online forms just got a little easier...

In the following tutorial I'm going to guide you through using Angular FormBuilder, FormGroup and FormArray modules to dynamically add and remove input fields in forms for your Ionic framework applications...