FORUMS

Select any forum below to ask question

Home › Forums › Chart Support › Problem on Bar Char Click Event

Problem on Bar Char Click Event

Viewing 4 posts - 1 through 4 (of 4 total)
  • December 5, 2018 at 5:45 am #23652

    guilhermemaranhao

    Hi there,

    I’ve downloaded the canvasjs-2.2.zip at https://canvasjs.com/download-html5-charting-graphing-library/ but I’m facing a problem on click event.
    It’s a Ruby on Rails application and the canvas files are located in the assets/javascripts/canvasjs-2.2 directory. I’ve imported it in the application.html.erb

    <%= javascript_include_tag 'canvasjs-2.2/canvasjs.min.js' %>

    and in the config/initializers/assets.rb

    Rails.application.config.assets.precompile += %w( canvasjs-2.2/canvasjs.min.js )

    I’ve got the Bar Chart html sample on the tutorial, put it in my application, but the click event isn’t working properly as it is in the tutorial.
    The problem is that the events aren’t being dispatched according to my clicks on the bars, but on just some of them and sometimes, it is related to a bar that I’ve accessed previously.
    My html code is:

    <!DOCTYPE HTML>
<html>
<head>
    <script type="text/javascript">
        window.onload = function () {
            var chart = new CanvasJS.Chart("chartContainer",
                {
                    title:{
                        text: "Both dataSeries attached to Click events."
                    },
                    data:[
                        {
                            click: function(e){
                                alert(  "dataSeries Event => Type: "+ e.dataSeries.type+ ", dataPoint { x:" + e.dataPoint.x + ", y: "+ e.dataPoint.y + " }" );
                            },

                            indexLabelOrientation: "vertical",
                            type: "column",
                            dataPoints: [
                                { x: 10, y: 71},
                                { x: 20, y: 55},
                                { x: 30, y: 50 },
                                { x: 40, y: 65 },
                                { x: 50, y: 95 },
                                { x: 60, y: 68 },
                                { x: 70, y: 28 },
                                { x: 80, y: 34 },
                                { x: 90, y: 14}
                            ]
                        }]

                });

            chart.render();
        }
    </script>
    <script type="text/javascript" src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;">
</div>
</body>
</html>

    Does anybody know what could the reason for that?

    December 5, 2018 at 12:05 pm #23653

    Vishwas R

    @guilhermemaranhao,

    It seems to be working fine across browsers including Chrome, Firefox, Edge, Opera and IE.

    Can you kindly create sample project reproducing the issue, upload it to Google-Drive or Onedrive and share it to us – so that we can look into the code, understand the scenario better and help you out?

    —
    Vishwas R
    Team CanvasJS

    December 12, 2018 at 9:15 pm #23699

    guilhermemaranhao

    Thank you!

    It seems it’s an issue related to my current project, maybe a lib conflict or something on the page. I’ve created a test project and everything worked fine.

    Regards!

    December 13, 2018 at 11:01 am #23708

    Vishwas R

    @guilhermemaranhao,

    Glad that you figured out the issue and it’s working properly now :)

    —
    Vishwas R
    Team CanvasJS

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

You must be logged in to reply to this topic.