[Chartjs]-Chart.js line chart is not displaying

by

9👍

✅

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

2👍

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.

0👍

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

Leave a comment