C3 Stream Dates Lines Demo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.js"></script>
<p id="start">Click here to Start → <button>Start!</button></p>
<p id="stop" class="hidden">Click here to Stop → <button>Stop!</button></p>
<div id="chart"></div>

CSS

.hidden { display: none }

JavaScript

const MAX = 1000
const LENGTH = 2000

let data1 = ['data1']
let x = ['x']

let interval
let chart = c3.generate({
    bindto: '#chart',
    data: {
    	x: 'x',
      columns: [ x, data1 ]
    },
    axis: {
     x: {
       type: 'timeseries',
       tick: { format: '%H:%M:%S' }
     }
    }
});

const oStart = document.getElementById('start')
const oStop = document.getElementById('stop')

oStart.querySelector('button').addEventListener('click', () => {
	displayButtons()
  interval = setInterval(() => {
  	data1.push( getRandomNumber( MAX ) )
    x.push( +new Date() )
    if (data1.length < LENGTH) {
      chart.load({ 
        columns: [ x, data1 ]
      });
    }
    else {
    	chart.flow({ 
        columns: [ 
        	[ 'x',  +new Date() ],
        	[ 'data1',  getRandomNumber( MAX ) ] 
        ]
      });
    }
    
  },100)
})

oStop.querySelector('button').addEventListener('click', () => {
	clearInterval(interval)
})

function getRandomNumber( max ) {
  return Math.round( Math.random()*max )
}

function displayButtons() {
	oStart.className = 'hidden'
  oStop.className = ''
}