Chart.js not working on my page?

Question

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?

If you hit F12 and look at the console, you'll see that chart.js is not being included. — Adam Konieska, May 27 '16 at 15:49
Is there something wrong with the chart.js link at the top (in head section)? I am linking it offsite. But, I was confused because the bar chart does appear... which I'm not sure it could do without chart.js being included? — sledgeweb, May 27 '16 at 18:15
It seems like the issue is the way you're including chart.js from github. [See this SO post](http://stackoverflow.com/questions/17341122/link-and-execute-external-javascript-file-hosted-on-github). It would be better to host your own copy of chart.js on your server. — Adam Konieska, May 27 '16 at 18:33
I'm not sure why the bar chart would load in that case? Regardless, I'm now loading the js from my own server and it looks exactly the same? — sledgeweb, May 27 '16 at 19:05
The bar chart was not loading in chrome because of the way you'd included the github chart.js. The problem with your pie chart is shown in the browser console. — Adam Konieska, May 27 '16 at 19:43
The bar chart DID load when I included the github chart js. But the pie chart wouldn't show up. Now I have the js on my server, and it acts exactly the same. The bar chart still shows up, but no pie chart. — sledgeweb, May 27 '16 at 20:32

score 2 · Answer 1 · answered Aug 17 '17 at 07:39

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

score 1 · Answer 2 · edited May 23 '17 at 12:22

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.

edited May 23 '17 at 12:22

Community

1
1

answered May 27 '16 at 18:40

Alex W

37,233
13
109
109

I've moved the chart.js to my server and linked it and still no luck. Please refresh. Any other ideas? – sledgeweb May 27 '16 at 19:05
Looks like the chart's working now. The only error I'm seeing in the console is that you're using `.live()` which doesn't exist. The documentation for jQuery says older versions should use `.delegate()` instead of `.live()`. – Alex W May 30 '16 at 22:48

score 0 · Answer 3 · answered May 27 '16 at 20:01

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

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!

Thank you. I've updated using your code. Exact same result. Bar chart shows up, but no pie chart. Any ideas why? — sledgeweb, May 27 '16 at 20:35
Actually, I got it working. Not sure what happened but a paragraph break was being inserted when I copied your code here. After eliminating that I got a pie chart to show up! Thank you. — sledgeweb, May 27 '16 at 20:45

Chart.js not working on my page?

3 Answers3