Highchartsを使用した統計の視覚化

この記事では、OSとディスクアレイの統計に基づいて、 Highchartsを使用して視覚的で表示可能なグラフを作成した経験を説明したいと思います。 多くの最新のオペレーティングシステムとディスクアレイには、OSまたはアレイのサブシステムの動作に関するデータを取得できる組み込みソフトウェアまたは追加ソフトウェアに基づくメカニズムがあります（トレースではなく、特定の間隔で平均化された統計インジケーター）。 LANおよびFCスイッチのインターフェースのパケットおよびエラーカウンターの統計を収集することもできます。 多くの人々は、このデータを視覚化し、レポートまたはサモピスニー監視システムで使用したいと考えています。







免責事項：私はプログラマーではなく、また仕事もしておらず、コードを書く能力が非常に疑わしいため、その品質に大きな打撃を与えないでください。 この場合、より短く/より有能な/コーシャを最適化し、書き直すことができることに気付いたら、私は喜んでいます。



時には、HP-UXおよびLinuxサーバーにインストールされたMeasureware *のデータ、HP Storageworks XP、HP EVA、EMC Clariion、EMC Symmetrixアレイの作業の統計、およびBrocade FCスイッチインターフェイスの負荷グラフを処理する必要がありました。 潜在的に、CSV形式で表示され、時間でソートされた統計に基づいてグラフを描画できるだけでなく、Highchartsを使用することもできます。 SNMPを使用してデータを収集しながら、リアルタイムでグラフを描画することもできます。 もちろん、よく知られているCactiは、SNMPを使用して収集されたリアルタイムおよび蓄積された統計に最適であり、正しいと言うでしょう。インターネットは、Cacti展開ガイドとさまざまな機器の監視設定でいっぱいです。多くの犬が食べられ、妨害を展開しないと、このような監視は非常に高くなります。 Excelベースのグラフからrrdtoolとgnuplotが生成した画像に行き、最後にHighchartsに行きました。 上記の解決策のすべてが満足されるわけではなく、私が説明した方法に興味のある人が興味を持っている可能性は十分にあります。

* Measureware（OpenView Performance Agent）を使用すると、現時点でOSリソース（HP-UX、Linux、Windows）の使用率を監視し、蓄積されたデータを表示し、さらに処理するためにASCII形式にアップロードできます。 これを使用すると、異なるOSサブシステム、個々のプロセス、カスタマイズされたアプリケーション・グループ（システム内のすべてのora_dbw *プロセスなど）の操作に関する主要なメトリックの値を取得できます。 Measurewareデータは、システムパフォーマンスの潜在的なボトルネックを識別するために、OSとそのプロセスのトレースとともに使用されます。 情報は宣伝されていません。私はHPで働いていません。別の記事に値する便利なツールについて言及したかっただけです（ところで、HabrazhitelはUNIXの独自の工業バージョンで使用されるソフトウェアに関する興味深いトピックですか？）。

Highchartsとは何で、何を食べますか？

これは、Javascriptを使用したチャートライブラリです。 通常、ブラウザを使用してインタラクティブなグラフをレンダリングおよび表示します。 Highchartsが優れているのはなぜですか？ すべてがお気に入りのFFとChromeとSafari（i-techでも）、IEでも魅力的にレンダリングされます。 グラフを操作できます。スケールの変更、不要なグラフの無効化、必要なグラフの強調表示、新しいポイントの追加、マウスクリックプロセッサ、ツールチップなどの使用。 入力データは、ローカルファイルから読み取られ、AJAXを使用し、データベースにアクセスし、json形式で受信できます（間違った用語を正しく作成または使用していない場合は申し訳ありません）。 また、マウス操作により、取得したグラフィックをPNG画像に保存できます。 ある時点で、私は多くの異なる写真を生成する必要があり、私はあまりにも移動してクリックするのが面倒だったので、バッチを作りたかったのです。 Highchartsサポートフォーラムで説明されているNode、rhino、およびその他のハエをマスターするためのヌビア人の努力（ところで、非常に迅速かつ友好的で助けてくれます）は、何にもつながりませんでした。 そのため、ユーティリティiecapt.exeを発見しました（Habréの記事がいくつかある、cutycaptの類似物です）-JSコードの処理とレンダリングに適切な一時停止を設定すると、ブラウザーからエクスポートするときと同じ画像が取得されます。



