Question 173139 in Javascript Question posted in
A very good W3school tutorial can be found here.

Can we use canvasjs-chart in Angular for 2way binding?

I am using canvasjs-chart in my angular to draw chart.(I am new in Angular)
here is my component ts code :

import { Component } from '@angular/core';
import { NgModule } from '@angular/core';
@Component({
  selector: 'app-counter-component',
  templateUrl: './counter.component.html'
})
export class CounterComponent {
  public books = [{
    title: "Life is good",
    author: "benny",
    category: "life"
  }, {
    title: 'Canned in',
    author: "francis",
    category: "style"
  }];
  chartOptions = {
    title: {
      text: "Basic Column Chart in Angular"
    },
    data: [{
      type: "line",
      dataPoints: [
        { label: "Apple", y: 121 },
        { label: "Orange", y: 15 },
        { label: "Banana", y: 25 },
        { label: "Mango", y: 30 },
        { label: "Grape", y: 28 }
      ]
    }]

  };
  public changeChartData() {
    this.chartOptions.data[0].dataPoints[0].y =20;
  }

As you can see I have a books object which it passed to html :

<button class="btn btn-primary" (click)="changeChartData()">change chart Data</button>
<canvasjs-chart [options]="chartOptions"></canvasjs-chart>

The data is shown correctly but my problem is when I click on the change chart Data to change the value of my books object I can’t see the changes in the chart .I think the problem is the chart is not binding to books object

Tags:

2

Answers


  1. 0

    You are dependant on how canvasjs-chart is set up. But its normal for libraries to utilize changeDetection.onPush strategy in their components. That means it will only update when the inputs changes and output triggers, now if it runs with onpush strategy however, mutations on objects would not be counted as a input change. So what you could do instead you need to set the changes as a new object.

    public changeChartData() {
    this.chartOptions ={
    title: {
      text: "Basic Column Chart in Angular"
    },
    data: [{
      type: "line",
      dataPoints: [
        { label: "Apple", y: 20 },
        { label: "Orange", y: 15 },
        { label: "Banana", y: 25 },
        { label: "Mango", y: 30 },
        { label: "Grape", y: 28 }
      ]
    }]

  };
}

    FYI: the bounding you are doing is one way binding. Two-way binding in angular binding is bindings that looks like [(value)] where the two-way binding is incased in @Input binding [] and @Output binding ()

    Login or Signup to reply.
  2. 0

    From the docs I see you need to call chart.render() after each option/data update:

    public changeChartData() {
   this.chartOptions.data[0].dataPoints[0].y =20;
   this.chart.render();
}

    Getting the chart object in Angular is described in the canvas-chart angular integration tutorial and in a working example:

    • declare a chart: any property in your component class
    • add a method to initialize the chart property
       getChartInstance(chart: object) {
       this.chart = chart;
   }
    • include the callback in the html:
    <canvasjs-chart [options]="chartOptions" (chartInstance)="getChartInstance($event)"></canvasjs-chart>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search