QuickChartでグラフを作る

投稿日 2022年01月04日

QuickChart_1.jpg

QuickChartで描いたグラフ

​温度(VAL1)と湿度(VAL2)

数値データを収集して、それを視覚的に見たい場合グラフにするわけですが、プログラムを組んで描画するのも面倒です。

 

そこでグラフ描画のクラウドサービスとでも言いましょうか、一定フォーマットの文字データを送ればグラフ画像にして送り返してくれる便利なサービスがあります。

 

「quickchart」でググればすぐ出てきます。様々なサンプルや、ドキュメントが掲載されているので、数十分も見ていれば、大体使い方はわかります。グラフの種類は折れ線グラフはもちろん、棒グラフ、円グラフ、レーダーチャート、その他いろいろ描画できます。

サーバーから描画する場合は、

<teable>

<td>

<img src = "https://quickchart.io/chart?width=500&height=250&c=XXXXXXXXXXX>

</td>

</table>

 

として、QuickChartのサーバーに渡せばよいわけです。Widthはグラフの幅、heightは高さです。

C=のXXXXXXXXに描画したいグラフデータを置きます。これを実行すると、srcが画像となって返って

くるので、テーブルの中にグラフの画像が置かれ、ブラウザで表示されます。

グラフデータの基本はグラフの種類、X軸のデータ、Y軸のデータですが、タイトルや軸ラベルを付けたり、Y軸の範囲を指定したり、凡例を添えたり、グラフの色を指定したり、グリッドを引いたり、Y軸を右側にも設定したり、いろいろなオプションがあります。それらをすべて文字列で、特定のフォーマットに従って記述すればよいわけです。

​実際にプログラムで生成したグラフデータをいかに示します。これを全選択しコピペでブラウザのURLエントリにこぴーしてみてください。上のようなグラフが描かれます。あとは、このみに合わせてオプションを変更するだけです。

​以下は、AHT25という温湿度センサーで収集した1月3日、23:05から5分間隔 20時間分、暖房を入れていない室温を計測してグラフ化したものです。なお、QuickChartのサイトには、ここでは使わなかったオプションなど多数が紹介されています。

