CODEWITHSUNDEEP
javascriptwordpresschartschart.js
sledgeweb
sledgeweb

Reputation: 21

Chart.js not working on my page?

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/

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?

Upvotes: 2

Views: 8702

Answers (3)

Pikesh Prasoon
Pikesh Prasoon

Reputation: 387

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

Upvotes: 2

ak_
ak_

Reputation: 2815

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!

Upvotes: 0

Alex W
Alex W

Reputation: 38173

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.

Upvotes: 1

Related Questions