TWSNMPのグラフ表示対応

グラグ表示のライブラリ

SNMPで取得した情報やログから得た情報は、数字で見るよりグラフ表示などのビジュアライズによってわかりやすくすることができます。オリジナルのTWSNMPでもグラフ表示する機能はありました。最近は、Webページ用のグラフ表示のライブラリに素晴らしいものが多いので、今、TWSNMPのグラフ表示を見ると貧弱な感じがします。
そこで、どうするか？

Chart.js

最初、このChart.jsを利用しようと考えていました。オープンソースで、機能も情報も豊富なのでよいのですが。いくつか、グラフを作ってみると、ちょっと物足りない部分がでてきました。
会社の製品開発では、

Interactive JavaScript charts for your webpage | Highcharts

を、しばらく使っていたので、それと比較するとChart.jsは、見劣りします。
Highcharts.jsは、商用のライブラリなので、TWSNMPでは使えません。ちょっと、悩んでいると、身近なところに情報がありました。会社で関係している米国の製品で使っているグラフ表示のライブラリが、なんと中国製のオープンソースでした。　
それが、

Apache ECharts

です。使いかたは、HighCharts.jsに似ています。（多分、意識して作ったと思います。）なので、使いかたを習得するが楽でした。

この画面の上部に表示したグラフぐらいだと、

 

 const option = {
   title: {
     show: false,
   },
   tooltip: {
     trigger: 'axis',
     formatter: function (params) {
       const p = params[0];
       return p.name + ' : ' + p.value[1];
     },
     axisPointer: {
       type: 'shadow'
     }
   },
   grid: {
     left: "5%",
     right:"5%",
     top: 40,
     buttom: 0,
   },
   xAxis: {
     type: 'time',
     axisLabel:{
       fontSize: "8px",
       formatter: function (value, index) {
         var date = new Date(value);
         return echarts.format.formatTime('MM/dd hh:mm', date)
       }
     },
     splitLine: {
       show: false
     },
   },
   yAxis: {
     type: 'value',
   },
   series: [{
     type: 'bar',
     color: "#1f78b4",
     large: true,
     data: [[ts,val],....],
   }]
 };
 logChart = echarts.init(document.getElementById('log_chart'));
 logChart.setOption(option);

このぐらいのソースコードで表示できました。
単純なグラフだけでなく、ちょっと頑張れば、

のような、表現も可能です。

https://echarts.apache.org/examples/en/editor.html?c=lines3d-airline-on-globe&gl=1

夢は広がる。何か作りたいというモチベーションをあげるライブラリです。（たぶん、TWSNMPにも、このような画面がでるようになると思います。）

つづく