[Chartjs]-Chart.js not working on my page?

2đź‘Ť

The reason may be that you are using the latest chart.min.js but using the old code. For correct reference, follow the chartjs.org documentation.

The code configuration structure has changed in the latest release. (I guess from 2.3 onwards)

So, instead of

var countries= document.getElementById("countries").getContext("2d");
var chart = new Chart(countries).Pie(pieData,pieOptions);

We are structuring like:

var countries= document.getElementById("countries").getContext("2d");
var chart = new Chart(countries,{
  type: 'pie',
  data: 
  {
    labels: ['India', 'Germany', 'Netherland'],
    datasets: 
        [{
        backgroundColor: '#337ab7',
        data: ['100', '99' ,'98'],
        borderWidth:1,
        }]
  },
  options:
  {
      responsive: true,
      maintainAspectRatio:false,
      legend: {
        display: false,
        position: 'top'
      }
  }
});

or

var countries= document.getElementById("countries").getContext("2d");
var pieData = 
{
    labels: ['India', 'Germany', 'Netherland'],
    datasets: [{
      backgroundColor: '#337ab7',
      data: ['100', '99' ,'98'],
      borderWidth:1,
      }]
};
var pieOptions = 
{
    responsive: true,
    maintainAspectRatio:false,
    legend: {
      display: false,
      position: 'top'
    }
};

var chart = new Chart(countries,{    
type: 'pie',
data: pieData,
options: pieOptions
});

1đź‘Ť

The problem is your <script> tag is pointing to GitHub’s raw text file of the code. Because these files are “raw” they are sent from the server with the header Content-Type:text/plain; charset=utf-8 and X-Content-Type-Options:nosniff (see this question) which tells the client-side browser that these are text files and they were not meant to be executable. Certain browsers, such as Chrome, will therefore choke and not allow the JavaScript to be executed. If you change your <script> tag’s src URL for ChartJS to point to a CDN or somewhere that doesn’t send those headers it should work correctly.

0đź‘Ť

You’ve got errors with your JavaScript, you can see them in the console by pressing F12 They are:

Uncaught TypeError: (intermediate value).Pie is not a function(anonymous function)

Uncaught TypeError: $(…).live is not a function

enter image description here

Based on that, and investigating those lines of code, your chart data and call do not match whats in the chart.js docs. You can get it working by following the format used in the developer docs. Something like this should work:

var pieData = {
    datasets: [{
        data: [
            25,
            10,
            30,
            35
        ],
        backgroundColor: [
            "#811BD6",
            "#9CBABA",
            "#D18177",
            "#6AE128"
        ],
        label: 'My Skills' // for legend
    }],
    labels: [
        "Java",
        "Scala",
        "PHP",
        "HTML"
    ]
};


var context = document.getElementById('skills');
var myPieChart = new Chart(context,{
    type: 'pie',
    data: pieData
});

Hope that helps!

Leave a comment