Chart.js line chart is not displaying

Question

I am built a line chart with chart.js. However the chart is not showing up. Here is my HTML

    <canvas id="myChart" width"600" height:"600"></canvas>

Here is my javascript. I get no errors with this approach but nothing shows up.

var c = $('#myChart');
var ct = c.get(0).getContext('2d');
var ctx = document.getElementById("myChart").getContext("2d").Line(data);


var data = {
labels: ["January", "February", "March", "April", "May", "June", "July","August", "November", "December"],
datasets: [
    {
        label: "Sodium intake",
        fillColor: "rgba(220,220,220,0.2)",
        strokeColor: "rgba(220,220,220,1)",
        pointColor: "rgba(220,220,220,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: [165, 159, 180, 181, 156, 155, 140]
    },
    {
        label: "Sugar intake",
        fillColor: "rgba(151,187,205,0.2)",
        strokeColor: "rgba(151,187,205,1)",
        pointColor: "rgba(151,187,205,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(151,187,205,1)",
        data: [128, 148, 140, 119, 186, 127, 190]
    }
]

};

The other approach I used was similar to the documentation. I instantiated a new chart. However, this approach returns undefined for my line Chart.

var ctx = document.getElementById("myChart").getContext("2d");
var myLineChart = new Chart(ctx).line(data,{
belzierCurve : false

});

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

Answer 2

On your html:

<canvas id="myChart" width"600" height:"600"></canvas>

It should be:

<canvas id="myChart" width="600" height="600"></canvas>

Then, Replace your code

var c = $('#myChart');
var ct = c.get(0).getContext('2d');
var ctx = document.getElementById("myChart").getContext("2d").Line(data);

With this code

var ctx = new Chart(document.getElementById("myChart").getContext("2d")).Line(data);

So in your js

var data = {
    //your data here
}
enter code here

and then add this line after your data

var ctx = new Chart(document.getElementById("myChart").getContext("2d")).Line(data);

So your code would look like this:

var data = {
  labels: ["January", "February", "March", "April", "May", "June", "July","August", "November", "December"],
  datasets: [
      {
          label: "Sodium intake",
          fillColor: "rgba(220,220,220,0.2)",
          strokeColor: "rgba(220,220,220,1)",
          pointColor: "rgba(220,220,220,1)",
          pointStrokeColor: "#fff",
          pointHighlightFill: "#fff",
          pointHighlightStroke: "rgba(220,220,220,1)",
          data: [165, 159, 180, 181, 156, 155, 140]
      },
      {
          label: "Sugar intake",
          fillColor: "rgba(151,187,205,0.2)",
          strokeColor: "rgba(151,187,205,1)",
          pointColor: "rgba(151,187,205,1)",
          pointStrokeColor: "#fff",
          pointHighlightFill: "#fff",
          pointHighlightStroke: "rgba(151,187,205,1)",
          data: [128, 148, 140, 119, 186, 127, 190]
      }
  ]
}

var ctx = new Chart(document.getElementById("myChart").getContext("2d")).Line(data);

Answer 3

Ok, try this :

for a start correct your html :

<canvas id="myChart" width="600" height="600"></canvas>

then try this for your javascript :

var data = {
    "labels": ["January", "February", "March", "April", "May", "June", "July", "August", "November", "December"],
    "datasets": [{
        label: "Sodium intake",
        fillColor: "rgba(220,220,220,0.2)",
        strokeColor: "rgba(220,220,220,1)",
        pointColor: "rgba(220,220,220,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: [165, 159, 180, 181, 156, 155, 140]
    }, {
        label: "Sugar intake",
        fillColor: "rgba(151,187,205,0.2)",
        strokeColor: "rgba(151,187,205,1)",
        pointColor: "rgba(151,187,205,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(151,187,205,1)",
        data: [128, 148, 140, 119, 186, 127, 190]
    }]
}

var chartDisplay = new Chart(document.getElementById("myChart").getContext("2d")).Line(data);

And that should do ok. See a jsfiddle of it.