Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Line type chart doesn't show up on the web page - Uncaught ReferenceError: Chart is not defined

sergeysh free asked 5 years ago


Please help, I added line-chart, but the web page stays blank. Here is the code (that's exact code from the tutorial):

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
 <canvas id="lineChart"></canvas>

<script> 
var ctxL = document.getElementById("lineChart").getContext('2d');
var myLineChart = new Chart(ctxL, {
  type: 'line',
  data: {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
        label: "My First dataset",
        data: [65, 59, 80, 81, 56, 55, 40],
        backgroundColor: [
          'rgba(105, 0, 132, .2)',
        ],
        borderColor: [
          'rgba(200, 99, 132, .7)',
        ],
        borderWidth: 2
      },
      {
        label: "My Second dataset",
        data: [28, 48, 40, 19, 86, 27, 90],
        backgroundColor: [
          'rgba(0, 137, 132, .2)',
        ],
        borderColor: [
          'rgba(0, 10, 130, .7)',
        ],
        borderWidth: 2
      }
    ]
  },
  options: {
    responsive: true
  }
});
</script>
</body>
</html>

MDBootstrap staff answered 5 years ago


Hi sergeysh,

Chart.js is the part of our mdb.js package for sure. You can test it in our snippets environment that uses only core items of mdb package pro/free. I copied exactly your code: https://mdbootstrap.com/snippets/jquery/pjoter-2-0/986884

You need to check if you do everything according to the tutorial in terms of package usage. The order that you used is correct. You need a canvas to draw a chart on it and you need to initiate a chart that already was defined.

If you need additional help I am here for you.

Best Regards, Piotr


sergeysh free answered 5 years ago


Only after I added link to "chart.js" the one that comes with the kit, then it worked. Please tell my why is it so. I thought that all the files (in the kit) including those in /js/module/ folder should be connected.Another thing, is the sequence of those three elements. They work only if they go in this order:

  1. Canvas
  2. Connection to /chart.js
  3. Code from the tutorial.

If you change the order, the chart will not appear, and it will cause "Chart is not defined". What am I doing wrong?



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.8.4
  • Device: Desktop
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No