DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports
Events Video Library
Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
View Events Video Library
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Integrating PostgreSQL Databases with ANF: Join this workshop to learn how to create a PostgreSQL server using Instaclustr’s managed service

Mobile Database Essentials: Assess data needs, storage requirements, and more when leveraging databases for cloud and edge applications.

Monitoring and Observability for LLMs: Datadog and Google Cloud discuss how to achieve optimal AI model performance.

Automated Testing: The latest on architecture, TDD, and the benefits of AI and low-code tools.

Related

  • Ionic App Development Over Other Frameworks: Is It Hyped?
  • The Most Popular Angular UI Libraries To Try in 2021
  • Charts With Modern React and D3
  • Interactive Data Visualization in Ionic 5

Trending

  • Logging to Infinity and Beyond: How To Find the Hidden Value of Your Logs
  • Send Your Logs to Loki
  • Wild West to the Agile Manifesto [Video]
  • API Design
  1. DZone
  2. Coding
  3. Frameworks
  4. Setting Up a Chart in an Ionic App Using Highcharts

Setting Up a Chart in an Ionic App Using Highcharts

Interested in learning a new open-source JavaScript library? Read on to get an introduction to Highcharts, and how you can use it with other great JS resources.

samarthagarwal user avatar by
samarthagarwal
·
Jul. 21, 17 · Tutorial
Like (2)
Save
Tweet
Share
8.88K Views

Join the DZone community and get the full member experience.

Join For Free

Ionic has grown spectacularly in the last two years. It's gone from initially using AngularJS to Angular 4 and now TypeScript in the new Ionic Framework (version 3). I am a big fan of Ionic. My other favorite JavaScript library is Highcharts (no surprise there). Like most Highcharts fans, I love how easy it is to create responsive and interactive charts. That is why I decided to set up a project to combine my two favorite libraries. Will it blend? Let’s give it a shot!

First things first: install Ionic by typing the following commands in the command prompt or terminal. Actually, the first thing is to install the latest version of Node.js, if you haven’t done so already. Download Node.js from nodejs.org.
npm install ionic -g
npm install cordova -g

Also, you'll need to install Cordova as Ionic Apps require Cordova (ok, this is technically the second first thing to do…). Cordova wraps your HTML, SCSS, and TS based Web App into a Native Android or iOS App, which is often a good option.

Finally, let’s create our first Ionic App:
ionic start blank
Replace the above default text with the name of your choice to create an app. For this article, I used the name HighChartsIonic. “blank” is a template name to create a blank Ionic App with minimal pre-written code.
ionic start HighChartsIonic blank

Once this command finishes its execution, a new folder with the name HighChartsIonic is created. Open that folder in the text editor of your choice; I use VS Code as a text editor, as it allows me to run the app in the browser (you may naturally use any other IDE of your choice). Open the terminal from the view menu or press Ctrl + ` (backtick) and write the following command:
ionic serve 

This command builds and launches the app in the browser. To get a more mobile-like view in the browser use the –l flag to launch the app in the lab mode.
ionic serve –l 

At this point of the project, you should see something like this in the browser:

This is a preview of how the application will look like on a real mobile device. Let’s bring in Highcharts and create a chart on this page. Go back to VS Code. In the terminal, press Ctrl + C to stop the Ionic Development Server. Type in the following commands to install Highcharts.
npm install highcharts –save

The result will look like:

The message on the screen is the information that tells you the Highcharts module has been installed successfully (notice the text in this color).
Open the file ./src/pages/home/home.html and replace everything inside the ion-content tag with a div like this.

<div id="container" style="display: block;"></div>

This div is a container to hold the chart. I wrote the code in the home.ts file. home.html and home.ts are the files in charge of creating the home page in the app.

In home.ts, on the top, import the highcharts module first.

import * as HighCharts from 'highcharts';

Next, create a function called ionViewDidLoad() inside the HomePage class, just after the constructor. The file should look like this:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import * as HighCharts from 'highcharts';

@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {

constructor(public navCtrl: NavController) {
}

ionViewDidLoad(){
}
}

The ionViewDidLoad function is a special function which is executed after the View has been initialized and loaded; this makes sure to avoid any errors during the components’ access in the view. Create a new HighCharts.chartobject in the ionViewDidLoad:

var myChart = HighCharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});

 Save the file, and in the terminal type ionic serve –l to run the app in the browser in lab mode. The app should look like this:

The charts are now visible on the homepage of the Ionic 3 App. Let’s play around with the chart object a little bit and see how it modifies the charts in the app.
Change the chart.type property in the JSON object to a line and save the file. The browser will reload the app in a few seconds as soon as the file is saved. The result should look like:

Awesome, isn’t it? Let’s try one more thing. Change the chart’s type to spline and save again. Let the magic happen.

I can also generate the graph series data using a function. For now, I use a for-loop to generate random dummy data, but in a real app, the data could come from an API, web service, or calculations.

Replace the existing data objects of both the series with the data object:

ionViewDidLoad

Save the file and let the app reload in the browser. You will get random graphs like the ones shown below:

Feel free to play with the code and try out new properties and functions. Check out the Official Highcharts Docs to learn more about Highcharts.

I enjoyed this project, and I hope it will help you to set up great charts. I would love to hear your comments and experiences.

mobile app Ionic (mobile app framework) Chart Highcharts

Published at DZone with permission of , DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Related

  • Ionic App Development Over Other Frameworks: Is It Hyped?
  • The Most Popular Angular UI Libraries To Try in 2021
  • Charts With Modern React and D3
  • Interactive Data Visualization in Ionic 5

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends: