Kendo Angular Chart Doesn't Update When Data Changes

32 views Asked by At

I'm trying to create graph with angular and kendo.

I've a dropdown to select which sub dataset to show, but when I assign new values to data array, it doesn't update on the graph. It's only shown if I assign values while creating the array but I want it to change dynamically when user selected which data to see.

Here is my html;

<div align="center" class="row">
    <div class="col-lg-4">
      <label class="control-label">{{assignmentGroupLabel | translate}}</label>
    </div>
    <div class="col-lg-8" style="text-align: center;">
      <div>
        <kendo-dropdownlist
        [data]="filteredAssignmentGroup"
        [textField]="'assignmentGroupName'"
        [valueField]="'assignmentGroupName'"
        [filterable]="true"
        [valuePrimitive]="true"
        (filterChange)="onAssignmentGroupFilterChange($event)"
        (valueChange)="onAssignmentGroupValueChange($event)">
        </kendo-dropdownlist>
      </div>
      <button kendoButton (click)="setData()" class="k-button">Browse</button>
    </div>
  </div>
  <br>

  <kendo-chart> 
    <kendo-chart-series>
      <kendo-chart-series-item
        type="bar"
        [gap]="2"
        [spacing]="0.25"
        [data]="graphClosedValues"
      >
      </kendo-chart-series-item>
      <kendo-chart-series-item type="bar" [data]="graphOpenValues">
      </kendo-chart-series-item>
    </kendo-chart-series>
    <kendo-chart-category-axis>
      <kendo-chart-category-axis-item [categories]="graphLabels">
      </kendo-chart-category-axis-item>
    </kendo-chart-category-axis>
  </kendo-chart>

How I assign data;

  public onAssignmentGroupValueChange(value: any): void {

    const filteredData = this.graphComponent.managamentBasedGraphRawDataFilter.filter(item =>
      item.name.toLowerCase().includes(value.toLowerCase())
    );

    this.graphOpenValues = filteredData[0]["openValues"];
    this.graphClosedValues = filteredData[0]["closedValues"];


    this.graphComponent.managamentBasedGraphRawDataFilter = this.graphComponent.managamentBasedGraphRawData;
  }

Data example;

[ { "name": "Set1", "closedValues": [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ], "openValues": [ 0, 0, 52, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0 ] }, { "name": "Set2", "closedValues": [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 0, 0, 0, 0, 0 ], "openValues": [ 0, 0, 0, 0, 0, 0, 0, 0, 8, 21, 0, 0, 0, 0, 0 ] } ]

0

There are 0 answers