C3.js area-spline chart

Area-spline chart with the C3.js adapter

by acpcreation

HTML

<script src="https://d26b395fwzu5fz.cloudfront.net/3.4.0/keen.min.js?date=2016-02-17"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<div id="chart"></div>
<p id="text">
 SUP
</p>

JavaScript

//Create JSON object
var graphData = {
      data: {
       	x: 'x',
        columns: [
        		['x', 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21], 
            ['Actual', 30, 300, 10, 200],
            ['Expected', 130, 100, 400],
            [' ', null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null],
        ],
        
        colors: {
            Actual: '#008FD3',
            Expected: '#F0AB00',
            ' ': '#ffffff',
        },  
        
        type: 'spline', //Old: area-spline
    },
    
    axis: {
          x: {
          	type: 'spline',
            tick: {
                count: 16,
                fit: true,
                values: [6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21] //'1PM', '2PM', '3PM'
            }
          }
      		
    }
}

var chart = c3.generate(graphData); //Create Chart 

/*chart.data.colors({
        Actual: d3.rgb('#008FD3'),
        Expected: d3.rgb('#F0AB00'), //Old: .darker(1)
    });*/

    
    
function capacity() {
	var x = Math.floor((Math.random()*400));
  var y = Math.floor((Math.random()*400));
 	graphData.data.columns[1].push(x);
  graphData.data.columns[2].push(y);
  chart = c3.generate(graphData);
  document.getElementById("text").innerHTML = graphData.data.columns;
}

//setInterval(capacity, 3000);