Forum Replies Created by vijaydeveloper

Viewing 1 post (of 1 total)
  • in reply to: How can i use canvasjs in ionic 2? #22919

    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

Viewing 1 post (of 1 total)