CODEWITHSUNDEEP
jquerymodal-dialogmaterialize
Gaz Smith
Gaz Smith

Reputation: 1108

Chart.Js not working in Jquery Modal Dialog

I am using Jquery with Materialize css framework.

I am currently displaying a graph.js graph on the page using the below code :

var radarChartData = {
    labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
    datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(220,220,220,0.2)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: [65,59,90,81,56,55,40]
        },
        {
            label: "My Second dataset",
            fillColor: "rgba(151,187,205,0.2)",
            strokeColor: "rgba(151,187,205,1)",
            pointColor: "rgba(151,187,205,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(151,187,205,1)",
            data: [28,48,40,19,96,27,100]
        }
    ]
};

window.onload = function(){
    window.myRadar = new Chart(document.getElementById("canvas").getContext("2d")).Radar(radarChartData, {
        responsive: false
    });
}

Then in the HTML i put :

<canvas id="canvas"></canvas>

This works perfectly fine until i try to put the canvas in a modal dialog like this :

<div id="modal1" class="modal modal-fixed-footer">
        <div class="modal-content">
      <span class="details-header"></span>
      <p>A bunch of text</p>
        <canvas id="canvas"></canvas>
    </div>
    <div class="modal-footer">
      <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat ">Agree</a>
    </div>
  </div>

Now it just doesnt show?

Upvotes: 2

Views: 2132

Answers (1)

LogicFirst
LogicFirst

Reputation: 190

Chart has to be created after the dialog loads on to the page:

$("#modal1").dialog({
  open: function() {
    //Code to create chart
  }  
});

Reference: https://stackoverflow.com/a/18992136/4561150

Upvotes: 1

Related Questions