Home forums Using CanvasJS Charts with drop down button to filter

This topic contains 9 replies, has 4 voices, and was last updated by  ninu 4 months, 2 weeks ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
  • #18849

    Hi, I am looking a tutorial or a chart code to do a bar chart in which the user can filter by category with a drop-down menu and the bar chart changes. I’ve created something with tableau (using the filter), but I would like to learn with JS (I’m a beginner). If you could help me, I’d highly appreciate it!

    (Sorry if the answer is somewhere… I looked, but I didn’t find anything)



    Are you looking for something like this? If not kindly brief us further so that we can understand your requirements better and help you out.

    Indranil Deo,
    Team CanvasJS


    Exactly!! Thank you so much!!!


    Hi Indranil,
    I’ve got a problem using the code you shared and I cannot find where I’m making a mistake.

    I’ve been changing the code from the model, but as soon I change the “X” values by names instead of dates I lose the values in the chart and the chart is empty

    I think that there’s something in this part: chart.options.data[0].dataPoints.push({x: new Date(xVal), y: dps[i].y}); that I need to modify, but I cannot find the answer.

    You can have a look here to my code.

    Thanks in advance!



    The json in the fiddle that you have shared has label and y-value, where as while parsing the json you are trying to read x-value and y-vlaue out of it. Replacing x-value with label while parsing should work fine in your case.

    Please take a look at the updated jsfiddle.

    Vishwas R
    Team CanvasJS


    That’s great! Thank you so much for your help. It’s exactly what I need.


    I’ve created three different charts following the model you linked, and I want all of them in the same page.

    I did before here using Canvas tutorial. But it seems I need to do something different this time.

    I’ve updated the jsfiddle with some of the code I’m working on.

    Any idea…




    You just need to have separate charts for each dropdowns. Please take a look at this updated jsfiddle.

    Vishwas R
    Team CanvasJS


    Got it!! Thanks a lot!


    Hi Carmen previous example how to set Initail value for first showing graph

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.