https://quickchart.io/chart?width=500&height=250&c=
{
  type: 'line',
  data: {
    labels: [
      '23:05', '23:10', '23:15', '23:20', '23:25', '23:30', '23:35', '23:40',
      '23:45', '23:50', '23:55', '00:00', '00:05', '00:10', '00:15', '00:20',
      '00:25', '00:30', '00:35', '00:40', '00:45', '00:50', '00:55', '01:00',
      '01:05', '01:10', '01:15', '01:20', '01:25', '01:30', '01:35', '01:40',
      '01:45', '01:50', '01:55', '02:00', '02:05', '02:10', '02:15', '02:20',
      '02:25', '02:30', '02:35', '02:40', '02:45', '02:50', '02:55', '03:00',
      '03:05', '03:10', '03:15', '03:20', '03:25', '03:30', '03:35', '03:40',
      '03:45', '03:50', '03:55', '04:00', '04:05', '04:10', '04:15', '04:20',
      '04:25', '04:30', '04:35', '04:40', '04:45', '04:50', '04:55', '05:00',
      '05:05', '05:10', '05:15', '05:20', '05:25', '05:30', '05:35', '05:40',
      '05:45', '05:50', '05:55', '06:00', '06:05', '06:10', '06:15', '06:20',
      '06:25', '06:30', '06:35', '06:40', '06:45', '06:50', '06:55', '07:00',
      '07:05', '07:10', '07:15', '07:20', '07:25', '07:30', '07:35', '07:40',
      '07:45', '07:50', '07:55', '08:00', '08:05', '08:10', '08:15', '08:20',
      '08:25', '08:30', '08:35', '08:40', '08:45', '08:50', '08:55', '09:00',
      '09:05', '09:10', '09:15', '09:20', '09:25', '09:30', '09:35', '09:40',
      '09:45', '09:50', '09:55', '10:00', '10:05', '10:10', '10:15', '10:20',
      '10:25', '10:30', '10:35', '10:40', '10:45', '10:50', '10:55', '11:00',
      '11:05', '11:10', '11:15', '11:20', '11:25', '11:30', '11:35', '11:40',
      '11:45', '11:50', '11:55', '12:00', '12:05', '12:10', '12:15', '12:20',
      '12:25', '12:30', '12:35', '12:40', '12:45', '12:50', '12:55', '13:00',
      '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35', '13:40',
      '13:45', '13:50', '13:55', '14:00', '14:05', '14:10', '14:15', '14:20',
      '14:25', '14:30', '14:35', '14:40', '14:45', '14:50', '14:55', '15:00',
      '15:05', '15:10', '15:15', '15:20', '15:25', '15:30', '15:35', '15:40',
      '15:45', '15:50', '15:55', '16:00', '16:05', '16:10', '16:15', '16:20',
      '16:25', '16:30', '16:35', '16:40', '16:45', '16:50', '16:55', '17:00',
      '17:05', '17:10', '17:15', '17:20', '17:25', '17:30', '17:35', '17:40',
      '17:45', '17:50', '17:55', '18:00', '18:05', '18:10', '18:15', '18:20',
      '18:25', '18:30', '18:35', '18:40', '18:45', '18:50', '18:55', '19:00',
    ],
    datasets: [
      {
            label: 'AHT25_1_val1',
            backgroundColor: '%23fd0808',
            borderColor: '%23fd0808',
            borderWidth: '1',
            data: [7.29, 7.24, 7.20, 7.16, 7.14, 7.12, 7.09, 7.05, 6.98, 6.97, 
                   6.93, 6.89, 6.86, 6.84, 6.79, 6.77, 6.72, 6.70, 6.68, 6.67, 
                   6.65, 6.65, 6.63, 6.58, 6.54, 6.45, 6.41, 6.37, 6.35, 6.35, 
                   6.32, 6.27, 6.26, 6.20, 6.17, 6.14, 6.12, 6.08, 6.06, 5.98, 
                   6.03, 5.98, 5.95, 5.93, 5.90, 5.87, 5.82, 5.80, 5.79, 5.78, 
                   5.75, 5.72, 5.70, 5.66, 5.60, 5.60, 5.57, 5.56, 5.56, 5.50, 
                   5.48, 5.48, 5.43, 5.42, 5.39, 5.34, 5.32, 5.28, 5.30, 5.26, 
                   5.26, 5.26, 5.21, 5.19, 5.17, 5.12, 5.10, 5.09, 5.07, 5.04, 
                   5.01, 4.99, 4.98, 4.96, 4.95, 4.94, 4.92, 4.89, 4.88, 4.87, 
                   4.83, 4.82, 4.82, 4.78, 4.77, 4.72, 4.71, 4.66, 4.65, 4.63, 
                   4.64, 4.64, 4.60, 4.62, 4.62, 4.60, 4.59, 4.58, 4.55, 4.51, 
                   4.53, 4.53, 4.51, 4.50, 4.51, 4.49, 4.49, 4.60, 4.79, 4.98, 
                   5.16, 5.30, 5.39, 5.49, 5.59, 5.69, 5.77, 5.87, 5.95, 6.09, 
                   6.19, 6.28, 6.42, 6.53, 6.65, 6.79, 6.87, 6.99, 7.09, 7.19, 
                   7.32, 7.38, 7.48, 7.53, 7.65, 7.71, 7.77, 7.84, 7.88, 7.88, 
                   7.93, 7.94, 7.98, 8.05, 8.04, 8.07, 8.08, 8.10, 8.11, 8.14, 
                   8.19, 8.21, 8.27, 8.27, 8.30, 8.31, 8.32, 8.34, 8.37, 8.41, 
                   8.44, 8.45, 8.47, 8.54, 8.52, 8.54, 8.52, 8.53, 8.54, 8.54, 
                   8.55, 8.63, 8.65, 8.61, 8.57, 8.54, 8.58, 8.54, 8.55, 8.52, 
                   8.53, 8.53, 8.60, 8.65, 8.59, 8.59, 8.64, 8.63, 8.67, 8.67, 
                   8.67, 8.67, 8.67, 8.67, 8.67, 8.67, 8.67, 8.67, 8.67, 8.67, 
                   8.67, 8.67, 8.67, 8.67, 8.67, 8.67, 8.67, 8.67, 8.67, 8.67, 
                   8.67, 8.67, 8.67, 8.67, 8.67, 8.67, 8.67, 8.67, 8.67, 8.67, 
                   8.67, 8.67, 8.67, 8.67, 8.67, 8.67, 8.67, 8.67, 8.67, 8.67, ],
            fill: false,
            yAxisID: 'y'
      },
      {
            label: 'AHT25_1_val2',
            backgroundColor: '%233ee302',
            borderColor: '%233ee302',
            borderWidth: '1',
            data: [54.2, 54.2, 54.2, 54.2, 54.2, 54.3, 54.3, 54.5, 54.5, 54.5, 
                   54.6, 54.7, 54.7, 54.8, 54.8, 54.8, 54.9, 54.9, 54.9, 54.9, 
                   54.8, 54.7, 54.7, 54.9, 54.8, 54.9, 55.0, 55.1, 55.1, 55.1, 
                   55.1, 55.2, 55.0, 54.8, 55.0, 55.3, 55.4, 55.3, 55.4, 55.4, 
                   55.4, 55.4, 55.3, 55.4, 55.4, 55.4, 55.5, 55.4, 55.3, 55.5, 
                   55.5, 55.4, 55.1, 55.1, 55.0, 55.4, 55.5, 55.4, 55.5, 55.4, 
                   55.1, 55.5, 55.4, 55.6, 55.6, 55.7, 55.7, 55.7, 55.7, 55.7, 
                   55.6, 55.2, 55.6, 55.7, 55.7, 55.6, 55.7, 55.7, 55.7, 55.8, 
                   55.8, 55.8, 55.8, 55.8, 55.7, 55.7, 55.8, 55.7, 55.7, 55.7, 
                   55.8, 55.8, 55.8, 55.7, 55.8, 55.7, 55.9, 55.7, 55.9, 55.9, 
                   55.9, 55.9, 55.9, 55.8, 55.8, 55.9, 55.9, 55.9, 56.0, 56.0, 
                   56.2, 56.2, 56.2, 56.2, 56.3, 56.4, 56.7, 56.5, 56.2, 55.8, 
                   55.4, 55.1, 55.0, 55.0, 55.1, 56.0, 56.7, 57.0, 57.2, 57.6, 
                   57.5, 57.7, 57.6, 57.4, 57.5, 57.5, 57.5, 57.5, 57.5, 57.4, 
                   57.2, 57.0, 56.2, 56.0, 55.5, 55.3, 55.0, 54.8, 54.6, 54.6, 
                   54.5, 54.0, 53.8, 53.4, 53.3, 53.0, 52.9, 52.7, 52.4, 52.2, 
                   52.2, 52.2, 52.1, 51.7, 51.5, 51.3, 51.5, 51.6, 51.6, 51.4, 
                   51.0, 50.7, 50.3, 50.2, 50.2, 50.1, 49.9, 49.7, 49.3, 49.0, 
                   48.2, 48.0, 48.2, 47.9, 48.1, 47.6, 48.1, 47.7, 46.5, 48.5, 
                   46.1, 46.9, 45.7, 47.1, 47.4, 47.1, 46.8, 46.7, 46.3, 46.3, 
                   46.3, 46.3, 46.3, 46.3, 46.3, 46.3, 46.3, 46.3, 46.3, 46.3, 
                   46.3, 46.3, 46.3, 46.3, 46.3, 46.3, 46.3, 46.3, 46.3, 46.3, 
                   46.3, 46.3, 46.3, 46.3, 46.3, 46.3, 46.3, 46.3, 46.3, 46.3, 
                   46.3, 46.3, 46.3, 46.3, 46.3, 46.3, 46.3, 46.3, 46.3, 46.3, ],
            fill: false,
            yAxisID: 'y1'
      }
    ]
  },
  options: {
    responsive: true,
    title: {
      display: true,
      text: '2022/01/03 23:05から20時間 0分(5分間隔 240サンプリング)',
      fontColor: 'black',
      fontSize: 12
    },
    tooltips: {
      mode: 'index',
      intersect: false
    },
    elements: {
      point: {
        pointStyle: 'dash',
        pointSize: 0,
        radius: 1
      }
    },
    legend: {
      display: true,
      position: 'right',
      align: 'start',
      labels: {
        fontColor: 'black',
        fontSize: 8
      }
    },
    hover: {
      mode: 'nearest',
      intersect: true
    },
    scales: {
      xAxes: [
        {
          display: true,
          scaleLabel: {
            display: true,
            labelString: '2022/01/03',
            fontColor: 'black',
            fontSize: 10
          }
        }
      ],
      yAxes: [
        {
          id: 'y',
          position: 'left',
          display: true,
          ticks: {
            max: 10,
            min: 0,
            stepSize: 1
          },
          scaleLabel: {
            display: true,
            labelString: 'VAL1',
            fontColor: 'black',
            fontSize: 10
          }
        },
        {
          id: 'y1',
          position: 'right',
          display: true,
          ticks: {
            max: 100,
            min: 0
          },
          scaleLabel: {
            display: true,
            labelString: 'VAL2',
            fontColor: 'black',
            fontSize: 10
          }
        }
      ]
    }
  }
}

(JF1VRR)