Home forums Using CanvasJS How can i use canvasjs in ionic 2?

This topic contains 4 replies, has 3 voices, and was last updated by  vijaydeveloper 2 months, 2 weeks ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #20945

    Nava
    Member

    Is there a tutorial or some information about this?

    #20954

    Vishwas R
    Keymaster

    @danniela_navarrete77,

    You can save CanvasJS file (canvasjs.min.js) in src folder of your project (‘src/assets/js’ or ‘src/lib’) and import the CanvasJS library to your app using import CanvasJS from 'canvasjs.min' (path may vary based on file location like ‘./src/assets/js/canvasjs.min’ or ‘./src/lib/canvasjs.min’). Or you can add it in your html file using script-tag. Please take a look at this ionic documentation on Adding 3rd Party Libraries.

    Also please refer this tutorial on How to Install 3rd Party Libraries in Ionic 2 and step-by-step guide given in this github thread for more info.


    Vishwas R
    Team CanvasJS

    #20993

    Nava
    Member

    so.. if i want to make the example of render chart by input. how can i fit my code?
    what part will go in .html and .ts
    p.d. i’m learning to use it :C

    #20997

    Vishwas R
    Keymaster

    @danniela_navarrete77,

    Just like having DOM in a website/web-app, you can create a DOM for chart-container in html and script-part goes inside js/ts (based on your usage) files. Please take a look at this tutorial on Building Mobile App with Angular & Ionic. Also please refer this tutorial on Ionic.


    Vishwas R
    Team CanvasJS

    #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 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.