tools team/tools

AJAX YUI Library Charts

概要

  • AJAX ライブラリィのひとつであるYahoo! UIのChartsコントロールを利用してのサンプルです。

インストール

簡単な例

  • ソース(HTML出力側)
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Chart Sample</title>
    <style type="text/css">
    body {
        margin:0;
       padding:0;
    }
    </style>
    //必要なソースファイルを読み込みます。
    <link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
    <script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
    <script type="text/javascript" src="../../build/json/json-min.js"></script>
    <script type="text/javascript" src="../../build/element/element-min.js"></script>
    <script type="text/javascript" src="../../build/connection/connection-min.js"></script>
    <script type="text/javascript" src="../../build/datasource/datasource-min.js"></script>
    <script type="text/javascript" src="../../build/charts/charts-min.js"></script>
    <!--begin custom header content for this example-->
    <style type="text/css">
           #chart
           {
                   width: 750px;/* グラフの横幅指定 */ 
                   height: 400px;/* グラフの縦幅指定 */ 
           }
           .chart_title /* タイトルのスタイル定義 */ 
           {
                   display: block;
                   font-size: 1.2em;
                   font-weight: bold;
                   margin-bottom: 0.4em;
           }
           .yui-dt-table {width: 750px;} 
    </style>
    <!--end custom header content for this example-->
    </head>
    <body class=" yui-skin-sam">
    <h1>Real Time Chart Sample</h1>
    <!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
    <span class="chart_title"></span>
    <div id="chart"></div>
    <div id="basic"></div>
    <script type="text/javascript">
    //chartの元となるswfを読み込みます。
           YAHOO.widget.Chart.SWFURL = "../../build/charts/assets/charts.swf";
                   YAHOO.util.Event.addListener(window, "load", function()
           {
    //--- グラフのデータを読み込みます。例ではSNMPGETするPHPを呼び出します(JSON形式でデータは受け取ります)
           var jsonData = new YAHOO.util.DataSource( "phpsnmp.php" );
           //use POST so that IE doesn't cache the data
           jsonData.connMethodPost = true;
           jsonData.responseType = YAHOO.util.DataSource.TYPE_JSON;
           jsonData.responseSchema =
           {
                           resultsList: "Result",
                           fields: ["date","count","count2"]
           };
    //グラフの見た目の定義です。
    var styleDef =
    {
          animationEnabled: false,//Trueにするとグラフがグニョングニョン動きます
          xAxis:
           {
                   majorTicks:
                   {
                          display:"inside",
                          length:10,
                           size:1
                   },
                   minorTicks:
                   {
                           display:"inside",
                           length:2
                   },
                   labelRotation: -90
           },
           yAxis:
           {
                   titleRotation:-90
           }
    }
    //データの定義です。ここでは、色の定義もできます。
    var seriesDef =
    [
           { displayName: "OUT", yField: "count",style:{lineColor:0xFF0000,lineAlpha:.8,borderColor:0x000000,fillColor:0xFF0000} },
           { displayName: "IN", yField: "count2",style:{lineColor:0x0000FF,lineAlpha:.5,borderColor:0x000000,fillColor:0x0000FF} }
    ];
    //縦軸ラベルのフォーマット
    YAHOO.example.numberToCurrency = function( value )
    {
           return YAHOO.util.Number.format(Number(value), {prefix: "", thousandsSeparator: ","});
    }
    //縦軸
    var currencyAxis = new YAHOO.widget.NumericAxis();
    currencyAxis.stackingEnabled = true;
    currencyAxis.labelFunction = YAHOO.example.numberToCurrency;
    currencyAxis.title = "Octets";
    //--- グラフの生成
           var yAxis = new YAHOO.widget.NumericAxis();
           yAxis.minimum = 0;
           var mychart = new YAHOO.widget.LineChart( "chart", jsonData,
           {
                   style: styleDef,//スタイルの定義
                   xField:"date",//横軸タイトル
                   series: seriesDef,//データ定義
                   yAxis: currencyAxis,//縦軸ラベル
                   polling: 1500,//データアクセス間隔(1.5秒)
                   expressInstall: "assets/expressinstall.swf"//グラフ用のflash
           });
    });
    </script>
    <!--END SOURCE CODE FOR EXAMPLE =============================== -->
    </body>
    </html>
  • phpでSNMPgetしてDBに入れてJSONで出すサンプル。
      <?php
    //JSON出力
    header('Content-type: application/json');
    //SNMPGET
    $ip="127.0.0.1";
    $mib1="ifOutOctets.1";
    $mib2="ifInOctets.1";
    $commu="hogehoge"
    $snmpresult1 = snmpget($ip,$commu, $mib1);
    $snmpresult2 = snmpget($ip,$commu, $mib2);
    
    $a = split(" ", $snmpresult1);
    $a_2 = split(" ", $snmpresult2);
    $checkdate=date( "Y/m/d H:i:s", time() );
    
    //時間とSNMPの結果をDBへ。ファイルでもいいと思います。
    $link = mssql_connect("127.0.0.1", "UserName", "PassWord");
    mssql_select_db("DBSAMPLE", $link);
    $sql_I = "INSERT INTO TABLE values('$checkdate','$a[1]','$a_2[1]')";
    $rsl_I = mssql_query($sql_I, $link);
    //プロット数120個にしてます。
    $sql_S = "SELECT TOP (120) timestamp,mib1,mib2  
             FROM (SELECT TOP (120) timestamp,mib1,mib2 FROM TABLE  ORDER BY  timestamp DESC) AS derivedtbl_1 order by timestamp";
    $rsl_S = mssql_query($sql_S, $link);
    for ($i = 0;$row = mssql_fetch_array($rsl_S);$i++) {
           $output[$i][0]=$row[0];
           $output[$i][1]=$row[1];
           $output[$i][2]=$row[2];
    }
    $k=$i-1;
    ?>
    <!-- JSONで出力 -->
    {"Result":
           [
           <?php
                 for ($num = 0; $num < $i; $num++){
                      if($num > 0){
                                   $bef=$num-1;
                                   $oct=$output[$num][1]-$output[$bef][1];
                                   $oct_2=$output[$num][2]-$output[$bef][2];
                                   if( $num === $k){
                                             echo "{\"date\":\"";
                                             print_r ($output[$num][0]);
                                             echo "\",\"count\":";
                                             print_r($bit);
                                             echo ",\"count2\":";
                                             print_r($bit_2);
                                             echo " }\n";
                                    }else{
                                             echo "{\"date\":\"";
                                             print_r ($output[$num][0]);
                                             echo "\",\"count\":";
                                             print_r($bit);
                                             echo ",\"count2\":";
                                             print_r($bit_2);
                                             echo " },\n\t";
                                  }
                        }
                 }
           ?>
           ]
    }

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2009-11-21 (土) 11:47:09 (2829d)