GoogleFinanceライクなOpen Flash Chartを使う

January 2008

December February

23rd Wed

あすなろとのダブルポストです。

仕事で使ってみたところ、とても簡単にそしてかっこいいグラフが表示できたので紹介します。配置ディレクトリがRoR前提になっていますが、適宜自分の環境に合うように変更してください。
enjoy! ;)

Open Flash Chartサイト

GNU General Public Licenseで公開されています。
http://teethgrinder.co.uk/open-flash-chart/index.php

目標

GoogleFinanceのようなかっちょいいグラフをFlashで表示(下記はキャプチャ画像)
chart
http://finance.google.com/finance?q=google

ダウンロード&解凍

ダウンロードして適当なところに解凍します。
http://teethgrinder.co.uk/open-flash-chart/download.php

ファイルのコピー

解凍したディレクトリ直下のopen-flash-chart.swfと、js/swfobject.jsの2つを下記にコピーします

public/open-flash-chart.swf
public/javascripts/swfobject.js

viewまたはhtmlを編集します

   1    <% stats[:posts] = [23,44,35,46,78,7] %>
   2  
   3    <%= javascript_include_tag 'swfobject' %>
   4    <div id="chart"></div>
   5    <script type="text/javascript">
   6      var so = new SWFObject("/open-flash-chart.swf", "ofc", "180", "100", "9", "#FFFFFF");
   7      so.addVariable("variables","true");
   8      so.addVariable("y_label_style", 'none');
   9      so.addVariable("x_label_style", "10,#799191,0,2"); //2は2メモリごとにラベル表示の意。
  10      so.addVariable("x_axis_steps","1"); //メモリ軸
  11      so.addVariable("y_ticks","5,10,2");
  12      so.addVariable("y_min","<%= stats[:posts].min %>"); //最小値
  13      so.addVariable("y_max","<%= stats[:posts].max %>"); //最大値
  14      so.addVariable("x_labels","Mon,Tue,Wed,Thurs,Fri,Sat,Sun"); //x軸ラベル
  15      so.addVariable("values", "<%= stats[:posts].join(',') %>"); //値
  16      so.addVariable("line_hollow", "3,#799191,This week,10,5"); //グラフの種類
  17      so.addVariable("bg_colour", "#F0F0F0");
  18      so.addVariable("x_axis_colour", "#FFFFFF");
  19      so.addVariable("x_grid_colour", "#FFFFFF");
  20      so.addVariable("y_axis_colour", "#FFFFFF");
  21      so.addVariable("y_grid_colour", "#FFFFFF");
  22      so.addVariable("tool_tip","#x_label#:#val#");
  23  
  24      so.addParam("allowScriptAccess", "sameDomain");
  25      so.write("chart");
  26    </script>

updated by

satoko on Wed 23 Jan 2008 at 10:42

Trackbacks:

addvariabl - Live Search (6 visitors)
addvariabl - Live Search (4 visitors)
topコマンドでメモリ消費量の順にソートする - Hello, world! - s21g (2 visitors)
addvariabl - Live Search (2 visitors)
google finance chart.swf - Google-Suche (1 visitor)
Live Search Web: open-flash-chart rails (1 visitor)
open flash chart finance - Recherche Google (1 visitor)
GoogleFinanceライクなOpen Flash Chartを使う - satoko's blog - s21g (1 visitor)
Open Flash Chart rails - Szukaj w Google (1 visitor)
RubyからTokyoCabinetを使う - Hello, world! - s21g (1 visitor)
BIGLOBEサーチ：“OPEN FLASH CHART”での検索結果 (1 visitor)
[googlefinance] goo ウェブ検索結果 (1 visitor)
Live Search Web: googlefinance (1 visitor)
open flash chart y_ticks - Google-Suche (1 visitor)
Live Search Web: Open Flash Chart (1 visitor)
open flash chart php - Telusuri dengan Google (1 visitor)

Search Words:

flash¹⁸² chart¹⁶⁸ open¹⁶⁴ rails²⁷ charts²⁰ ruby¹⁸ open-flash-chart¹⁸ graph¹³ php⁹ googlefinance⁹ google⁸ javascript⁸ flush⁷ addvariable⁵ y_ticks⁵ open flash chart⁵ open-flash-chart.swf⁴ flashchart³ so.addvariable³ swf³ gnu³ js² error² or² png² finance² 2² +² pie² chart.swf² mac² line_hollow² 1¹ x軸¹ shart¹ charting¹ 値¹ 表示¹ falsh¹ 使う¹ samedomain¹ png保存¹ ダウンロード¹ allowscriptaccess¹ =googlefinance¹ 軸¹ x_axis_steps¹ open flash charts¹ actionscript¹ ofc¹ on¹ ii¹ tool_tip=¹ x_label¹ x_labels¹ googleｆｉｎａｎｃｅ¹ anima¹ safari¹ x_axis_steps=1¹ openflash¹ for¹ swfobject¹ 2.js¹ ラベル¹ chartとは¹ &¹ values¹ mod_rails¹ code¹ かっこいいグラフ¹ addparam¹