Utilizing Chart.js to display information sourced from this Chart.js documentation
Access the screenshot of the code
Utilizing Chart.js to display information sourced from this Chart.js documentation
Access the screenshot of the code
I recently came across an insightful article that really helped me understand ChartJS. Here is the link: .
The article was a game-changer for me in grasping the concepts of ChartJS. It's a must-read!
By formatting the API-data as specified in the examples, you'll be good to go with your ChartJS implementation.
In your .HTML file:
<canvas #lineCanvas></canvas>
In your .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) => {
}
);
}
}
I am looking to merge two sets of routes from different modules in my application. The first module is located at: ./app-routing.module.ts import {NgModule} from '@angular/core'; import {Routes, RouterModule} from '@angular/router'; i ...
What is the correct way to annotate component props that can accept either a Component or a string representing an HTML tag? For instance, imagine I have a component that can receive a custom Component (which includes HTML tags like div, p, etc.). The cod ...
Utilizing Angular 2 alongside a Laravel PHP Framework for my API, the Angular 2 project runs on http://localhost:4200/, while the Laravel PHP Framework operates on http://localhost:80/laravel/public. Upon executing the following code snippet within my Ang ...
Is there a way to automatically run VSCode's 'Organize Imports' quickfix on every file in a project, similar to how tslint can be run programatically over the entire project? tslint --project tsconfig.json --config tslint.json --fix I want ...
Let's modify this from @types/aws-lambda to clearly indicate that our intention is for pathParameters to not be null and have a specific format. export interface APIGatewayProxyEventBase<TAuthorizerContext> { body: string | null; headers ...
Closed. This question requires additional information for debugging purposes. It is not currently accepting answers. ...
I have been working on an app using Next JS and typescript. My goal is to fetch data from an api using getStaticProps, and then destructure the returned props. Unfortunately, I am facing some issues with de-structuring the props. Below is my getStaticProp ...
I have implemented a custom directive for a date picker in my project. Below is the code snippet of the template: <div class="input-group"> <input type="text" id="tbxDate" pattern="\d{1,2}/\d{1,2}/\d{4}" ...
Having trouble implementing a parameterized query in NgRx and receiving empty results. Check out the StackBlitz version of the code here: https://stackblitz.com/edit/ngrx-parameterized-query Update to Reducer Code export const userAdapter = createEntity ...
My current code has a functionality that works, but I'm not satisfied with using it. await new Promise(resolve => setTimeout(resolve, 10000)); I want to modify my code so that the second call waits for the result of the first call. If I remove the ...
Currently, I am working on creating a .d.ts file for an external library called nodejs-driver. While I have been able to map functions and objects successfully, I am struggling with incorporating the "inherit from objects defined in the JS library" conce ...
Currently, I am implementing Observable in angular 2 with rxjs. As part of my demonstration, I have utilized fromEvent in a Plunker. Here is the link to my demo: https://plnkr.co/edit/zkgEcdn21CvIKoOycUOy?p=preview In this demo, I have included two input ...
Recently, I have been immersing myself in learning NodeJs, Express, React, monogoDB and Typescript after working extensively with MVC C# SQL Databases. For my first project, I created a simple Hello World program that interacts with an Express server to d ...
I have created a custom capitalization pipe that successfully capitalizes almost all characters, including converting the Turkish 'ı' character into 'I'. However, I am facing an issue where the 'i' character is also being con ...
According to the documentation on ag-grid: If Backspace or Delete is pressed, the default editor will clear the contents of the cell. However, this behavior does not apply when using the "agSelectCellEditor." Pressing Delete or Backspace puts the cell i ...
Currently, I am in the process of learning typescript by reimagining a flowtype prototype that I previously worked on. However, I have hit a roadblock with a particular issue. error TS2322: Type '(state: State, action: NumberAppendAction) => State ...
I am faced with a dilemma regarding my Angular library that I often use in another project. The way I build my library is by running the command: ng build Upon executing this command, a dist/my-library directory is created at the library root. My goal is ...
I'm facing a challenge with navigating to a child component from the parent view. This is how my app-routing configuration looks: const routes: Routes = [ { path: '', redirectTo: 'home', pathMatch: 'fu ...
I'm completely new to Angular2 and I could really use some assistance with the following task. I need to take the input from a textbox and add it to a span in HTML. The requirement is to only make changes in the .ts file. I'm having trouble figu ...
When working with typescript, it's important to define the variable type. Consider this example: userData: {id: number, name: string}; But what if you want to allow other keys with any types that won't be validated? Is there a way to achieve thi ...