You must be logged in to post your query.
Home › Forums › Chart Support › How can i use canvasjs in ionic 2?
Tagged: ionic, Ionic Tutorials
Is there a tutorial or some information about this?
@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.
import CanvasJS from 'canvasjs.min'
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
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
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.
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 } }] } }
});
@ViewChild(‘barCanvas’) barCanvas; @ViewChild(‘doughnutCanvas’) doughnutCanvas; @ViewChild(‘lineCanvas’) lineCanvas;
barChart: any; doughnutChart: any; lineChart: any;
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
You must be logged in to reply to this topic. Login/Register