You must be logged in to post your query.
Home › Forums › Chart Support › Charts with drop down button to filter
Tagged: chart filter, drop-down menu
@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
Really appreciate your guidance here Indranil!
Can anyone help me in displaying the different chart selected from dropdown menu using angular?
@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.
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/
@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.
__ 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:
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.
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?
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
You must be logged in to reply to this topic. Login/Register