Chartjs-How to Integrating Chart.js with Angular 7 with Data from database

by

0👍

Hey I found this article to be super helpful : http://tobiasahlin.com/blog/chartjs-charts-to-get-you-started/.

It has helped me a lot understanding ChartJS.

JUST Format the API-data in the formats mentioned in the examples and it would be good to go.

in .HTML file  ``` <canvas #lineCanvas></canvas> ```

in .TS file  ```
import { Component, ViewChild, OnInit } from '@angular/core';
import { NavController, MenuController, NavParams, ToastController } from 'ionic-angular';
import { Chart } from 'chart.js';
import { DashboardProvider } from '../../providers/dashboard/dashboard';
import { tokenKey } from '@angular/core/src/view';

@Component({
    selector: 'page-dashboard',
    templateUrl: 'dashboard.html',
    providers: [DashboardProvider]
})

export class DashboardPage implements OnInit {
    @ViewChild('lineCanvas') lineCanvas;
    lineChart: any;
    GetAthleteScoreByTest : any;

    constructor(public navCtrl: NavController,
        private dashApis: DashboardProvider) {
    }

    ngOnInit() {
      this.dashApis.GetAthleteScoreByTest(ACCESS_TOKEN)
                .subscribe(
                    (response) => {
                        this.GetAthleteScoreByTest = response["data"];
                        let labels = ['0'];
                        let data = [0];
                        let i = 1;
                        this.GetAthleteScoreByTest.forEach(element => {
                            data.push(element["AthleteScore"]);
                            labels.push(i.toString());
                            ++i;
                        });
                        this.lineChart = new Chart(this.lineCanvas.nativeElement, {

                            type: 'line',
                            data: {
                                labels: labels,
                                datasets: [
                                    {
                                        label: "Score Comparision",
                                        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: data,
                                        spanGaps: false,
                                    }
                                ]
                            }

                        });
                    },
                    (error) => {

                    }
                );
    }
}

Leave a comment