Reply To: How can i use canvasjs in ionic 2?

[vijaydeveloper]

Hi Follow the below-given steps:
Generate a New Ionic 2 Application

ionic start ionic2-charts blank
cd ionic2-charts

Install Chart.js
npm install chart.js –save
import { Chart } from ‘chart.js’;

Set up the Template

<ion-header>
<ion-navbar color=”danger”>
<ion-title>
Charts in Ionic 2
</ion-title>
</ion-navbar>
</ion-header>

<ion-content>

<ion-card>
<ion-card-header>
Bar Chart
</ion-card-header>
<ion-card-content>
<canvas #barCanvas></canvas>
</ion-card-content>
</ion-card>

<ion-card>
<ion-card-header>
Doughnut Chart
</ion-card-header>
<ion-card-content>
<canvas #doughnutCanvas></canvas>
</ion-card-content>
</ion-card>

<ion-card>
<ion-card-header>
Line Chart
</ion-card-header>
<ion-card-content>
<canvas #lineCanvas></canvas>
</ion-card-content>
</ion-card>

</ion-content>

Modify src/pages/home/home.scss to reflect the following:

.ios, .md {

page-home {

.scroll-content {
background-color: map-get($colors, light);
}

ion-card-header {
font-weight: bold;
}

}

}

Create the Graphs

Modify src/pages/home/home.ts to reflect the following:

import { Component, ViewChild } from ‘@angular/core’;
import { NavController } from ‘ionic-angular’;
import { Chart } from ‘chart.js’;

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

@ViewChild(‘barCanvas’) barCanvas;

barChart: any;

constructor(public navCtrl: NavController) {

}

ionViewDidLoad() {

this.barChart = new Chart(this.barCanvas.nativeElement, {

type: ‘bar’,
data: {
labels: [“Red”, “Blue”, “Yellow”, “Green”, “Purple”, “Orange”],
datasets: [{
label: ‘# of Votes’,
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
‘rgba(255, 99, 132, 0.2)’,
‘rgba(54, 162, 235, 0.2)’,
‘rgba(255, 206, 86, 0.2)’,
‘rgba(75, 192, 192, 0.2)’,
‘rgba(153, 102, 255, 0.2)’,
‘rgba(255, 159, 64, 0.2)’
],
borderColor: [
‘rgba(255,99,132,1)’,
‘rgba(54, 162, 235, 1)’,
‘rgba(255, 206, 86, 1)’,
‘rgba(75, 192, 192, 1)’,
‘rgba(153, 102, 255, 1)’,
‘rgba(255, 159, 64, 1)’
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}

});

}

Modify src/pages/home/home.ts to reflect the following:

import { Component, ViewChild } from ‘@angular/core’;
import { NavController } from ‘ionic-angular’;
import { Chart } from ‘chart.js’;

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

@ViewChild(‘barCanvas’) barCanvas;
@ViewChild(‘doughnutCanvas’) doughnutCanvas;
@ViewChild(‘lineCanvas’) lineCanvas;

barChart: any;
doughnutChart: any;
lineChart: any;

constructor(public navCtrl: NavController) {

}

ionViewDidLoad() {

this.barChart = new Chart(this.barCanvas.nativeElement, {

type: ‘bar’,
data: {
labels: [“Red”, “Blue”, “Yellow”, “Green”, “Purple”, “Orange”],
datasets: [{
label: ‘# of Votes’,
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
‘rgba(255, 99, 132, 0.2)’,
‘rgba(54, 162, 235, 0.2)’,
‘rgba(255, 206, 86, 0.2)’,
‘rgba(75, 192, 192, 0.2)’,
‘rgba(153, 102, 255, 0.2)’,
‘rgba(255, 159, 64, 0.2)’
],
borderColor: [
‘rgba(255,99,132,1)’,
‘rgba(54, 162, 235, 1)’,
‘rgba(255, 206, 86, 1)’,
‘rgba(75, 192, 192, 1)’,
‘rgba(153, 102, 255, 1)’,
‘rgba(255, 159, 64, 1)’
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}

});

this.doughnutChart = new Chart(this.doughnutCanvas.nativeElement, {

type: ‘doughnut’,
data: {
labels: [“Red”, “Blue”, “Yellow”, “Green”, “Purple”, “Orange”],
datasets: [{
label: ‘# of Votes’,
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
‘rgba(255, 99, 132, 0.2)’,
‘rgba(54, 162, 235, 0.2)’,
‘rgba(255, 206, 86, 0.2)’,
‘rgba(75, 192, 192, 0.2)’,
‘rgba(153, 102, 255, 0.2)’,
‘rgba(255, 159, 64, 0.2)’
],
hoverBackgroundColor: [
“#FF6384”,
“#36A2EB”,
“#FFCE56”,
“#FF6384”,
“#36A2EB”,
“#FFCE56”
]
}]
}

});

this.lineChart = new Chart(this.lineCanvas.nativeElement, {

type: ‘line’,
data: {
labels: [“January”, “February”, “March”, “April”, “May”, “June”, “July”],
datasets: [
{
label: “My First dataset”,
fill: false,
lineTension: 0.1,
backgroundColor: “rgba(75,192,192,0.4)”,
borderColor: “rgba(75,192,192,1)”,
borderCapStyle: ‘butt’,
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: ‘miter’,
pointBorderColor: “rgba(75,192,192,1)”,
pointBackgroundColor: “#fff”,
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: “rgba(75,192,192,1)”,
pointHoverBorderColor: “rgba(220,220,220,1)”,
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [65, 59, 80, 81, 56, 55, 40],
spanGaps: false,
}
]
}

});

}

}

For complete tutorials click here: https://hackr.io/tutorials/learn-ionic