PNG / JPEG / PDFへのエクスポートは、サーバー側のモジュールとライブラリを使用してSVGをPNGに変換することに基づいており、サーバー上のphpページ、またはhighcharts.comへのリダイレクトが必要であると言わなければなりません。 ちなみに、最近のバージョンのHighchartsでは、動的に構築された拡大されたチャートとグラフのエクスポートを修正しました。 グラフィックをエクスポートせずに、JSボディキットとjquery.jsをローカルに保存した単純なhtmlファイルを実行することにより、グラフィックをローカルで表示できます。 上記のユーティリティiecapt / cutycaptをエクスポートに使用することもできます。 FCスイッチのトラフィック統計をリアルタイムで取得するために、php_snmpモジュールを使用して、スイッチのMIBツリーで必要なOIDを定期的にポーリングし、データを解析するphpページを使用しました。 SNMP要求はスイッチプロセッササイクルを消費するため、過度に頻繁な要求で過負荷にならないようにしてください。 Brocadeには、この問題に関するサービスノートさえあります。プロセッサの使用率が高いと、FCポートがリセットされる可能性があります。確率は小さいですが、存在し、使用するトランシーバのタイプ（メーカーとファームウェアのリビジョン）によって異なります。 オフトピックについては申し訳ありませんが、「警告-武装を意味します」。

出口でHighchartsを使用すると何が得られますか？

視覚化のために、次のタイプのグラフを使用できます。



円-たとえば、フロントエンドアダプターの負荷におけるサーバーグループの分布を表示するには：





列-ヒストグラムを作成する場合：





スプライン-異種メトリックの場合、独自のスケールで複数の軸を使用し、異なるグラフをスケールに追加できます。





オーバーレイメトリックの効果を示すための面積または面積スプライン：





またはその逆-スイッチインターフェイス上の多方向トラフィックフローの対比：





Highchartsプロジェクトページには、他の多くの便利で興味深いタイプのチャートがあります。 プロジェクトは開発中であり、更新プログラムが公開されています。フォーラムでは、多くの便利なレシピを見つけることができます。

ファイルから蓄積されたデータを処理し、リアルタイムで到着する

では、入り口には何がありますか？ 次のように、データを収集してCSV形式にアップロードする段階を意図的に省略します。 これは、使用するオペレーティングシステムまたはディスクアレイごとに個別の記事のトピックです。 そのため、時間とともに（垂直方向に）変化するさまざまなメトリック（水平）の値のテーブルと、対応する見出しが必要になります。たとえば、次のようになります。

Unixtime、metric1、metric2、metric3

1297666800、val1_1、val2_1、val3_1

1297666860、val1_2、val2_2、val3_2

などなど



データは表形式でも表示できます。各行には、たとえば次のように、等間隔の時間間隔で測定された特定のメトリックの値がリストされます（タイトルにはグラフのタイトル、基準点、間隔が含まれます）。

Lan0統計、1297666800、600

Rx bps、2000、3000、4000

Tx bps、1200、1600、2000



表示されたメトリックをインタラクティブに選択するための私のページは次のようになり、データの場所の最初のオプションを持つファイルを使用します（つまり、メトリックは水平に、各行の値は特定の時間間隔にあります）：





唯一のこと-私の入力ファイルには、追加のフィールドと、統計の処理とグラフのプロットに別のプログラムのファイルを使用する可能性を示す見出しのある行があります。



このページが機能するために必要なファイルは次のとおりです。

