2枚のグラフを描くところがポイント
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>グラフ</title> </head> <script type="text/javascript" src="moment.js"></script> <script type="text/javascript" src="Chart.js"></script> <script type="text/javascript" src="chartjs-plugin-streaming.js"></script> <body> <h1>折れ線グラフ</h1> <canvas id="myChart"></canvas> <canvas id="myChart2"></canvas> <script> var ctx = document.getElementById('myChart').getContext('2d'); var chart = new Chart(ctx, { type: 'line', data: { datasets: [{ data: [], // 1つめ borderColor: "rgba(255,0,0,1)", backgroundColor: "rgba(0,0,0,0)", lineTension: 0, }, { data: [] // 2つめ }, { data: [] // 3つめ }, { data: [] // 4つめ }] }, options: { scales: { xAxes: [{ type: 'realtime', realtime: { duration: 30000, // 300000ミリ秒（5分）のデータを表示 (コメントアウトすると早く動く) onRefresh: function(chart) { chart.data.datasets.forEach(function(dataset) { dataset.data.push({ x: Date.now(), y: Math.random() }); }); } } }] } } }); </script> <script> var ctx2 = document.getElementById('myChart2').getContext('2d'); var chart2 = new Chart(ctx2, { type: 'line', data: { datasets: [{ data: [], // 1つめ borderColor: "rgba(255,0,0,1)", backgroundColor: "rgba(0,0,0,0)", lineTension: 0, }, { data: [] // 2つめ }, { data: [] // 3つめ }, { data: [] // 4つめ }] }, options: { scales: { xAxes: [{ type: 'realtime', realtime: { duration: 30000, // 300000ミリ秒（5分）のデータを表示 (コメントアウトすると早く動く) onRefresh: function(chart) { chart.data.datasets.forEach(function(dataset) { dataset.data.push({ x: Date.now(), y: Math.random() }); }); } } }] } } }); </script> </body> </html>