CanvasJS in Angular 6

[yansonalvin97]

Hi i’ve been using canvasjs for a long time in php and javascript. Does CanvasJS supports Angular 6? Thank you very much…

[Vishwas R]

@yansonalvin97,

CanvasJS Charts & StockCharts works with all versions of Angular / AngularJS including Angular 6. Below are the steps to integrate CanvasJS Chart / StockChart in your angular app.
1. Save canvasjs.min.js (canvasjs.stock.min.js incase of StockChart) within source-folder of your Angular application ( src or src/assets or src/lib )
2. Import the library into your app.
For Chart: import * as CanvasJS from './canvasjs.min';
For StockChart: import * as CanvasJS from './canvasjs.stock.min';

Please check out Angular Gallery for examples on integrating charts in Angular app.

—
Vishwas R
Team CanvasJS

[yansonalvin97]

Hi Vishwas, can you help me implement the chart which the data comes from json (NOT EXTERNAL JSON) in Angular 6. I’ve seen the Angular Gallery but I want to achieve the chart using the json output of my application not on an external json.

• This reply was modified 5 years, 7 months ago by yansonalvin97.

[Vishwas R]

@yansonalvin97,

Parsing the dataPoints to the format accepted by CanvasJS before passing it to chart-options should work fine in this case.

for (var i = 0; i <= result.length - 1; i++) {
  dataPoints.push({ x: Number(result[i].x), y: Number(result[i].y) });
}

Please take a look at this JSFiddle for rendering chart from JSON object.

If you are still facing issue, kindly share sample project along with sample JSON over Google-Drive or Onedrive, so that we can look into it and help you out.

—
Vishwas R
Team CanvasJS

[yansonalvin97]

Hi Vishwas, yep parsing dataPoints before passing to chart options should work fine and I already implemented it in php and javascript. My problem here now is that I’m using Angular 6. Can you do me a favor to create a sample chart given with this json which is the output of my application.

https://api.npoint.io/f6ff63d7c649a75fee74

Thank you very much… Kudos to your team… Great support.

PS. any chart data you would like to generate based on my json would be fine to me…

• This reply was modified 5 years, 7 months ago by yansonalvin97.

[Vishwas R]

@yansonalvin97,

based on the JSON that you have shared, passing name as label and age as y-value should work fine. Below is the code snippet.

function parseData(jsonData){
	for(var i = 0; i < jsonData.length; i++) {
		dataPoints.push({ label: jsonData[i].name, y: Number(jsonData[i].age)});
	}
}

Please take a look at this updated sample project for working code.

—
Vishwas R
Team CanvasJS