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 ] } ]