chartjs undefined length when using 2 datasets - Javascript Chart.js

Javascript examples for Chart.js:Chart Data

  1. HOME
  2. Javascript
  3. Chart.js
  4. Chart Data

Description

chartjs undefined length when using 2 datasets

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript">
    window.onload=function(){/*from w  w w .j a  v  a2s .  co m*/
var ctx = document.getElementById('ctx').getContext("2d");
      var chart = new Chart(ctx, {
          labels: ["1", "2"],
          type: 'line',
          data: {
              labels : ["January", "February", "March", "April", "May", "June", "July"],
              datasets: [
                  {
                      label: "Test1",
                      fill: false,
                      lineTension: 0.1,
                      backgroundColor: "green",
                      borderColor: "black",
                      borderCapStyle: 'butt',
                      borderDash: [],
                      borderDashOffset: 0.0,
                      borderJoinStyle: 'miter',
                      pointBorderColor: "black",
                      pointBackgroundColor: "green",
                      pointBorderWidth: 1,
                      pointHoverRadius: 5,
                      pointHoverBackgroundColor: "blue",
                      pointHoverBorderColor: "black",
                      pointHoverBorderWidth: 2,
                      pointRadius: 1,
                      pointHitRadius: 10,
                      data: [1,2,50,42,43,23,1],
                      spanGaps: false
                  },
                  {
                      label: "Test2",
                      fill: false,
                      lineTension: 0.1,
                      backgroundColor: "blue",
                      borderColor: "black",
                      borderCapStyle: 'butt',
                      borderDash: [],
                      borderDashOffset: 0.0,
                      borderJoinStyle: 'miter',
                      pointBorderColor: "black",
                      pointBackgroundColor: "blue",
                      pointBorderWidth: 1,
                      pointHoverRadius: 5,
                      pointHoverBackgroundColor: "green",
                      pointHoverBorderColor: "black",
                      pointHoverBorderWidth: 2,
                      pointRadius: 1,
                      pointHitRadius: 10,
                      data: [4,55,23,52,32,13,4],
                      spanGaps: false
                  }
              ]
          },
          options: {
              scales: {
                  yAxes: [{
                      ticks: {
                          beginAtZero:true
                      }
                  }]
              }
          }
      });
    }

      </script> 
   </head> 
   <body> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js"></script> 
      <canvas id="ctx" width="400" height="400"></canvas>  
   </body>
</html>

Related Tutorials