Charts with drop down button to filter

[Indranil]

@mbrodersen,

Chart animates only on the first/initial render, as of now. To animate at every subsequent selection, you can destroy and re-create the chart as shown in the code snippet below –

$( ".dropdown" ).change(function() {
  chart.destroy();
  chart = new CanvasJS.Chart("chartContainer",chartOptions);
  chart.options.data[0].dataPoints = [];
  selectDataSeries();
});

function selectDataSeries(){
  var selected = element.options[element.selectedIndex].value;
  dps = jsonData[selected];
  for(var i in dps) {
    var xVal = dps[i].x;
    chart.options.data[0].dataPoints.push({x: new Date(xVal), y: dps[i].y});
  }
  chart.render();
}

Please take a look at this JSFiddle for a working example.

___________
Indranil Deo
Team CanvasJS

[mbrodersen]

Really appreciate your guidance here Indranil!

[Suneetha5454]

Can anyone help me in displaying the different chart selected from dropdown menu using angular?

[Indranil]

@suneetha5454,

To modify a chart based on dropdown selection you need to update the chart options / data according to the options selected from the dropdown list using the ngModelChange event. Please check the code snippet below –

HTML

<select [(ngModel)]="selectedValue" (ngModelChange)='onChange($event)'>
  <option *ngFor="let option of options" [value]="option.id">
    {{option.name}}
  </option>
</select>

TS

onChange(val:any){
  let dps = this.jsonData[val]; 
  this.chart.options.data[0].dataPoints = dps;
  this.chart.render();
}

Also, kindly take a look at this StackBlitz for a working example.

___________
Indranil Deo
Team CanvasJS