Chart.js in tablepress table

  • Resolved rsteinhoff

    (@rsteinhoff)


    9 years, 2 months ago

    Hi Tobias!

    The following code creates a chart:

    <script type=”text/javascript” src=”https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.bundle.min.js”></script><div style=”height:300px;width:300px;”><canvas id=”ROEChart” width=”100″ height=”100″></canvas><script>var ctx = document.getElementById(“ROEChart”);var myChart = new Chart(ctx, { type: ‘bar’,data: { labels:[“-5Y”, “-4Y”, “-3Y”, “-2Y”, “-1Y”, “Current”],datasets: [{ label: ‘5yr Return on Equity’, data: [38.95,32.38,26.56,26.94,27.56,46.38],backgroundColor: [‘rgba(58, 187, 196, 0.2)’,’rgba(58, 187, 196, 0.2)’,’rgba(58, 187, 196, 0.2)’,’rgba(58, 187, 196, 0.2)’,’rgba(58, 187, 196, 0.2)’,’rgba(58, 187, 196, 0.2)’],borderColor: [‘rgba(46, 153, 160, 1)’,’rgba(46, 153, 160, 1)’,’rgba(46, 153, 160, 1)’,’rgba(46, 153, 160, 1)’,’rgba(46, 153, 160, 1)’,’rgba(46, 153, 160, 1)’],borderWidth:1}]},options: { scales: { yAxes: [{ ticks:{ beginAtZero:true }}] } } });</script></div>

    However, when I put it in a tablepress table nothing appears.

    Any insight into this?

    Thanks so much!

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Tobias Bäthge

    (@tobiasbg)

    9 years, 2 months ago

    Hi,

    thanks for your post, and sorry for the trouble.

    Can you please post a link to the page with the table where this problem happens, so that I can take a direct look? Thanks!

    Regards,
    Tobias

    Thread Starter rsteinhoff

    (@rsteinhoff)

    9 years, 2 months ago

    Hi Tobias!

    Thanks for getting back to me.

    Here’s a page I made: http://tickrz.com/js-chart-test/

    Any help would be much appreciated.

    Thanks!

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    9 years, 2 months ago

    Hi,

    thanks for the link! The problem here is that there are multiple chart elements on the page that all have the same HTML ID “ROEChart”,
    via the HTML code
    <canvas id="ROEChart" width="100" height="100"></canvas>
    Due to that, the JS code that you added to the TablePress cell will simply render the chart in the wrong place.

    All that’s necessary here should be to use page-wide unique HTML IDs for the charts canvas elements.

    Regards,
    Tobias

    Thread Starter rsteinhoff

    (@rsteinhoff)

    9 years, 2 months ago

    haha! Thank you! Can’t believe this oversight!

    Actually, I just put this page together quickly to test a few things but the real issue I was having was related to exactly the same problem you observed. In each Tablepress table I have divs that turn off/on depending on the user’s device (e.g., mobile, desktop, ipad, etc.). Turns out the chart was confused because I had the same chart in mobile, desktop, ipad, etc. divs with the same chart names but with the intention of only showing one of them depending on the device–but I did not think that I technically had them in the code multiple times.

    Thank you!!

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    9 years, 2 months ago

    Hi,

    no problem, you are very welcome! 🙂 Good to hear that this helped!

    Best wishes,
    Tobias

    P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!

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

The topic ‘Chart.js in tablepress table’ is closed to new replies.