Support

Account

Home Forums Gutenberg JavaScript Based Gutenberg Block

Unread

JavaScript Based Gutenberg Block

  • Hello there,
    I was developing the Gutenberg block using ACF, but got stuck on a point when the block I’m going to create is a Chart based on JavaScript. Each block should have a self initialization script ( check id myChart in the JS below ) and a page may have more than one block.

    HTML Markup:

    <div class="width-fix"><canvas id="myChart"></canvas></div>

    Javascript:

    var ctx = document.getElementById("myChart").getContext("2d");
    var myChart = new Chart(ctx, {
        type: "bar",
        plugins: [ChartDataLabels],
        data: {
            labels: [
                "Caterpillar Men's Pelton Industrial & Construction Shoe",
                "Martens Unisex 2976 Slip-Resistant Service Boots",
                "Wolverine Men’s Floorhand Waterproof 10-Inch Soft Toe Work Boot",
                "Caterpillar Men’s Excavator XL Pull-On Construction Boot",
                "Ariat Men’s Groundbreaker Pull-On Work Boot",
                "Caterpillar Men’s Pelton Industrial & Construction Shoe",
                "Martens Unisex 2976 Slip-Resistant Service Boots",
                "Wolverine Men’s Floorhand Waterproof 10-Inch Soft Toe Work Boot",
                "Caterpillar Men’s Excavator XL Pull-On Construction Boot",
            ],
            datasets: [ ...

    Question is, how I can initialize each of the charts added on a page that depends on Javascript?

    Thanks

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.