-
Notifications
You must be signed in to change notification settings - Fork 3
Component: Charts
The key to mastering how to implement chartjs in this project lies in following this amazing tutorial: https://www.joshmorony.com/adding-responsive-charts-graphs-to-ionic-2-applications/
He tells you what to install, where to import everything, and how to generate a chart. The main thing that I was missing from my first attempts to integrate chartjs was viewChild, and it's ABSOLUTELY necessary to get the chart to display correctly. Just follow the tutorial and you should be fine.
For the chart labels to be drawn and to prevent errors, this package must be installed - import 'chartjs-plugin-labelsreboot';
The package above is just a modified version of: Chartjs plugin labels
The package was customized to allow the labels to wrap around the outside of the polar area chart with a radius, rather than being strings that are straight lines.
The type of chart we use in the app via chartjs is a "polar area" chart.
The data in the chart is stored in arrays, and data is displayed clockwise starting at 12:00.
As an example, if the data is this array - data: [10, 0, 5, 2, 2, 5, 8, 1] - you'll see in the chart that the first pie piece goes up to ten at 12:00, the next piece going clockwise goes to 0, the next piece going clockwise goes to 5, and so on and so forth.
The chart takes an array as mentioned above, to get the data the constructor inside the .ts file queries the most recent assessment from the chartProvider. It is also important to note that the buildChart function takes the response from the provider, the 'res' argument is the array that the chart needs in order to build.
` constructor(public chartProvider: ChartProvider) { //this subscribes to the provider which gets the data from the DB this.chartProvider.mostRecentData().subscribe(res=>{ //calls the function that draws the chart on the canvas within the .html file of the component taking the response from the provider as an argument. this.buildChart(res) })
}`