Posted onMar 25, 2020 • Originally published atenappd.com

Camera and Image picker in Ionic 4 app

#ionic #image #gallery #photos

This is part 4 of a 4 part series regardinghow to create charts in Ionic 4 apps and PWA.In this Part 4, you’ll learn how to create various types of Charts using Google Charts.

(Part 1 — Adding Charts in Ionic 4 apps and PWA : Part 1 — Using Chart.js)
(Part 2 — Adding Charts in Ionic 4 apps and PWA : Part 2 — Using D3.js)
(Part 3—Adding Charts in Ionic 4 apps and PWA : Part 2 — Using HighCharts)

In these four posts, you’ll learn how to add and play with different types of charts in Ionic 4 apps. We will explore several alternatives for Charting i.e. Chart.js, D3.js, Highcharts, GoogleCharts and others.

Complete source code of this tutorial is available here — Ionic-4-google-charts

What is Ionic 4

I know most of the readers reading this blog will know what is Ionic 4, but just for the sake of beginners, I explain this in every blog.

Ionic is a complete open-source SDK for hybrid mobile app development. Ionic provides tools and services for developing hybrid mobile apps using Web technologies like CSS, HTML5, and Sass. Apps can be built with these Web technologies and then distributed through native app stores to be installed on devices.

In other words — If you create native apps in Android, you code inJava. If you create native apps in iOS, you code inObj-C orSwift. Both of these are powerful, but complex languages. With Cordova (and Ionic) you can write a single piece of code for your app that can run on both iOS and Android (and windows!), that too with the simplicity of HTML, CSS, and JS. I’m a huge fan of Ionic and been developing Ionic apps for last 4 years.

What is Google Charts

Google Charts are yet another library to create easy charts in HTML5. From simple line charts to complex hierarchical tree maps, thechart gallery provides a large number of ready-to-use chart types. Compared toD3.js, it is a lot easier to create charts in Google Charts. It is almost similar asChart.js, but a little less feature-rich compared toHighCharts.

The most common way to use Google Charts is with simple JavaScript that you embed in your web page. Hence, we can also use it very easily in Ionic apps. Google Charts also has several Angular wrappers available as open source libraries. We will use one such wrapper to import Google Charts in our app — ng2-google-charts

With Google Charts, you load some Google Chart libraries, list the data to be charted, select options to customize your chart, and finally create a chart object with an id that you choose. Then, later in the web page, you create a <div> with that id to display the Google Chart. Since, we are usingng2-google-charts for importing Google charts, we will be using<google-chart> element inside our HTML.

Among the advantages on Google Charts

It has a wide variety of charts to select from
The chart creation method is very easy, with data imported inDataTable class, so you can easily change the type of graph and check whichtype suits your requirement best
Google Charts has the capability to create multiple Y axes for comparison etc.
Unlike HighCharts, IT IS FREE !!! 😃

Well, Google doesn’t care

Structure of the post

We’ll go about the post in a step-by-step manner

Create a basic Ionic 4 app
Add Google Charts to the app
Create your first basic Bar Chart with Google Charts — understand concepts
Create simple Pie Chart with Google Charts
Create more advanced charts
Test your app on Android

Complete source code of this tutorial is available here — Ionic-4-Google Charts

Step 1 — Create a basic Ionic 4 app

I have covered this topic in detail inthis blog.

In short, the steps you need to take here are

Make sure you have node installed in the system (V10.15.3 at the time of this blog post)
Installionic cliusing npm (my Ionic version is 4.12.0 currently)
Create an Ionic app usingionic start

You can create asidemenu starter for the sake of this tutorial. On runningionic start ionic-4-google-charts sidemenu , node modules will be installed. Once the installation is done, run your app on browser using

$ ionic serve

The app will launch on browser. You can go toInspect → Device Mode to see the code in a mobile layout. Next we’ll add the HighCharts library to our app.

Step 2 — Add Google Charts to the app

To create charts/visualizations you need to add Google Charts library to the app. Add the angular wrapper for google-charts from npm package

npm install ng2-google-charts --save

This will install the library in your node modules. Now you can import different modules of the library in your page usingimport syntax. The way this library works, you’ll have to import Google Charts in yourpage.module.ts using

import { Ng2GoogleChartsModule } from 'ng2-google-charts';

and also includeNg2GoogleChartsModule in the@NgModule imports.

That’s it ! You are ready to use Google Charts in your Ionic app and PWA pages.

Step 3 — Create basic Bar chart with Google Charts

Google Charts uses SVGs and HTML5 / CSS(internally) to create charts and visualizations in HTML5, just like HighCharts. The syntax of chart creation remains pretty much same across different types of charts. This is a cool feature, because now you can just change type and see which type of chart fits your data perfectly.

On the HTML side, you’ll need to create agoogle-chart component, which will accept[data]=”chartData” . You can check out more options for the<google-chart tag fromng2-google-chart documentation

The HTML will look like following forcolumnChart (barChart)

Inbar.page.ts , we will assign all the chart data incolumnChart1 variable to create the chart. First, we will importGoogleChartInterface in the ts file

import { GoogleChartInterface } from 'ng2-google-charts/google-charts-interfaces';

Now, thebar.page.ts will look like this after chart data assignment

Let’s look at the data and figure out what is happening here

chartType — contains the type of chart, pretty self explanatory
dataTable — contains the actual data of the chart. It is in the form of an array with values as arrays itself. If you look at the above data, the first element of the array is defining the data labels. And that is the reason we haveopt_firstRowIsData asfalse or disabled. If you have more than one series of data, you can simply put the data in the array format, increasing per element array members
options — deals with modifying almost everything else, such as axes, titles, label, heigh, width, trendlines etc.

