Googleのチャート機能をSenchaTouchの中に実装

「SenchaTouch + GoogleCharts」を利用し、ローソク足チャートの実装をメモする。

GoogleChartsを読み込む

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
    </script>

SenchaTouch側のPanelを準備する

SenchaTouch

{
    xtype: 'panel',
    html: [
        '<div class="tab_rate_chart_area_top">',
            '<div id="id-rate-chart-div"></div>',
        '</div>'
    ].join('')
}

GoogleChartsを初期化する

    // チャートを描画する
    drawChart: function(records){
        var chartId = 'id-rate-chart-div';
        var width = Ext.get(chartId).getWidth();
        var data = google.visualization.arrayToDataTable(records, true);
        var options = {
            legend: 'none',
            colors: ['#ccc'],
            chartArea: {
                left: 50,
                top: 15,
                width: width - 60,
                height: 130
            },
            hAxis: {
                showTextEvery: 6,
                textStyle: {
                    fontSize: 9
                }
            },
            vAxis: {
                textStyle: {
                    fontSize: 9
                }
            },
            candlestick:{
                hollowIsRising: true,
                fallingColor: {
                    fill: '#002DB2',
                    stroke: '#002DB2',
                    strokeWidth: '0'
                },
                risingColor:{
                    fill: '#B20000',
                    stroke: '#B20000',
                    strokeWidth: '0'
                }
            }
        };
        if (!this.chart) this.chart = new google.visualization.CandlestickChart(document.getElementById(chartId));
        this.chart.clearChart();
        if (records.length > 0) this.chart.draw(data, options);
    },

records = [
    ['ラベル', '最小値', '開始値', '終了値', '最大値'],
    ['ラベル', '最小値', '開始値', '終了値', '最大値']
]

実装済みアプリ

• FXAlert - 外為のアラート通知アプリ : [レート]-[チャート画面]