Adding Charts in Ionic 4 apps and PWA: Part 4— Using Google Charts
Tags: ionic, charts, googlecharts, pwa
Published: 2020-03-25 23:30:52

<main role="main"><article class=" u-minHeight100vhOffset65 u-overflowHidden postArticle postArticle--full is-supplementalPostContentLoaded is-withAccentColors" lang="en" ><div class="postArticle-content js-postField js-notesSource editable" id="editor_6" g_editable="true" role="textbox" contenteditable="true" data-default-value="Title
Tell your story…" spellcheck="false"><section name="4840" class="section section--body section--first section--last"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><p name="fe55" class="graf graf--p graf-after--figure is-selected">This is part 4 of a 4 part series regarding <strong class="markup--strong markup--p-strong">how to create charts in Ionic 4 apps and PWA. </strong>In this Part 4, you’ll learn how to create various types of Charts using Google Charts.</p><blockquote name="7afa" class="graf graf--blockquote graf-after--p">(Part 1&#8202;—&#8202;<a href="https://enappd.com/blog/charts-in-ionic-4-apps-and-pwa-part-1/52"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank">Adding Charts in Ionic 4 apps and PWA&nbsp;: Part 1&#8202;—&#8202;Using Chart.js</a>)<br>(Part 2&#8202;—&#8202;<a href="https://enappd.com/blog/charts-in-ionic-4-apps-and-pwa-part-1/52"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank">Adding Charts in Ionic 4 apps and PWA&nbsp;: Part 2&#8202;—&#8202;Using D3.js</a>)<br>(Part 3— <a href="https://enappd.com/blog/adding-charts-in-ionic-4-apps-and-pwa-part-3/60"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank">Adding Charts in Ionic 4 apps and PWA&nbsp;: Part 2&#8202;—&#8202;Using HighCharts</a>)</blockquote><p name="6d65" class="graf graf--p graf-after--blockquote">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.</p><blockquote name="61c0" class="graf graf--blockquote graf-after--p"><strong class="markup--strong markup--blockquote-strong">Complete source code of this tutorial is available here&#8202;—&#8202;</strong><a href="https://github.com/enappd/ionic-4-google-charts"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong">Ionic-4-google-charts</strong></a></blockquote><h3 name="524c" class="graf graf--h3 graf-after--blockquote">What is Ionic&nbsp;4</h3><p name="e21e" class="graf graf--p graf-after--h3">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.</p><p name="a6fd" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Ionic</strong> 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.</p><p name="de54" class="graf graf--p graf-after--p">In other words&#8202;—&#8202;If you create native apps in Android, you code in <strong class="markup--strong markup--p-strong">Java</strong>. If you create native apps in iOS, you code in <strong class="markup--strong markup--p-strong">Obj-C</strong> or <strong class="markup--strong markup--p-strong">Swift</strong>. 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.</p><h3 name="12c3" class="graf graf--h3 graf-after--p">What is Google&nbsp;Charts</h3><p name="2eeb" class="graf graf--p graf-after--h3">Google Charts are yet another library to create easy charts in HTML5. From simple line charts to complex hierarchical tree maps, the <a href="https://developers.google.com/chart/interactive/docs/gallery"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">chart gallery</a> provides a large number of ready-to-use chart types. Compared to <a href="https://d3js.org/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">D3.js</a>, it is a lot easier to create charts in Google Charts. It is almost similar as <a href="https://www.chartjs.org/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Chart.js</a>, but a little less feature-rich compared to <a href="https://www.highcharts.com/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">HighCharts</a>.</p><p name="9220" class="graf graf--p graf-after--p">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&#8202;—&#8202;<a href="https://www.devrandom.it/software/ng2-google-charts/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">ng2-google-charts</a></p><p name="5f80" class="graf graf--p graf-after--p">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 &lt;div&gt; with that id to display the Google Chart. Since, we are using <a href="https://www.devrandom.it/software/ng2-google-charts/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">ng2-google-charts</a> for importing Google charts, we will be using <code class="markup--code markup--p-code">&lt;google-chart&gt;</code> element inside our HTML.</p><p name="7f3b" class="graf graf--p graf-after--p">Among the advantages on Google Charts</p><ul class="postList"><li name="c4cb" class="graf graf--li graf-after--p">It has a wide variety of charts to select from</li><li name="64bb" class="graf graf--li graf-after--li">The chart creation method is very easy, with data imported in <code class="markup--code markup--li-code">DataTable</code> class, so you can easily change the type of graph and check which <code class="markup--code markup--li-code">type</code> suits your requirement best</li><li name="b7ef" class="graf graf--li graf-after--li">Google Charts has the capability to create multiple Y axes for comparison etc.</li><li name="a6c6" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">Unlike HighCharts, IT IS FREE&nbsp;!!! 😃</strong></li></ul><figure tabindex="0" contenteditable="false" name="6759" class="graf graf--figure graf-after--li"><div class="aspectRatioPlaceholder is-locked" style="max-width: 500px; max-height: 206px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 41.199999999999996%;"></div><img class="graf-image" data-image-id="1*tN1x-KCCA9azCVIFSkeyhg.gif" data-width="500" data-height="206" src="https://cdn-images-1.medium.com/max/720/1*tN1x-KCCA9azCVIFSkeyhg.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Well, Google doesn’t&nbsp;care</figcaption></figure><h3 name="bec3" class="graf graf--h3 graf-after--figure">Structure of the&nbsp;post</h3><p name="36ca" class="graf graf--p graf-after--h3">We’ll go about the post in a step-by-step manner</p><ol class="postList"><li name="b1b2" class="graf graf--li graf-after--p">Create a basic Ionic 4 app</li><li name="f32b" class="graf graf--li graf-after--li">Add Google Charts to the app</li><li name="97a4" class="graf graf--li graf-after--li">Create your first basic Bar Chart with Google Charts&#8202;—&#8202;understand concepts</li><li name="6c4a" class="graf graf--li graf-after--li">Create simple Pie Chart with Google Charts</li><li name="ae28" class="graf graf--li graf-after--li">Create more advanced charts</li><li name="e86f" class="graf graf--li graf-after--li">Test your app on Android</li></ol><blockquote name="5a74" class="graf graf--blockquote graf-after--li"><strong class="markup--strong markup--blockquote-strong">Complete source code of this tutorial is available here&#8202;—&#8202;</strong><a href="https://github.com/enappd/ionic-4-d3js"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong">Ionic-4-</strong></a>Google Charts</blockquote><h3 name="cd08" class="graf graf--h3 graf-after--blockquote">Step 1&#8202;—&#8202;Create a basic Ionic 4&nbsp;app</h3><blockquote name="b909" class="graf graf--blockquote graf-after--h3">I have covered this topic in detail in <a href="https://enappd.com/blog/how-to-create-an-ionic-4-app-for-beginners/13/"  class="markup--anchor markup--blockquote-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener"    target="_blank">this blog</a>.</blockquote><p name="ac57" class="graf graf--p graf-after--blockquote">In short, the steps you need to take here are</p><ul class="postList"><li name="1e8a" class="graf graf--li graf-after--p">Make sure you have node installed in the system (V10.15.3 at the time of this blog post)</li><li name="1ae0" class="graf graf--li graf-after--li">Install <strong class="markup--strong markup--li-strong">ionic cli </strong>using npm (my Ionic version is 4.12.0 currently)</li><li name="508a" class="graf graf--li graf-after--li">Create an Ionic app using <code class="markup--code markup--li-code">ionic start</code></li></ul><p name="afc5" class="graf graf--p graf-after--li">You can create a <code class="markup--code markup--p-code">sidemenu</code> starter for the sake of this tutorial. On running <code class="markup--code markup--p-code">ionic start ionic-4-google-charts sidemenu</code>&nbsp;, node modules will be installed. Once the installation is done, run your app on browser using</p><pre name="f473" class="graf graf--pre graf-after--p">$ ionic serve</pre><p name="5a2e" class="graf graf--p graf-after--pre">The app will launch on browser. You can go to <strong class="markup--strong markup--p-strong">Inspect → Device Mode</strong> to see the code in a mobile layout. Next we’ll add the HighCharts library to our app.</p><h3 name="e177" class="graf graf--h3 graf-after--p">Step 2&#8202;—&#8202;Add Google Charts to the&nbsp;app</h3><p name="b479" class="graf graf--p graf-after--h3">To create charts/visualizations you need to add Google Charts library to the app. Add the angular wrapper for google-charts from npm package</p><pre name="6b0d" class="graf graf--pre graf-after--p">npm install ng2-google-charts --save</pre><p name="a09a" class="graf graf--p graf-after--pre">This will install the library in your node modules. Now you can import different modules of the library in your page using <code class="markup--code markup--p-code">import</code> syntax. The way this library works, you’ll have to import Google Charts in your <code class="markup--code markup--p-code">page.module.ts</code> using</p><pre name="586b" class="graf graf--pre graf-after--p">import { Ng2GoogleChartsModule } from 'ng2-google-charts';</pre><p name="1022" class="graf graf--p graf-after--pre">and also include <code class="markup--code markup--p-code">Ng2GoogleChartsModule</code> in the <code class="markup--code markup--p-code">@NgModule</code> imports.</p><p name="4b0f" class="graf graf--p graf-after--p">That’s it&nbsp;! You are ready to use Google Charts in your Ionic app and PWA pages.</p><h3 name="2135" class="graf graf--h3 graf-after--p">Step 3&#8202;—&#8202;Create basic Bar chart with Google&nbsp;Charts</h3><p name="92ce" class="graf graf--p graf-after--h3">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.</p><p name="f43a" class="graf graf--p graf-after--p">On the HTML side, you’ll need to create a <code class="markup--code markup--p-code">google-chart</code> component, which will accept <code class="markup--code markup--p-code">[data]=”chartData”</code>&nbsp;. You can check out more options for the <code class="markup--code markup--p-code">&lt;google-chart</code> tag from <a href="https://www.devrandom.it/software/ng2-google-charts/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">ng2-google-chart documentation</a></p><p name="bc82" class="graf graf--p graf-after--p">The HTML will look like following for <code class="markup--code markup--p-code">columnChart</code> (barChart)</p><figure tabindex="0" contenteditable="false" name="85d0" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/0faa1084ab43367e1d1e33e896fcf36f.js %}</div></div></figure><p name="ad12" class="graf graf--p graf-after--figure">In <code class="markup--code markup--p-code">bar.page.ts</code>&nbsp;, we will assign all the chart data in <code class="markup--code markup--p-code">columnChart1</code> variable to create the chart. First, we will import <code class="markup--code markup--p-code">GoogleChartInterface</code> in the ts file</p><pre name="ecb1" class="graf graf--pre graf-after--p">import { GoogleChartInterface } from 'ng2-google-charts/google-charts-interfaces';</pre><p name="5682" class="graf graf--p graf-after--pre">Now, the <code class="markup--code markup--p-code">bar.page.ts</code> will look like this after chart data assignment</p><figure tabindex="0" contenteditable="false" name="20d6" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/82ce48641ff2923fa41763f40b53cd99.js %}</div></div></figure><p name="619a" class="graf graf--p graf-after--figure">Let’s look at the data and figure out what is happening here</p><ul class="postList"><li name="03d4" class="graf graf--li graf-after--p"><strong class="markup--strong markup--li-strong">chartType</strong>&#8202;—&#8202;contains the type of chart, pretty self explanatory</li><li name="94e6" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">dataTable</strong>&#8202;—&#8202;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 have <code class="markup--code markup--li-code">opt_firstRowIsData</code> as <code class="markup--code markup--li-code">false</code> 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</li><li name="2670" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">options</strong>&#8202;—&#8202;deals with modifying almost everything else, such as axes, titles, label, heigh, width, trendlines etc.</li></ul><p name="b637" class="graf graf--p graf-after--li">With the above code and data, our <code class="markup--code markup--p-code">columnChart</code> comes out like this</p><figure tabindex="0" contenteditable="false" name="dc0f" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 535px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 76.5%;"></div><img class="graf-image" data-image-id="1*4AONxWyr2n8G10sDX8EeUA.png" data-width="999" data-height="764" src="https://cdn-images-1.medium.com/max/720/1*4AONxWyr2n8G10sDX8EeUA.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Simple column chart in Ionic 4 with google&nbsp;chart</figcaption></figure><h4 name="b67b" class="graf graf--h4 graf-after--figure">Grouped column&nbsp;chart</h4><p name="0850" class="graf graf--p graf-after--h4">You can create more complex bar/column charts with Google Charts. E.g. to create a grouped Column Chart, you need to modify the <code class="markup--code markup--p-code">dataTable</code> as</p><figure tabindex="0" contenteditable="false" name="ecee" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/306db33a837f0377aece164f8324c57f.js %}</div></div></figure><p name="383b" class="graf graf--p graf-after--figure">As you can see, we just added another series data within the same array. The result looks like this</p><figure tabindex="0" contenteditable="false" name="400f" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 537px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 76.7%;"></div><img class="graf-image" data-image-id="1*9yOwiUQ8pA7PujiQ9jtd2w.png" data-width="998" data-height="765" src="https://cdn-images-1.medium.com/max/720/1*9yOwiUQ8pA7PujiQ9jtd2w.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Grouped column chart in Ionic 4 with Google&nbsp;Charts</figcaption></figure><h4 name="92af" class="graf graf--h4 graf-after--figure">Horizontal Pie&nbsp;Chart</h4><p name="fb8d" class="graf graf--p graf-after--h4">Simply change the <code class="markup--code markup--p-code">chartType</code> to <code class="markup--code markup--p-code">barChart</code> and you’ll get a horizontal bar chart with the same data</p><figure tabindex="0" contenteditable="false" name="822c" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 361px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 51.6%;"></div><img class="graf-image" data-image-id="1*5B-7jZfTuhHxxA4wFZ3c0Q.png" data-width="995" data-height="513" src="https://cdn-images-1.medium.com/max/720/1*5B-7jZfTuhHxxA4wFZ3c0Q.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Simple bar chart in Ionic 4 with google&nbsp;chart</figcaption></figure><h3 name="d2b0" class="graf graf--h3 graf-after--figure">Step 4&#8202;—&#8202;Create basic Pie chart with Google&nbsp;Charts</h3><p name="7d1d" class="graf graf--p graf-after--h3">Pie chart creation is very similar to Bar chart in Google Charts. Simply change the data in <code class="markup--code markup--p-code">dataTable</code> and change the <code class="markup--code markup--p-code">chartType</code>&nbsp;, and you are good to go.</p><p name="fc94" class="graf graf--p graf-after--p">My <code class="markup--code markup--p-code">pie.page.ts</code> looks like following for creating a pie chart with Google Charts</p><figure tabindex="0" contenteditable="false" name="d9f6" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/836ef6e77e090a06e3dba119485a181b.js %}</div></div></figure><p name="1e79" class="graf graf--p graf-after--figure">The Pie chart will look this</p><figure tabindex="0" contenteditable="false" name="79c0" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 452px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 64.60000000000001%;"></div><img class="graf-image" data-image-id="1*nshLbxd1BbyfbqtSFVVXfg.gif" data-width="700" data-height="452" src="https://cdn-images-1.medium.com/max/720/1*nshLbxd1BbyfbqtSFVVXfg.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Simple Pie chart in Ionic 4 with Google charts&#8202;—&#8202;Note the hover info animation</figcaption></figure><p name="652c" class="graf graf--p graf-after--figure">There are other cool features you can implement in pie charts using Google Charts like</p><h4 name="6376" class="graf graf--h4 graf-after--p">3D Pie&nbsp;Chart</h4><p name="c951" class="graf graf--p graf-after--h4">Just add <code class="markup--code markup--p-code">is3D: true</code> in the chart <code class="markup--code markup--p-code">options</code> and your pie chart will turn 3D</p><figure tabindex="0" contenteditable="false" name="9402" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 411px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 58.8%;"></div><img class="graf-image" data-image-id="1*K5g9aNfeg1u_-MtnGjds_w.png" data-width="997" data-height="586" src="https://cdn-images-1.medium.com/max/720/1*K5g9aNfeg1u_-MtnGjds_w.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Simple 3D Pie chart in Ionic 4 with Google&nbsp;charts</figcaption></figure><h4 name="b120" class="graf graf--h4 graf-after--figure">Exploded Pie&nbsp;Chart</h4><p name="835e" class="graf graf--p graf-after--h4">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 chart <code class="markup--code markup--p-code">options</code> in this format</p><pre name="d224" class="graf graf--pre graf-after--p">slices: {<br>1: { offset: 0.3 },<br>2: { offset: 0.2 },<br>3: { offset: 0.3 },<br>4: { offset: 0.1 },<br>},<br>...</pre><p name="c74c" class="graf graf--p graf-after--pre">The exploded Pie chart will look like following</p><figure tabindex="0" contenteditable="false" name="0471" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 414px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 59.099999999999994%;"></div><img class="graf-image" data-image-id="1*zJNJgSCCyuyaBURtGOK0Jw.png" data-width="993" data-height="587" src="https://cdn-images-1.medium.com/max/720/1*zJNJgSCCyuyaBURtGOK0Jw.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Exploded Pie chart in Ionic 4 with Google&nbsp;charts</figcaption></figure><p name="674c" class="graf graf--p graf-after--figure">Donut Chart</p><p name="dc3c" class="graf graf--p graf-after--p">Another kind of pie chart is a donut chart, where there is a hole in the middle. You can simply add <code class="markup--code markup--p-code">pieHole</code> property in chart <code class="markup--code markup--p-code">options</code> and you’ll get a donut chart as a result. For a <code class="markup--code markup--p-code">pieHole: 0.4</code>&nbsp;, this is how the chart looks</p><figure tabindex="0" contenteditable="false" name="75d4" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 412px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 58.8%;"></div><img class="graf-image" data-image-id="1*a1OHaLKveoRZPAMBhlJ6aQ.png" data-width="996" data-height="586" src="https://cdn-images-1.medium.com/max/720/1*a1OHaLKveoRZPAMBhlJ6aQ.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Simple Donut chart in Ionic 4 with Google&nbsp;charts</figcaption></figure><h3 name="b84a" class="graf graf--h3 graf-after--figure">Step 5&#8202;—&#8202;Create basic Line charts with Google&nbsp;Charts</h3><p name="fe22" class="graf graf--p graf-after--h3">Creating scatter chart in Google Charts is again as easy as creating any other chart. Just change the <code class="markup--code markup--p-code">type</code> to <code class="markup--code markup--p-code">LineChart</code> and you are good to go.</p><p name="e81a" class="graf graf--p graf-after--p">Just for an example, a simple line chart creation code will look like following</p><figure tabindex="0" contenteditable="false" name="8204" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/bafeb4f8c201ec76b383b3cbac378e79.js %}</div></div></figure><p name="88ff" class="graf graf--p graf-after--figure">Notice, this time I have <code class="markup--code markup--p-code">opt_firstRowIsData: true</code>&nbsp;, because I have data in the array’s first row as well.</p><p name="1937" class="graf graf--p graf-after--p">The resultant chart looks like following</p><figure tabindex="0" contenteditable="false" name="8d2c" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 449px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 64.2%;"></div><img class="graf-image" data-image-id="1*S9VBP19C7_vf_rnl1LyOVw.png" data-width="999" data-height="641" src="https://cdn-images-1.medium.com/max/720/1*S9VBP19C7_vf_rnl1LyOVw.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Simple Line chart in Ionic 4 with Google&nbsp;charts</figcaption></figure><h4 name="56fd" class="graf graf--h4 graf-after--figure">Grouped Line&nbsp;Chart</h4><p name="4a61" class="graf graf--p graf-after--h4">Simple add another data series in the <code class="markup--code markup--p-code">dataTable</code> array, and you got yourselves a grouped line chart</p><figure tabindex="0" contenteditable="false" name="0021" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/7c6bb6e9ca328a3b434c5977116dbb02.js %}</div></div></figure><p name="9b18" class="graf graf--p graf-after--figure">and the resultant Chart</p><figure tabindex="0" contenteditable="false" name="883c" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 447px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 63.9%;"></div><img class="graf-image" data-image-id="1*zRzeXp0WOHQGHC3oxO1GhA.png" data-width="997" data-height="637" src="https://cdn-images-1.medium.com/max/720/1*zRzeXp0WOHQGHC3oxO1GhA.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Grouped Line chart in Ionic 4 with Google&nbsp;charts</figcaption></figure><h4 name="e4a2" class="graf graf--h4 graf-after--figure">Smoothed out Line&nbsp;Chart</h4><p name="82cd" class="graf graf--p graf-after--h4">If you want the line chart smoothed out, you can use</p><pre name="fe67" class="graf graf--pre graf-after--p">curveType: 'function',</pre><p name="a5d4" class="graf graf--p graf-after--pre">in chart <code class="markup--code markup--p-code">options</code>&nbsp;. The resultant chart for the same data as above will look like this</p><figure tabindex="0" contenteditable="false" name="6b14" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 446px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 63.7%;"></div><img class="graf-image" data-image-id="1*8pKnumPFoIBGm6YpBksIMg.png" data-width="997" data-height="635" src="https://cdn-images-1.medium.com/max/720/1*8pKnumPFoIBGm6YpBksIMg.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Smooth Line chart in Ionic 4 with Google&nbsp;charts</figcaption></figure><h4 name="f294" class="graf graf--h4 graf-after--figure">Line Charts with Trendlines</h4><p name="ee04" class="graf graf--p graf-after--h4">Introducing trendline in charts is very easy in Google Charts. Just include one trendline object per data series in chart <code class="markup--code markup--p-code">options</code> and you can get multiple trendlines in the chart.</p><p name="8086" class="graf graf--p graf-after--p">E.g. For the above data, I am going to have a linear trendline for Series Dogs and exponential trendline for Series Cats</p><p name="1b47" class="graf graf--p graf-after--p">Just add the following in <code class="markup--code markup--p-code">options</code></p><pre name="a60b" class="graf graf--pre graf-after--p">trendlines: {<br>0: { type: 'exponential', color: '#333', opacity: 1 },<br>1: { type: 'linear', color: '#0f0', opacity: .5 }<br>}</pre><p name="96a1" class="graf graf--p graf-after--pre">You’ll get two trendlines in the chart like this</p><figure tabindex="0" contenteditable="false" name="788c" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 412px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 58.9%;"></div><img class="graf-image" data-image-id="1*tJfth0yrkk6Gp_0K3ClLKQ.png" data-width="995" data-height="586" src="https://cdn-images-1.medium.com/max/720/1*tJfth0yrkk6Gp_0K3ClLKQ.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Grouped Line chart with Trendlines in Ionic 4 with Google&nbsp;charts</figcaption></figure><h3 name="f50f" class="graf graf--h3 graf-after--figure">Step 6&#8202;—&#8202;Create Scatter charts with Google&nbsp;Charts</h3><p name="3146" class="graf graf--p graf-after--h3">Once again, you just need to change the <code class="markup--code markup--p-code">chartType</code> (“ScatterChart”) and set your data in <code class="markup--code markup--p-code">dataTable</code> array to get a scatter chart.</p><figure tabindex="0" contenteditable="false" name="cc98" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 453px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 64.7%;"></div><img class="graf-image" data-image-id="1*bZw1ECPKHthegXdFoln2nA.png" data-width="997" data-height="645" src="https://cdn-images-1.medium.com/max/720/1*bZw1ECPKHthegXdFoln2nA.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Simple scatter chat in Ionic 4 using Google&nbsp;Charts</figcaption></figure><h4 name="db0c" class="graf graf--h4 graf-after--figure">Custom Scatter&nbsp;Chart</h4><p name="ebe6" class="graf graf--p graf-after--h4">You can change scatter chart points and colors to give it custom appearance. E.g. just add the following in chart <code class="markup--code markup--p-code">options</code></p><pre name="393b" class="graf graf--pre graf-after--p">colors: ['#ff0000'],<br>pointShape: 'star',<br>pointSize: 18,</pre><figure tabindex="0" contenteditable="false" name="e6ab" class="graf graf--figure graf-after--pre"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 411px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 58.699999999999996%;"></div><img class="graf-image" data-image-id="1*vWfz8GBDo7R-D8DgXJ8Q7w.png" data-width="995" data-height="584" src="https://cdn-images-1.medium.com/max/720/1*vWfz8GBDo7R-D8DgXJ8Q7w.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Custom scatter chat in Ionic 4 using Google&nbsp;Charts</figcaption></figure><h4 name="47e8" class="graf graf--h4 graf-after--figure">Trendline in Scatter&nbsp;Charts</h4><p name="7657" class="graf graf--p graf-after--h4">As we created trendline in Line Charts, we can create trendlines in Scatter charts as well. Just adding the following in chart <code class="markup--code markup--p-code">options</code></p><pre name="4279" class="graf graf--pre graf-after--p">trendlines: {<br>   0: { type: 'exponential', color: '#333', opacity: 1 }<br>}</pre><figure tabindex="0" contenteditable="false" name="b8ef" class="graf graf--figure graf-after--pre"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 415px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 59.3%;"></div><img class="graf-image" data-image-id="1*kK0uRE55ha1dKc9ndQdyLw.png" data-width="994" data-height="589" src="https://cdn-images-1.medium.com/max/720/1*kK0uRE55ha1dKc9ndQdyLw.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Scatter chat with trend-line in Ionic 4 using Google&nbsp;Charts</figcaption></figure><h3 name="0099" class="graf graf--h3 graf-after--figure">Step 7&#8202;—&#8202;Create Area Charts with Google&nbsp;Charts</h3><p name="cd84" class="graf graf--p graf-after--h3">Area charts follow almost same methods as Line charts, the only difference being <code class="markup--code markup--p-code">chartType:'AreaChart'</code></p><p name="37aa" class="graf graf--p graf-after--p">Here are the results</p><h4 name="a33e" class="graf graf--h4 graf-after--p">Simple Area&nbsp;Chart</h4><figure tabindex="0" contenteditable="false" name="2493" class="graf graf--figure graf-after--h4"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 450px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 64.3%;"></div><img class="graf-image" data-image-id="1*PsCfzjTeY6VgNFbUTu0Y0g.png" data-width="997" data-height="641" src="https://cdn-images-1.medium.com/max/720/1*PsCfzjTeY6VgNFbUTu0Y0g.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Simple area chart in Ionic 4 using Google&nbsp;Charts</figcaption></figure><h4 name="b0f5" class="graf graf--h4 graf-after--figure">Grouped Area&nbsp;Chart</h4><figure tabindex="0" contenteditable="false" name="34e1" class="graf graf--figure graf-after--h4"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 448px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 64%;"></div><img class="graf-image" data-image-id="1*oEB_GdzPpiBdYEisL_-FuQ.png" data-width="997" data-height="638" src="https://cdn-images-1.medium.com/max/720/1*oEB_GdzPpiBdYEisL_-FuQ.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Grouped area chart in Ionic 4 using Google&nbsp;Charts</figcaption></figure><h3 name="3072" class="graf graf--h3 graf-after--figure">Step 8— Test your app in Android and as&nbsp;PWA</h3><p name="ac70" class="graf graf--p graf-after--h3">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.</p><p name="6245" class="graf graf--p graf-after--p">Run the following command to create Android platform</p><pre name="9f9d" class="graf graf--pre graf-after--p">$ ionic cordova platform add android</pre><p name="f883" class="graf graf--p graf-after--pre">Once platform is added, run the app on device (Make sure you have a device attached to the system).</p><pre name="8b73" class="graf graf--pre graf-after--p">$ ionic cordova run android</pre><p name="7820" class="graf graf--p graf-after--pre">Once your app is up and running on the device, you can start testing all the functions.</p><h3 name="a33d" class="graf graf--h3 graf-after--p">Other cool charts possible in Google&nbsp;Charts</h3><p name="02e6" class="graf graf--p graf-after--h3">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 refer <a href="https://developers.google.com/chart/interactive/docs/gallery/areachart"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Google Charts Documentation</a> to create these charts</p><h4 name="23ab" class="graf graf--h4 graf-after--p">Bubble Charts</h4><p name="69cb" class="graf graf--p graf-after--h4">Along with simple bubble charts, you can also create packed bubble charts like this one</p><figure tabindex="0" contenteditable="false" name="ca74" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 389px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 55.60000000000001%;"></div><img class="graf-image" data-image-id="1*Plyw9GdwglXPXTrHfy7W-w.gif" data-width="700" data-height="389" src="https://cdn-images-1.medium.com/max/720/1*Plyw9GdwglXPXTrHfy7W-w.gif"><div class="crosshair u-ignoreBlock"></div></div></figure><h4 name="ffa9" class="graf graf--h4 graf-after--figure">Calendar Charts</h4><figure tabindex="0" contenteditable="false" name="b2d8" class="graf graf--figure graf-after--h4 is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 281px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 40.2%;"></div><img class="graf-image" data-image-id="1*KgXpsm5NnxoamtI1dJsBdw.png" data-width="904" data-height="363" src="https://cdn-images-1.medium.com/max/720/1*KgXpsm5NnxoamtI1dJsBdw.png"><div class="crosshair u-ignoreBlock"></div></div></figure><h4 name="0500" class="graf graf--h4 graf-after--figure">CandleStick Chart</h4><figure tabindex="0" contenteditable="false" name="9cf2" class="graf graf--figure graf-after--h4 is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 688px; max-height: 404px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 58.699999999999996%;"></div><img class="graf-image" data-image-id="1*nuZhV-fm-hCzUfyAa9S63A.png" data-width="688" data-height="404" src="https://cdn-images-1.medium.com/max/720/1*nuZhV-fm-hCzUfyAa9S63A.png"><div class="crosshair u-ignoreBlock"></div></div></figure><h4 name="bd24" class="graf graf--h4 graf-after--figure">Combo Chart</h4><p name="82e5" class="graf graf--p graf-after--h4">You can combine multiple charts in Google Charts as well, similar to Chart.js, or HighCharts.</p><figure tabindex="0" contenteditable="false" name="f60a" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 408px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 58.4%;"></div><img class="graf-image" data-image-id="1*-Us7OsSpPt8D4B2MQV7svQ.png" data-width="850" data-height="496" src="https://cdn-images-1.medium.com/max/720/1*-Us7OsSpPt8D4B2MQV7svQ.png"><div class="crosshair u-ignoreBlock"></div></div></figure><h4 name="6fc6" class="graf graf--h4 graf-after--figure">Gauge Chart</h4><figure tabindex="0" contenteditable="false" name="9553" class="graf graf--figure graf-after--h4 is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 212px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 30.3%;"></div><img class="graf-image" data-image-id="1*WMgWAoqiycLtncXQruPeow.png" data-width="865" data-height="262" src="https://cdn-images-1.medium.com/max/720/1*WMgWAoqiycLtncXQruPeow.png"><div class="crosshair u-ignoreBlock"></div></div></figure><h4 name="515b" class="graf graf--h4 graf-after--figure">GeoChart</h4><p name="5d99" class="graf graf--p graf-after--h4">Because of the Google Map capability, Google Chart has the powerful feature of creating Geocharts, similar to D3.js</p><figure tabindex="0" contenteditable="false" name="15ce" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 422px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 60.199999999999996%;"></div><img class="graf-image" data-image-id="1*pLm48PYOEBL5zbGNkSJHiA.png" data-width="888" data-height="535" src="https://cdn-images-1.medium.com/max/720/1*pLm48PYOEBL5zbGNkSJHiA.png"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="9d3f" class="graf graf--p graf-after--figure">There are many more types of charts you can create with Google Charts. Just head over to the <a href="https://developers.google.com/chart/interactive/docs/gallery/geochart"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">documentation</a> and explore&nbsp;!</p><h3 name="dd96" class="graf graf--h3 graf-after--p">Conclusion</h3><p name="3058" class="graf graf--p graf-after--h3">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.</p><p name="77f7" class="graf graf--p graf-after--p">We looked at the following types of charts in this post</p><ul class="postList"><li name="c930" class="graf graf--li graf-after--p">Bar charts&#8202;—&#8202;Horizontal, vertical, grouped</li><li name="e110" class="graf graf--li graf-after--li">Line charts&#8202;—&#8202;Simple, grouped, smoothed, with trend-line</li><li name="f27b" class="graf graf--li graf-after--li">Area chart&#8202;—&#8202;Simple, grouped</li><li name="89c6" class="graf graf--li graf-after--li">Scatter chart&#8202;—&#8202;Simple, custom, with trend-line</li><li name="ffe2" class="graf graf--li graf-after--li">Pie chart&#8202;—&#8202;Simple, 3D, donut and exploded</li></ul><blockquote name="3055" class="graf graf--blockquote graf-after--li"><strong class="markup--strong markup--blockquote-strong">Complete source code of this tutorial is available here&#8202;—&#8202;</strong><a href="https://github.com/enappd/ionic-4-google-charts"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong">Ionic-4-google-charts</strong></a></blockquote><p name="e38f" class="graf graf--p graf-after--blockquote">Also check out other posts of this series,</p><blockquote name="a5a2" class="graf graf--blockquote graf-after--p">(Part 1&#8202;—&#8202;<a href="https://enappd.com/blog/charts-in-ionic-4-apps-and-pwa-part-1/52"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank">Adding Charts in Ionic 4 apps and PWA&nbsp;: Part 1&#8202;—&#8202;Using Chart.js</a>)<br>(Part 2&#8202;—&#8202;<a href="https://enappd.com/blog/charts-in-ionic-4-apps-and-pwa-part-1/52"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank">Adding Charts in Ionic 4 apps and PWA&nbsp;: Part 2&#8202;—&#8202;Using D3.js</a>)<br>(Part 3&#8202;—&#8202;<a href="https://enappd.com/blog/adding-charts-in-ionic-4-apps-and-pwa-part-3/60"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank">Adding Charts in Ionic 4 apps and PWA&nbsp;: Part 2&#8202;—&#8202;Using HighCharts</a>)</blockquote><p name="4acd" class="graf graf--p graf-after--blockquote"><em class="markup--em markup--p-em">—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;-</em></p><p name="2ada" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong"><em class="markup--em markup--p-em">Buy “</em></strong><a href="https://store.enappd.com/product/ionic-4-chart-app-starter-ion-chart/"  class="markup--anchor markup--p-anchor"    target="_blank"><strong class="markup--strong markup--p-strong">Ionic 4 Chart App Starter&#8202;—&#8202;Ion Chart</strong></a><strong class="markup--strong markup--p-strong">”<em class="markup--em markup--p-em"> today!!</em></strong></p><p name="fba2" class="graf graf--p graf-after--p"><em class="markup--em markup--p-em">—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;— —</em></p><h3 name="a6f7" class="graf graf--h3 graf-after--p">Next Steps</h3><p name="178a" class="graf graf--p graf-after--h3">Now that you have learned the implementation of Google Charts for charting in Ionic 4, you can also try</p><ul class="postList"><li name="9f48" class="graf graf--li graf-after--p"><a href="https://enappd.com/blog/ionic-4-paypal-payment-integration-for-apps-and-pwa/16"  class="markup--anchor markup--li-anchor" rel="nofollow noopener noopener noopener noopener noopener noopener noopener noopener noopener"    target="_blank">Ionic 4 PayPal payment integration&#8202;—&#8202;for Apps and PWA</a></li><li name="aa95" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/ionic-4-stripe-payment-integration-with-firebase-for-apps-and-pwa/17"  class="markup--anchor markup--li-anchor" rel="nofollow noopener noopener noopener noopener noopener noopener noopener noopener noopener"    target="_blank">Ionic 4 Stripe payment integration&#8202;—&#8202;for Apps and PWA</a></li><li name="fc67" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/how-to-integrate-apple-pay-in-ionic-4-apps/21"  class="markup--anchor markup--li-anchor" rel="nofollow noopener noopener noopener noopener noopener noopener noopener noopener noopener"    target="_blank">Ionic 4 Apple Pay integration</a></li><li name="b1fc" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/twitter-login-in-ionic-4-apps-using-firebase/24"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Twitter login in Ionic 4 with Firebase</a></li><li name="57fe" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/facebook-login-in-ionic-4-apps-using-firebase/25"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Facebook login in Ionic 4 with Firebase</a></li><li name="97f4" class="graf graf--li graf-after--li"><a href="https://medium.com/enappd/using-geolocation-and-beacon-plugins-in-ionic-4-754b41304007"  class="markup--anchor markup--li-anchor"    target="_blank">Geolocation</a> in Ionic 4</li><li name="34a6" class="graf graf--li graf-after--li"><a href="https://medium.com/enappd/qr-code-scanning-and-optical-character-recognition-ocr-in-ionic-4-95fd46be91dd"  class="markup--anchor markup--li-anchor"    target="_blank">QR Code and scanners</a> in Ionic 4 and</li><li name="de81" class="graf graf--li graf-after--li"><a href="https://medium.com/enappd/how-to-translate-in-ionic-4-globalization-internationalization-and-localization-31ec5807a8bc"  class="markup--anchor markup--li-anchor"    target="_blank">Translations in Ionic 4</a></li></ul><p name="2930" class="graf graf--p graf-after--li">If you need a base to start your next Ionic 4 app, you can make your next awesome app using <a href="https://store.enappd.com/product/ionic-4-full-app/"  class="markup--anchor markup--p-anchor" rel="noopener nofollow noopener noopener nofollow noopener noopener nofollow noopener noopener noopener noopener noopener noopener noopener noopener noopener"    target="_blank">Ionic 4 Full App</a></p><figure tabindex="0" contenteditable="false" name="89dc" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 442px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 63.2%;"></div><img class="graf-image" data-image-id="1*2BzL8TesnBHuazHr3VA4SQ.jpeg" data-width="760" data-height="480" src="https://cdn-images-1.medium.com/max/720/1*2BzL8TesnBHuazHr3VA4SQ.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="7d83" class="graf graf--p graf--empty graf-after--figure graf--trailing"><br></p></div></div></section></div></article></main>