Chart disappears just after finishing animation

Question

I'm trying to use chartjs, so I copied sample code from official document like this.

<canvas id="myChart" width="400" height="400"></canvas>
<script>
 var data = {
   labels : ["January","February","March","April","May","June","July"],
   datasets : [
 {
   fillColor : "rgba(220,220,220,0.5)",
   strokeColor : "rgba(220,220,220,1)",
   pointColor : "rgba(220,220,220,1)",
   pointStrokeColor : "#fff",
   data : [65,59,90,81,56,55,40]
 },
 {
   fillColor : "rgba(151,187,205,0.5)",
   strokeColor : "rgba(151,187,205,1)",
   pointColor : "rgba(151,187,205,1)",
   pointStrokeColor : "#fff",
   data : [28,48,40,19,96,27,100]
 }
   ]
 }
 //Get the context of the canvas element we want to select
 var ctx = document.getElementById("myChart").getContext("2d");
 var myNewChart = new Chart(ctx).PolarArea(data);
 new Chart(ctx).Line(data);
</script>

Example: http://jsfiddle.net/DerekL/FZW9z/

The Chart appears at first, but when first animation ends it disappears. Javascript console shows nothing. And when a option animation is defined false, then it appears only split second and disappears likewise.

I tried in Firefox and Chrome in Mac, but results were same.

How does it happens, and how can I fix it?

Answer 1

You are actually calling the new Chart() twice. Please see the below code. I connected out the unwanted line. Also please see the updated JSFiddle http://jsfiddle.net/sajith/VW4U5/

<canvas id="myChart" width="400" height="400"></canvas>
<script>
 var data = {
   labels : ["January","February","March","April","May","June","July"],
   datasets : [
 {
   fillColor : "rgba(220,220,220,0.5)",
   strokeColor : "rgba(220,220,220,1)",
   pointColor : "rgba(220,220,220,1)",
   pointStrokeColor : "#fff",
   data : [65,59,90,81,56,55,40]
 },
 {
   fillColor : "rgba(151,187,205,0.5)",
   strokeColor : "rgba(151,187,205,1)",
   pointColor : "rgba(151,187,205,1)",
   pointStrokeColor : "#fff",
   data : [28,48,40,19,96,27,100]
 }
   ]
 }
 //Get the context of the canvas element we want to select
 var ctx = document.getElementById("myChart").getContext("2d");
 //var myNewChart = new Chart(ctx).PolarArea(data);
 new Chart(ctx).Line(data);
</script>

Answer 2

If you are using Bootstrap, note that

I ran into the same problem. I am also using Bootstrap inside of a Laravel project. It turns out there is some sort of conflict - whenever Bootstrap's JS is loaded it causes the chart to disappear. My solution was to remove the "defer" attribute from the code that loads my app.js file, as described here: Laravel - Bootstrap Javascript's conflict with Chart.js