Chartjs doesn’t work on page

  • Resolved kazazor

    (@kazazor)


    6 years, 1 month ago

    When trying to add a chartjs to the page it just doesn’t work. I’m forced to use google charts.
    In the charts library page, I do see the chartjs loading ok, but when copying its shortcode to the page nothing loads. The canvas in the DOM being created is empty.

    Why is this happening?
    Currently, I do not have the chartjs embedded in the page. I removed it since nothing worked except for me getting few empty rows where the chart is supposed to be.
    Please let me know if you’ll need my help with it and we can coordinate it so this behavior won’t exist for too long in my site.

    <div id=”visualizer-3248-77206561″ class=”visualizer-front visualizer-front-3248″ style=”position: relative;”>
    <canvas width=”200″ height=”180″ style=”width: 100px; height: 90px;”>
    </canvas>
    </div>

    Here is the chart in the charts library: https://ibb.co/wc1jPbK
    Here is the shortcode I added in the page: https://ibb.co/WDJktz5

    Don’t know if it matters or not, but this site is in Hebrew which is a Right to Left language.

    • This topic was modified 6 years, 1 month ago by kazazor.

    The page I need help with: [log in to see the link]

Viewing 10 replies - 1 through 10 (of 10 total)
  • Plugin Contributor contactashish13

    (@rozroz)

    6 years, 1 month ago

    @kazazor Can you create a test page on your site that embeds a google chart as well as a chartjs chart so that we can see what’s wrong?

    Please also deactivate all other plugins to make sure there is no conflict.

    Thread Starter kazazor

    (@kazazor)

    6 years, 1 month ago

    Sure thing, here you go: https://tachlescalcala.com/test-page-delete-me/

    The password to enter the page is: chartjstest

    Plugin Contributor contactashish13

    (@rozroz)

    6 years, 1 month ago

    @kazazor please disable the plugin/feature that optimizes our JS file. It seems to be causing an error: https://pasteboard.co/IXDkjey.png. If that does not work, please deactivate all plugins and then test.

    Thread Starter kazazor

    (@kazazor)

    6 years, 1 month ago

    This is a very popular plugin (https://wordpress.org/plugins/autoptimize/) that optimizes many sites (1+ million active installs). To be honest I do not think I’ll deactivate it for chartjs.
    Can you specify exactly what is the problem there and then file a bug in their plugin?

    I’m guessing I’m not the only having this problem and it’s better to solve it from its source.

    Plugin Contributor contactashish13

    (@rozroz)

    6 years, 1 month ago

    @kazazor you can see the error in the screenshot. You can use that to file a bug but only after making sure that turning it off solves the problem.

    Optimizing Matters

    (@optimizingmatters)

    6 years, 1 month ago

    pro-tip; you can disable Autoptimize on a per-request basis by adding ?ao_noptimize=1 to the URL.

    if the problem is not there at that point, some autoptimize (re-)configuration might be needed to fix this. there are troubleshooting tips and info on how to exclude in the AO FAQ.

    hope this helps debugging,
    frank (ao dev)

    Plugin Contributor contactashish13

    (@rozroz)

    6 years, 1 month ago

    @optimizingmatters thanks for the tip! @kazazor can you please implement this and check if the problem is resolved?

    Thread Starter kazazor

    (@kazazor)

    6 years, 1 month ago

    I do not have any code written there and everything is being done by the Theme, so not sure what I can do to try it out.

    In any case, I disabled the plugin and still the problem remains:
    VM1422 render-chartjs.js:130 Uncaught TypeError: Cannot read property ‘parentNode’ of undefined
    at renderSpecificChart (VM1422 render-chartjs.js:130)
    at renderChart (VM1422 render-chartjs.js:13)
    at render (VM1422 render-chartjs.js:384)
    at HTMLBodyElement.<anonymous> (VM1422 render-chartjs.js:390)
    at HTMLBodyElement.dispatch (VM1302 jquery.js:3)
    at HTMLBodyElement.r.handle (VM1302 jquery.js:3)
    at Object.trigger (VM1302 jquery.js:3)
    at Object.a.event.trigger (VM1308 jquery-migrate.min.js:2)
    at HTMLBodyElement.<anonymous> (VM1302 jquery.js:3)
    at Function.each (VM1302 jquery.js:2)

    I also tried to disable another plugin that tries to minify which is W3 Total Cache. Still doesn’t work.

    • This reply was modified 6 years, 1 month ago by kazazor.
    Plugin Contributor contactashish13

    (@rozroz)

    6 years, 1 month ago

    @kazazor so autoptimize is not at fault. Did you disable all other plugins and try with the default WP theme? If not, please try that as that is the only way to discover the conflict.

    Plugin Contributor contactashish13

    (@rozroz)

    6 years ago

    We haven’t heard from you in sometime so marking this as Resolved. If you continue to face an issue, please create a new ticket. We’d be happy to help.

    If you are satisfied with our product and support, kindly spare a moment to leave us a review. It would really help us spread the word!

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

The topic ‘Chartjs doesn’t work on page’ is closed to new replies.