Home forums Using CanvasJS Charts with drop down button to filter

This topic contains 8 replies, has 3 voices, and was last updated by  Carmen 9 months ago.

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

    Carmen
    Member

    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)

    #18852

    Indranil Deo
    Member

    Carmen,

    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

    #18859

    Carmen
    Member

    Exactly!! Thank you so much!!!

    #18883

    Carmen
    Member

    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!

    #18887

    Vishwas R
    Keymaster

    Carmen,

    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

    #18893

    Carmen
    Member

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

    #18894

    Carmen
    Member

    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…

    Thanks!!

    #18895

    Vishwas R
    Keymaster

    Carmen,

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


    Vishwas R
    Team CanvasJS

    #18908

    Carmen
    Member

    Got it!! Thanks a lot!

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

You must be logged in to reply to this topic.