CODEWITHSUNDEEP
javascriptchart.js
Victor Ribeiro da Silva Eloy
Victor Ribeiro da Silva Eloy

Reputation: 4159

Not able to show data on Chart.js

I'm trying to create a very simple chart using chart.js. But I don't get why it's not working. Here is what I tried so far. I'm using the 2.4 version. Thanks

Fiddle: https://jsfiddle.net/8zb4nr44/

Html

<div id="wasted-budget-chart">
    <canvas width="500" height="150" id="wasted-budget-chart-canvas"/>
</div>

Js:

    var options = {
       responsive: true,
       maintainAspectRatio: false,
       datasetStrokeWidth : 3,
       pointDotStrokeWidth : 4,
       tooltipFillColor: "rgba(0,0,0,0.8)",
       tooltipFontStyle: "bold",


     };

     var ctx = document.getElementById('wasted-budget-chart-canvas').getContext("2d");
     var gradient = ctx.createLinearGradient(0, 0, 0, 400);
     gradient.addColorStop(0, 'rgba(151,187,205,0.7)');
     gradient.addColorStop(1, 'rgba(151,187,205,0)');
     var data = {
       type:'line',
       labels : ["02:00","04:00","06:00","08:00","10:00","12:00","14:00","16:00","18:00","20:00","22:00","00:00"],
       datasets: [
         {
           fillColor : gradient, // Put the gradient here as a fill color
           strokeColor : "#ff6c23",
           pointColor : "#fff",
           pointStrokeColor : "#ff6c23",
           pointHighlightFill: "#fff",
           pointHighlightStroke: "#ff6c23",
           data : [25.0,32.4,22.2,39.4,34.2,22.0,23.2,24.1,20.0,18.4,19.1,17.4]
         }]
       ,
         options: options
     };



    new Chart(ctx,data);

Upvotes: 0

Views: 52

Answers (1)

jeff carey
jeff carey

Reputation: 2373

If you are going to pass the data in as one big object, you need to nest "data" one more time inside it, like this:

 var data = {
   type:'line',
   data: {      // add this here, and its closing brace of course
       labels :  ["02:00","04:00","06:00","08:00","10:00","12:00","14:00","16:00","18:00","20:00","22:00","00:00"],
       datasets: [
       {
           fillColor : gradient, // Put the gradient here as a fill color
           strokeColor : "#ff6c23",
           pointColor : "#fff",
           pointStrokeColor : "#ff6c23",
           pointHighlightFill: "#fff",
           pointHighlightStroke: "#ff6c23",
           data : [25.0,32.4,22.2,39.4,34.2,22.0,23.2,24.1,20.0,18.4,19.1,17.4]
      }]
   },
   options: options  
 };

Upvotes: 1

Related Questions