Home Forums Chart Support CanvasJS in Angular 6

CanvasJS in Angular 6

Viewing 6 posts - 1 through 6 (of 6 total)
  • #24996

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

    #25003

    @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.

    Angular Column / Bar Chart


    Vishwas R
    Team CanvasJS

    #25004

    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 2 years, 7 months ago by yansonalvin97.
    #25010

    @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.
    column chart from JSON data

    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

    #25023

    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 2 years, 7 months ago by yansonalvin97.
    #25040

    @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

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.