Home Forums Chart Support Charts with drop down button to filter

Charts with drop down button to filter

Viewing 10 posts - 16 through 25 (of 25 total)
  • #28763


    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 = new CanvasJS.Chart("chartContainer",chartOptions);
      chart.options.data[0].dataPoints = [];
    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});

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

    Render Chart from Dropdown value with Animation

    Indranil Deo
    Team CanvasJS


    Really appreciate your guidance here Indranil!


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



    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 –


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


      let dps = this.jsonData[val]; 
      this.chart.options.data[0].dataPoints = dps;

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

    Chart from Dropdown list in Angular

    Indranil Deo
    Team CanvasJS


    Hi, wondering if its possible to get assistance.

    Im trying to get the data source to be a csv file, and the dropdown to be different fields in the csv file.

    I can pull a CSV file in, but i dont understand how to map the csv fields dynamically to ta dropdown to populate the chart.options.data[0].dataPoints

    Ive attached parts of the code here:




    To render chart with data from selected column of CSV file, you can populate the dropdown with all the columns present in the CSV file & update chart data based on selected option. Please take a look at this JSFiddle for an example of the same.

    CSV data using dropdown

    Sachin Bisht
    Team CanvasJS


    awesome, that seems to have solved my issue. Thank you


    Ive run into another issue, My CSV data looks like this:

    fa7a2fc-84c3-4a65-842f-3de3b5a1fb77 1 HANGUP 11272022440 11285292205 1713344742506 1713344742506 1713344742506 5.748 4.299 1.449 0

    How do i get the column labels to match the top row, and also i dont see any data from the 2nd row onwards in my graph?

    It works when i use your CSV in the example, but not with mine?

    It does calculate that there are 11 columns though.


    EDIT… The true CSV looks like this:


    Im trying to get the dropdown to show the toprow as options, and the X Axis to show Column 1, and the Y axis to flip between columns 2-11.

    Is this even possible?



    Updating the parsing logic according to your CSV data should work fine in this case. Kindly have a look at updated JSFiddle of the same.

    Sachin Bisht
    Team CanvasJS

Viewing 10 posts - 16 through 25 (of 25 total)

You must be logged in to reply to this topic.