shin
shin

Reputation: 32721

Chart.js shows no graphs

My following code does not show any chart graphs and I am not sure what I'm doing wrong. It loads Chart.bundle.js and I tried it with Chart.js as well.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="../src/Chart.bundle.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.js"></script>
</head>
<body>
  <div style="width: 75%">
    <canvas id="canvas"></canvas>
  </div>
  <script>
    var chartData = {
      graphName : 'daily-visitors',
      ctx : document.getElementById('canvas').getContext('2d'),
      chart : {
      labels: ["19\/12","20\/12","21\/12","22\/12","23\/12","24\/12","25\/12","26\/12","27\/12","28\/12","29\/12","30\/12","31\/12","01\/01","02\/01"],
      datasets: [
        {
          label: 'Visitors',
          data: [4,6,9,6,16,3,13,11,6,4,7,14,11,18,5],
          fillColor: "rgba(151,187,205,0.2)",
          strokeColor: "rgba(151,187,205,1)",
          pointColor: "rgba(151,187,205,1)",
          pointStrokeColor: "#fff",
          pointHighlightFill: "#fff",
        },
      {
        label: 'Pageviews',
        data: [42,34,64,53,48,4,36,36,25,9,12,25,110,227,75],
        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)",
      }]
    }
  };
</script>
</body>
</html>

Upvotes: 1

Views: 181

Answers (3)

yojna
yojna

Reputation: 513

Follow CANVAS tutorial to add graph in DOM. http://www.williammalone.com/articles/html5-canvas-javascript-bar-graph/

Upvotes: 0

wscourge
wscourge

Reputation: 11281

You are missing creating chart itself:

var myChart = new Chart(chartData.ctx).Line(chartData.chart); //'Line' defines type of the chart.

Upvotes: 2

supereschek
supereschek

Reputation: 94

You are only defining how the object should look like but you forgot to create it itself.

Upvotes: 2

Related Questions