Chart.js not working on my page?

1 Views

I’m trying to use chart.js on a wordpress site. I can get the simple bar chart to work from the documentation, but nothing else. I can’t get a pie or doughnut or line or radar chart to render… even if I’m just copying code from JSFiddle straight to my page.

Please see this page: http://www.sledgeweb.com/2016/05/27/chart-test/

Read More

There should be a pie chart and then a bar chart. The bar chart works but the pie chart canvas is blank. What’s going on?

Post Views: 1

Related posts

Leave a Reply

3 comments

  1. 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
});

  2. 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.

  3. 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!