With the above code and data, ourcolumnChart comes out like this

Simple column chart in Ionic 4 with google chart

Grouped column chart

You can create more complex bar/column charts with Google Charts. E.g. to create a grouped Column Chart, you need to modify thedataTable as

As you can see, we just added another series data within the same array. The result looks like this

Grouped column chart in Ionic 4 with Google Charts

Horizontal Pie Chart

Simply change thechartType tobarChart and you’ll get a horizontal bar chart with the same data

Simple bar chart in Ionic 4 with google chart

Step 4 — Create basic Pie chart with Google Charts

Pie chart creation is very similar to Bar chart in Google Charts. Simply change the data indataTable and change thechartType , and you are good to go.

Mypie.page.ts looks like following for creating a pie chart with Google Charts

The Pie chart will look this

Simple Pie chart in Ionic 4 with Google charts — Note the hover info animation

There are other cool features you can implement in pie charts using Google Charts like

3D Pie Chart

Just addis3D: true in the chartoptions and your pie chart will turn 3D

Simple 3D Pie chart in Ionic 4 with Google charts

Exploded Pie Chart

Just add offset values for each of the slice of pie chart, and you’ll get an exploded view of pie chart. The offset can be given in chartoptions in this format

slices: {
1: { offset: 0.3 },
2: { offset: 0.2 },
3: { offset: 0.3 },
4: { offset: 0.1 },
},
...

The exploded Pie chart will look like following

Exploded Pie chart in Ionic 4 with Google charts

Donut Chart

Another kind of pie chart is a donut chart, where there is a hole in the middle. You can simply addpieHole property in chartoptions and you’ll get a donut chart as a result. For apieHole: 0.4 , this is how the chart looks

Simple Donut chart in Ionic 4 with Google charts

Step 5 — Create basic Line charts with Google Charts

Creating scatter chart in Google Charts is again as easy as creating any other chart. Just change thetype toLineChart and you are good to go.

Just for an example, a simple line chart creation code will look like following

Notice, this time I haveopt_firstRowIsData: true , because I have data in the array’s first row as well.

The resultant chart looks like following

Simple Line chart in Ionic 4 with Google charts

Grouped Line Chart

Simple add another data series in thedataTable array, and you got yourselves a grouped line chart

and the resultant Chart

Grouped Line chart in Ionic 4 with Google charts

Smoothed out Line Chart

If you want the line chart smoothed out, you can use

curveType: 'function',

in chartoptions . The resultant chart for the same data as above will look like this

Smooth Line chart in Ionic 4 with Google charts

Line Charts with Trendlines

Introducing trendline in charts is very easy in Google Charts. Just include one trendline object per data series in chartoptions and you can get multiple trendlines in the chart.

E.g. For the above data, I am going to have a linear trendline for Series Dogs and exponential trendline for Series Cats

Just add the following inoptions

trendlines: {
0: { type: 'exponential', color: '#333', opacity: 1 },
1: { type: 'linear', color: '#0f0', opacity: .5 }
}

You’ll get two trendlines in the chart like this

Grouped Line chart with Trendlines in Ionic 4 with Google charts

Step 6 — Create Scatter charts with Google Charts

Once again, you just need to change thechartType (“ScatterChart”) and set your data indataTable array to get a scatter chart.

Simple scatter chat in Ionic 4 using Google Charts

Custom Scatter Chart

You can change scatter chart points and colors to give it custom appearance. E.g. just add the following in chartoptions

colors: ['#ff0000'],
pointShape: 'star',
pointSize: 18,

Custom scatter chat in Ionic 4 using Google Charts

Trendline in Scatter Charts

As we created trendline in Line Charts, we can create trendlines in Scatter charts as well. Just adding the following in chartoptions

trendlines: {
   0: { type: 'exponential', color: '#333', opacity: 1 }
}

Scatter chat with trend-line in Ionic 4 using Google Charts

Step 7 — Create Area Charts with Google Charts

Area charts follow almost same methods as Line charts, the only difference beingchartType:'AreaChart'

Here are the results

Simple Area Chart

Simple area chart in Ionic 4 using Google Charts

Grouped Area Chart

Grouped area chart in Ionic 4 using Google Charts

Step 8— Test your app in Android and as PWA

We have already tested the above Google Charts in browser. If you have carried out the above steps correctly, Android build should be a breeze.

Run the following command to create Android platform

$ ionic cordova platform add android

Once platform is added, run the app on device (Make sure you have a device attached to the system).

$ ionic cordova run android

Once your app is up and running on the device, you can start testing all the functions.

Other cool charts possible in Google Charts

Google Charts has many other features and types of charts which you can create as easily as you created the above charts. I haven’t included these in the open source, but you can always referGoogle Charts Documentation to create these charts

Bubble Charts

Along with simple bubble charts, you can also create packed bubble charts like this one

Calendar Charts

CandleStick Chart

Combo Chart

You can combine multiple charts in Google Charts as well, similar to Chart.js, or HighCharts.

Gauge Chart

GeoChart

Because of the Google Map capability, Google Chart has the powerful feature of creating Geocharts, similar to D3.js

There are many more types of charts you can create with Google Charts. Just head over to thedocumentation and explore !

Conclusion

In this post we learnt how to create simple and complex charts using Google Chart in Ionic 4 apps and PWA. Since Google Charts is very easy to implement, you need to take very little effort to create a large variety of charts. The documentation on Google Charts website is good enough to simulate any type of chart in your projects.

We looked at the following types of charts in this post

Bar charts — Horizontal, vertical, grouped
Line charts — Simple, grouped, smoothed, with trend-line
Area chart — Simple, grouped
Scatter chart — Simple, custom, with trend-line
Pie chart — Simple, 3D, donut and exploded