When I uploaded inserted a line chart into my ts file and placed it into my page, the chart continuously flashes and data points jump up and down. I cant seem to find the problem and I’ve tried a few different methods of creating the chart.
main.html
<!–
Generated template for the Main page.
See http://ionicframework.com/docs/v2/components/#navigation for more info on
Ionic pages and navigation.
-->
<ion-header>
<ion-navbar>
<ion-title>HIIT Main</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-card>
<button ion-button (click)="updateData()">Update Line Chart Data</button>
<ion-card>
<ion-card-header>
Line Chart
</ion-card-header>
<ion-card-content>
<canvas #lineCanvas></canvas>
</ion-card-content>
</ion-card>
</ion-card>
</ion-content>
main.ts
import { Component, ViewChild } from ‘@angular/core’;
import { NavController, NavParams } from ‘ionic-angular’;
import { Chart } from ‘chart.js’
/*
Generated class for the Main page.
See http://ionicframework.com/docs/v2/components/#navigation for more info on
Ionic pages and navigation.
*/
@Component({
selector: 'page-main',
templateUrl: 'main.html'
})
export class MainPage {
@ViewChild('lineCanvas') lineCanvas;
lineChart: any;
constructor(public navCtrl: NavController, public navParams: NavParams) {
this.navCtrl.setRoot(MainPage);
}
ionViewDidLoad() {
console.log('ionViewDidLoad MainPage');
this.lineChart = this.getLineChart();
/*
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,
}
]
}
});
*/
}
updateData() {
// After instantiating your chart, its data is accessible and can be changed anytime with the function update().
// It takes care of everything and even redraws the animations :D
this.lineChart.data.datasets[0].data = [Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100,Math.random() * 100];
this.lineChart.update();
}
getChart(context, chartType, data, options?) {
return new Chart(context, {
type: chartType,
data: data,
options: options
});
}
getLineChart() {
var 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,
},
{
label: "My Second dataset",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(175,92,192,0.4)",
borderColor: "rgba(31,156,156,1)",
borderCapStyle: 'butt',
borderDash: [5, 8],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(31,156,156,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(31,156,156,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [15, 39, 50, 81, 51, 55, 30],
spanGaps: false,
}
]
};
return this.getChart(this.lineCanvas.nativeElement, "line", data);
}
}