1. mwa.htm-ファイル、そのメトリックおよびグラフの描画を選択するメインページ。
2. jquery.js-この有名なライブラリを隣に置くか、外部のWebサーバーに配置して使用します（探している人はだれでも見つけられます）。
3. 新鮮なjsおよびexport-serverフォルダーは、Highchartsプロジェクトサイトからダウンロードされます。 tytsページには、ローカルエクスポートの設定方法が記載されています。
4. getlist.php-mwa.htmから呼び出される、テンプレートごとの統計情報を含む入力CSVファイルを検索する非同期要求を実行するために必要です。
5. 1週間のHP-UXホストの統計の例を含むmwa_S-DB-1__weekG.csv。
6. live_snmp_only.php-要求「live_snmp_only.php？host = 10.20.30.40＆fcPort = 20」を使用して呼び出されるBrocadeスイッチのFCポートの負荷をグラフ化するための追加ページ。 コミュニティは次のファイルに記述されています。
7. snmp64.php-live_snmp_only.phpから定期的に呼び出され、BrocadeスイッチのFCポートの発信および着信速度を受け取ります（Cisco FCまたはLANでは、まだ経験がなく、適切なOIDを使用するだけです）。 FOSの古いバージョンでは、64ビットカウンターがない場合があります。

ファイルを含むアーカイブは、 http： //ge.tt/96cqBa7およびhttp://depositfiles.com/files/06h2ky72e + http://depositfiles.com/files/o6ycfl3kwにアップロードされます （より大きなアーカイブは、JSボディキットとライブラリに必要ですPNGへのエクスポート）



リアルタイムスケジュールを構築する場合、スイッチから新しいトラフィックデータを受信する前に、スイッチから統計情報が定期的にダウンロードされるデータベースにリクエストを作成し（たとえば、SNMPを介して取得）、チャートにこれらのポイントを構築できます。 その後の新しいデータのリクエストにより、「新鮮な」ポイントが追加され、グラフがシフトします。



ちなみに、リアルタイムチャートの目的のタイムゾーンへの時間の移動を克服できませんでした。 解決策を見つけてくれたすべての人に事前に感謝します。



特定のメトリックの値を持つ文字列形式のCSVファイル内のデータ配置の変形の場合、「var chart = new Highcharts.Chart（options）;」を呼び出す前に、そのようなたわごとコードが適切です。

// Verticaly dispersed data:

var items = lines[metricNo].split(',');

series.name = items[0];

$.each(items, function(itemNo, item) {

if (itemNo>0 && parseInt(item)>=0) {

series.data.push(parseInt(item)); // its important to parseInt !!!!

}

});

series.pointStart = parseInt(start); // its important to parseInt !!!!

series.pointInterval = parseInt(interval);

options.series.push(series);*/







ただし、値は定期的な間隔（series.pointInterval）で収集され、「ギャップ」はありません。



最後に、フォーラムからのいくつかのヒントとレシピ：

• チャートで500ポイントを超えないようにしてください。そうしないと、適切なブレーキが作動します。
• グラフに正しく表示されるように、unixtime形式の時間にも1000を掛ける必要があることを忘れないでください。
• いくつかのグラフのポイントの選択については、 http ： //highslide.com/forum/viewtopic.php？f = 9＆t = 8101をご覧ください。
• 1つのhtmページに複数のグラフを作成し、イベントごとに新しいポイントを追加する方法： http : //highslide.com/forum/viewtopic.php?f=9 & t= 8030およびhttp://jsfiddle.net/QCefk/1/
• ホバーによるグラフの色の変更： http : //jsfiddle.net/vu8DB/
• 「コリドー」内にグラフをプロットします。たとえば、測定誤差や値の広がりを示します。http ： //jsfiddle.net/pHFfF/3/
• マウスのスケーリング： http : //jsfiddle.net/HXUmK/4/
• ダブルX軸： http : //jsfiddle.net/PPAUx/26/
• 最小値と最大値を見つける： http : //jsfiddle.net/ebuTs/7/

Highchartsライブラリと、それで作成できるグラフィックが本当に好きです。 楽しんでもらえたら嬉しいです。



UPD：スクリプトを使用してアーカイブを転送する方が信頼できる場所を教えてください。そうしないと、ge.ttとdepositfilesで問題が発生する可能性がありますか？