Home forums Using CanvasJS Problem on Bar Char Click Event

This topic contains 3 replies, has 2 voices, and was last updated by  Vishwas R 6 days, 10 hours ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #23652

    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://canvasjs.com/assets/script/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?

    #23653

    Vishwas R
    Keymaster

    @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

    #23699

    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!

    #23708

    Vishwas R
    Keymaster

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