SQLの窓 イラストAC フリー素材

2009年03月05日

GoogleAPIからYahooライブラリを利用−折れ線グラフ(LineChart)

コードも少しオブジェクトの内部を調べて元々のサンプルよりは、無駄のないようにしました。
データは自分のサイトであれば、Ajax で DB より直接取得できます。
PHP で画像として書き出すものよりは簡単に使えると思います。

<script src="http://www.google.com/jsapi" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var gg_yui = '2.7.0';
var gg_loader;
google.load('yui', gg_yui);
function Google_yui_init() {
   gg_loader = new YAHOO.util.YUILoader({
      require: ["charts"],
      base: "http://ajax.googleapis.com/ajax/libs/yui/"+gg_yui+"/build/",
      onSuccess: function() {
         yui_chart_sample();
      }
   });
   gg_loader.insert();
}
google.setOnLoadCallback(Google_yui_init);

function yui_chart_sample() {
// YAHOO.widget.Chart.SWFURL =
//   "http://yui.yahooapis.com/2.7.0/build/charts/assets/charts.swf";
   YAHOO.widget.Chart.SWFURL = gg_loader.base+"charts/assets/charts.swf"
//--- data

   YAHOO.example.monthlyExpenses =
   [
      { month: "睦月", rent: 880.00, utilities: 894.68 },
      { month: "如月", rent: 880.00, utilities: 901.35 },
      { month: "弥生", rent: 880.00, utilities: 889.32 },
      { month: "卯月", rent: 880.00, utilities: 884.71 },
      { month: "皐月", rent: 910.00, utilities: 879.811 },
      { month: "水無月", rent: 910.00, utilities: 897.95 }
   ];

   var myDataSource =
      new YAHOO.util.DataSource( YAHOO.example.monthlyExpenses );
   myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
   myDataSource.responseSchema =
   {
      // 上のデータのフィールドの定義
      fields: [ "month", "rent", "utilities" ]
   };

//--- chart

   var seriesDef =
   [
      // データのフィールドの名前
      { displayName: "備前", yField: "rent",
          style: { 
             color: 0x960F3A, 
             size: 10, 
             borderColor: 0x000000 
          } 
      },
      { displayName: "陸奥", yField: "utilities",
          style: { 
             color: 0x88B1B8, 
             size: 10, 
             borderColor: 0x000000 
          } 
      }
   ];

   YAHOO.example.formatCurrencyAxisLabel = function( value )
   {
      return YAHOO.util.Number.format( value,
      {
         // y軸属性
         prefix: "(両) ",
         thousandsSeparator: ",",
         decimalPlaces: 2
      });
   }

   // データポイント(イベント)のバルーンの表示内容
   YAHOO.example.getDataTipText = function( item, index, series )
   {
      var toolTipText = series.displayName + " for " + item.month;
      toolTipText += "\n" + 
         YAHOO.example.formatCurrencyAxisLabel( item[series.yField] );
      return toolTipText;
   }

   var currencyAxis = new YAHOO.widget.NumericAxis();
   currencyAxis.minimum = 800;
   // y軸の表示定義の実装
   currencyAxis.labelFunction = YAHOO.example.formatCurrencyAxisLabel;

   var mychart = new YAHOO.widget.LineChart( "chart", myDataSource,
   {
      series: seriesDef,
      xField: "month",
      yAxis: currencyAxis,
      dataTipFunction: YAHOO.example.getDataTipText,
      //only needed for flash player express install
      expressInstall: "assets/expressinstall.swf"
   });
}
</script>
<div id="chart" style='width:600;height:400'></div>

API は、結構面倒な事も多いですが、マジに使わずにサンプルをうまく
使いまわすのが良いと思います。

それと、base URL を省略すると、動きますがどうやらその場合は
YAHOO を直接見にいってるみたいです( オブジェクト内の変数がそうなってたので )

スタイルは結構いろいろ指定できますので、デザイナに頼んだら
いいチャートができるかもしれません。


【JavaScriptの最新記事】
posted by at 2009-03-05 15:06 | JavaScript | このブログの読者になる | 更新情報をチェックする