javascriptベースのamchartではなく一つ古いのflash版でやりました。
http://www.amcharts.com/
amchartに食わせるデータは基本2つ：
①チャートの設定ファイル、よくあるのはsettings.xml
②データファイル、xml,csv,jsonなど対応して、実際の描画用のデータが渡される。
※データファイルが設定ファイルの中にインクルードされる方法と、設定ファイルの中に直接データを書き出し（データファイルが無くでもいける）
今回はsetting.xmlを固定ファイルにして、データだけrailsで動的に生成するやり方で作った
setting.xml
<?xml version="1.0" encoding="UTF-8"?>
<!-- Only the settings with values not equal to defaults are in this file. If you want to see the
full list of available settings, check the amstock_settings.xml file in the amstock folder. -->
<settings>
<margins>0</margins>
<text_size>10</text_size>
<number_format>
<letters>
<letter number="1000">千</letter>
<letter number="1000000">百万</letter>
<letter number="1000000000">億</letter>
</letters>
</number_format>
<date_formats>
<x_axis>
<days>MM/DD</days>
<months>MM</months>
</x_axis>
<legend>
<days>YYYY/MM/DD</days>
<weeks>YYYY/MM/DD</weeks>
<months>YYYY/MM/DD</months>
</legend>
</date_formats>
<data_sets>
<data_set did="0">
<title>ファンドA</title>
<color>FF0000</color>
<file_name>../../fund/search/data/123</file_name>
<main_drop_down selected="true"></main_drop_down>
<csv>
<reverse>true</reverse>
<separator>,</separator>
<date_format>YYYY-MM-DD</date_format>
<decimal_separator>.</decimal_separator>
<columns>
<column>date</column>
<column>close</column>
</columns>
</csv>
</data_set>
<data_set did="1">
<title>ファンドB</title>
<color>FF00BB</color>
<short>[ぶどうの実]</short>
<file_name>../../fund/search/data/456</file_name>
<csv>
<reverse>true</reverse>
<separator>,</separator>
<date_format>YYYY-MM-DD</date_format>
<decimal_separator>.</decimal_separator>
<columns>
<column>date</column>
<column>close</column>
</columns>
</csv>
</data_set>
<data_set did="3">
<title>日経平均株価(日経225)</title>
<short>日経255</short>
<compare_list_box selected="true"></compare_list_box>
<color>999999</color>
<file_name>../../fund/search/data/634</file_name>
<csv>
<reverse>true</reverse>
<separator>,</separator>
<date_format>YYYY-MM-DD</date_format>
<decimal_separator>.</decimal_separator>
<columns>
<column>date</column>
<column>close</column>
</columns>
</csv>
</data_set>
</data_sets>
<charts>
<chart cid="0">
<bg_color>f5f5f5,ffffff</bg_color>
<border_color>#CCCCCC</border_color>
<border_alpha>100</border_alpha>
<grid>
<x>
<dashed>true</dashed>
</x>
<y_right>
<color>cccccc</color>
<alpha>100</alpha>
<dashed>true</dashed>
</y_right>
</grid>
<legend>
<show_date>true</show_date>
</legend>
<graphs>
<graph gid="0">
<axis>right</axis>
<type>line</type>
<data_sources>
<close>close</close>
</data_sources>
<compare_source>close</compare_source>
<legend>
<date key="true" title="true"><![CDATA[<b>{close}</b>]]></date>
<period key="true" title="true"><![CDATA[open:<b>{open}</b> low:<b>{low}</b> high:<b>{high}</b> close:<b>{close}</b>]]></period>
<date_comparing key="true" title="true"><![CDATA[{close.percents}]]></date_comparing>
<period_comparing key="true" title="true"><![CDATA[{close.percents}]]></period_comparing>
</legend>
</graph>
</graphs>
</chart>
</charts>
<data_set_selector>
<position>top</position>
<width>300</width>
<max_comparing_count>4</max_comparing_count>
<main_drop_down_title>選択</main_drop_down_title>
<compare_list_box_title>比較</compare_list_box_title>
</data_set_selector>
<period_selector>
<button>
<bg_color_hover>b81d1b</bg_color_hover>
<bg_color_selected>b81d1b</bg_color_selected>
<text_color_hover>ffffff</text_color_hover>
<text_color_selected>ffffff</text_color_selected>
</button>
<periods>
<period type="MM" count="1">1ヶ月</period>
<period type="MM" count="3">3ヶ月</period>
<period type="MM" count="6">6ヶ月</period>
<period selected="true" type="YYYY" count="1">1年</period>
<period type="YYYY" count="3">3年</period>
<period type="YYYY" count="5">5年</period>
<period type="YYYY" count="7">7年</period>
<period type="MAX">設定来</period>
</periods>
<periods_title>期間:</periods_title>
<custom_period_title>任意期間:</custom_period_title>
</period_selector>
<header>
<enabled></enabled>
<text><![CDATA[<b>{title}</b> {short} {description}]]></text>
<text_size>12</text_size>
</header>
<plot_area>
<border_color>cccccc</border_color>
</plot_area>
<scroller>
<enabled>true</enabled>
<height>50</height>
<graph_data_source>close</graph_data_source>
<bg_color>f5f5f5,ffffff</bg_color>
<resize_button_color>b81d1b</resize_button_color>
</scroller>
</settings>
controllers/fund/search_controller.rbに追加
3年以内の分配金再投資基準価額を純資産降順でcsv作成、csvは行は「yyyy-mm-dd,修正基準価額」になっている
.....
.....
def data
@fundCorrectionIndex = FundCorrectionIndex.find(:all, :conditions => ["fund_id=? and as_of_date >= (NOW() - INTERVAL 3 YEAR)", params[:id]], :order => 'as_of_date desc')
csv_data = ""
@fundCorrectionIndex.each do |rec|
csv_data += "#{rec.as_of_date.strftime("%Y-%m-%d")},#{rec.correction_value}\r\n"
end
render :text => csv_data
end
.....
.....
htmlは
<!-- headに -->
<script type="text/javascript" src="/rsrc/amcharts/swfobject.js"></script>
<script type="text/javascript" src="/rsrc/amcharts/stockchart.js"></script>
<!-- bodyに -->
<body onLoad="draw_stock('stock','/market/special/asia/settings.xml')">
<!-- 描画用divを追加 -->
<div id="stock"></div>
stockchart.js
function draw_stock(id,setting_url,width,height) {
if(width == undefined){
width = "700";
}
if(height == undefined){
height = "500";
}
if(setting_url == undefined){
setting_url = "settings.xml"
}
var params = {
bgcolor:"#FFFFFF"
};
var flashVars = {
path: "/rsrc/amcharts/",
settings_file: setting_url,
data_file: "data.xml",
chart_id: id
};
swfobject.embedSWF("/rsrc/amcharts/amstock.swf", id, width, height, "8.0.0", "/rsrc/amcharts/expressInstall.swf", flashVars, params);
}
