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

    @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.

    Render Chart from Dropdown value with Animation

    ___________
    Indranil Deo
    Team CanvasJS

    #28770

    Really appreciate your guidance here Indranil!

    #33624

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

    #33676

    @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.

    Chart from Dropdown list in Angular

    ___________
    Indranil Deo
    Team CanvasJS

    #44958

    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:

    https://jsfiddle.net/hr9jmpgs/

    #44979

    @abraham-celiksecureco-co,

    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

    #44985

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

    #44987

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

    CALLUUID CALLSEQUENCENO CALLSTATE CALLINGPARTY CALLEDPARTY CALLSTARTTIME CALLANSWERTIME CALLENDTIME CALLDURATION CALLBILLABLEDURATION CALLANSWERDELAY CALLALERTINGDELAY
    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.

    #44996

    EDIT… The true CSV looks like this:

    CALLUUID,CALLSEQUENCENO,CALLSTATE,CALLINGPARTY,CALLEDPARTY,CALLSTARTTIME,CALLANSWERTIME,CALLENDTIME,CALLDURATION,CALLBILLABLEDURATION,CALLANSWERDELAY,CALLALERTINGDELAY
    afa7a2fc-84c3-4a65-842f-3de3b5a1fb77,1,HANGUP,+12272011111,+11285291111,1713344742506,1713344743955,1713344748254,5.748,4.299,1.449,0
    bed9efb8-9aae-4e5b-b1a7-914086894be4,2,HANGUP,+12272571111,+11285291111,1713344743008,1713344744199,1713344749256,6.248,5.057,1.191,0

    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?

    #45001

    @abraham-celiksecureco-co,

    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.