line chart with background overlap - Javascript Chart.js

Javascript examples for Chart.js:Line Chart

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

Description

line chart with background overlap

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script> 
      <script type="text/javascript">
    window.onload=function(){//from   w  w  w .  jav  a2 s .c  o  m
function drawChart() {
  var jsonData = $.ajax({
    url: 'https://api.myjson.com/bins/11poyc',
    dataType: 'json',
  }).done(function(results) {
    var label = [];
    var output = [];
    results.forEach(function(data) {
      label.push(data.Labels);
      output.push(data.Array);
    });
    var XXnames = label.slice(0, -1);
    var XXdata = output.slice(0, -1);
    var XXdates = JSON.parse(output.reverse(output)[0]);
      var data = {
          labels: XXdates,
        datasets: []
    }
    XXnames.forEach(function(XXa, i) {
       console.log(JSON.parse(XXdata[i]).map(Number));
      data.datasets.push({
        label: XXa,
        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: JSON.parse(XXdata[i]).map(Number)
      });
    });
      var config = {
      type: 'line',
      data : data
    }
    var ctx = document.getElementById("chart").getContext("2d");
    var chart = new Chart(ctx, config);
  });
}
drawChart();
    }

      </script> 
   </head> 
   <body> 
      <div> 
         <canvas id="chart"></canvas> 
      </div>  
   </body>
</html>

Related Tutorials