amchartのamstockとRuby on Railsでファンドの基準価額を描画する、

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);
}