2011|08|
2013|10|11|12|
2014|01|02|03|04|05|06|07|08|09|10|11|12|
2015|01|02|03|05|06|07|08|09|10|11|12|
2016|01|03|04|05|06|07|08|09|10|11|12|
2017|01|02|03|04|05|06|07|08|09|10|11|12|
2018|01|02|03|04|05|06|07|08|09|10|11|12|
2019|01|02|03|04|05|06|07|08|09|10|11|12|
2020|01|02|03|04|

2019-05-27 時間とともに流れていくグラフ(2枚のグラフを描くところがポイント)

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>
syntax2html