[Chartjs]-How to load chart data to an appended canvas

by

1👍

✅

<canvas id='myChart'></canvas> needs to exist before this
$(document).ready(function() { });
You’re literally calling something that doesn’t yet exist. Your canvas only exists after pressing the button meaning that the code written on the (document).ready() function will execute right after the DOM is ready, technically right after your button is created, so it wont wait for the user to click it.

What I would do is on the click event, after you add the canvas populate it.

 $(document).on("click", "#btnInsights", function() {
   $("#extentionBody")
     .empty()
     .append("<canvas id='myChart'></canvas>");

   if(!!document.getElementById('myChart')) {
    var ctx = document.getElementById('myChart').getContext('2d');
    data = {
       datasets: [
        {
          data: [10, 20, 30],
          backgroundColor: [
            "rgba(35, 209, 96, 1)",
            "rgba(50, 115, 220, 1)",
            "rgba(255, 59, 96, 1)"
          ]
        }
      ], 
      labels: ["Positive", "Neutral", "Negative"]
    };
    var myPieChart = new Chart(ctx, {
      type: "pie",
      data: data,
      options: {}
    });
  }
});

Leave a comment