23rd
Wed
GoogleFinanceライクなOpen Flash Chartを使う
あすなろとのダブルポストです。
仕事で使ってみたところ、とても簡単にそしてかっこいいグラフが表示できたので紹介します。配置ディレクトリがRoR前提になっていますが、適宜自分の環境に合うように変更してください。
enjoy! ;)
Open Flash Chartサイト
GNU General Public Licenseで公開されています。
http://tee
目標
GoogleFina
http://fin
ダウンロード&解凍
ダウンロードして適当なところに解凍します。
http://tee
ファイルのコピー
解凍したディレクトリ直下のopen-flash
- public/ope
n-flash-ch art.swf - public/jav
ascripts/s wfobject.j s
viewまたはhtmlを編集します
1 <% stats[:posts] = [23,44,35,46,78,7] %> 2 3 <%= javascript_include_t ag 'swfobject' %> 4 <div id="chart"></div> 5 <script type="text/javas cript"> 6 var so = new SWFObject("/open-flas h-chart.sw f", "ofc", "180", "100", "9", "#FFFFFF"); 7 so.addVariabl e("variables","true"); 8 so.addVariabl e("y_label_st yle", 'none'); 9 so.addVariabl e("x_label_st yle", "10,#799191,0,2"); //2は2メモリごとにラベル表示の意。 10 so.addVariabl e("x_axis_ste ps","1"); //メモリ軸 11 so.addVariabl e("y_ticks","5,10,2"); 12 so.addVariabl e("y_min","<%= stats[:posts].min %>"); //最小値 13 so.addVariabl e("y_max","<%= stats[:posts].max %>"); //最大値 14 so.addVariabl e("x_labels","Mon,Tue,Wed,Thurs,Fri,Sat,Sun"); //x軸ラベル 15 so.addVariabl e("values", "<%= stats[:posts].join(',') %>"); //値 16 so.addVariabl e("line_hollo w", "3,#799191,This week,10,5"); //グラフの種類 17 so.addVariabl e("bg_colour", "#F0F0F0"); 18 so.addVariabl e("x_axis_col our", "#FFFFFF"); 19 so.addVariabl e("x_grid_col our", "#FFFFFF"); 20 so.addVariabl e("y_axis_col our", "#FFFFFF"); 21 so.addVariabl e("y_grid_col our", "#FFFFFF"); 22 so.addVariabl e("tool_tip","#x_label#:#val#"); 23 24 so.addParam("allowScrip tAccess", "sameDomain "); 25 so.write("chart"); 26 </script>
posted by
satoko
on Wed 23 Jan 2008
at 10:41