score:2

Accepted answer

chartjs does not work on div tag so you need to use canvas instead of div tag. here you can find chart examples.

<canvas id="sample-chart" height="300" width="500">

<script>
var areadata = {
 labels: ["1", "2", "3", "4", "5"],
 datasets: [{
     data: [60, 63, 68, 53, 52],
     backgroundcolor: [
       '#d6eef3'
     ],
     bordercolor: [
       '#1dbfd3'
     ]
   }
 ]
};
var areaoptions = {
 responsive: true,
 maintainaspectratio: false
}
var samplechartcanvas = $("#sample-chart").get(0).getcontext("2d");
var samplechart = new chart(samplechartcanvas, {
 type: 'line',
 data: areadata,
 options: areaoptions
});
</script>

score:0

there's no canvas in your html.

add it into the sample-chart div like:

<div id="sample-chart">
<canvas id="mychart"></canvas>
</div>

score:0

you either need to change the div to a canvas or have jquery convert it from a div to a canvas using a replacer function.

var areadata = {
  labels: ["1", "2", "3", "4", "5"],
  datasets: [{
    data: [60, 63, 68, 53, 52],
    backgroundcolor: [ '#d6eef3' ],
    bordercolor: [ '#1dbfd3' ]
  }]
};

var areaoptions = {
  responsive: true,
  maintainaspectratio: false
}

var samplechartcanvas = $("#sample-chart").get(0).getcontext("2d");
var samplechart = new chart(samplechartcanvas, {
  type: 'line',
  data: areadata,
  options: areaoptions
});
#sample-chart {
  height: 300px;
  width: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.7.2/chart.min.js"></script>

<!-- needs to be a canvas, not a div -->
<canvas id="sample-chart"></canvas>


replacer

(function($) {
  $.fn.applyattributes = function(attributes) {
    var self = this;
    $.each(attributes, function() {
      self.attr(this.name, this.value);
    });
    return self;
  };
  $.fn.replacetag = function(tagname) {
    this.each((i, e) => {
      this.replacewith($('<' + tagname + '>').applyattributes(this.prop('attributes')));
    });
  };
})(jquery);

var areadata = {
  labels: ["1", "2", "3", "4", "5"],
  datasets: [{
    data: [60, 63, 68, 53, 52],
    backgroundcolor: [ '#d6eef3' ],
    bordercolor: [ '#1dbfd3' ]
  }]
};

var areaoptions = {
  responsive: true,
  maintainaspectratio: false
};

$("#sample-chart").replacetag('canvas'); // replace tag name with canvas

// modified the dom, we will need to re-query it.
var samplechartcanvas = $("#sample-chart").get(0).getcontext("2d");
var samplechart = new chart(samplechartcanvas, {
  type: 'line',
  data: areadata,
  options: areaoptions
});
#sample-chart {
  height: 300px;
  width: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.7.2/chart.min.js"></script>

<!-- needs to be a canvas, not a div -->
<div id="sample-chart"></div>

score:1

put it into document ready context

$(function () {
 var areadata = {
   labels: ["1", "2", "3", "4", "5"],
   datasets: [{
       data: [60, 63, 68, 53, 52],
       backgroundcolor: [
         '#d6eef3'
       ],
       bordercolor: [
         '#1dbfd3'
       ]
     }
   ]
 };
 var areaoptions = {
   responsive: true,
   maintainaspectratio: false
 }
 var samplechartcanvas = $("#sample-chart").get(0).getcontext("2d");
 var samplechart = new chart(samplechartcanvas, {
   type: 'line',
   data: areadata,
   options: areaoptions
 });
})

Related Query

More Query from same tag