0

私のアプリでは、ユーザーは体重と体重が属する日付を記録します。そのデータを HighStock 折れ線グラフに表示したい。非常に単純なはずですが、私は過去 2 か月にわたって (部分的に) これに取り組んできました。私はさまざまなことを見てきましたが、これを機能させることはできません。

表示したい正確なデータは、折れ線グラフの実際の線が体重になり、y 軸が体重になり、x 軸がユーザーがその体重に入力した日付になります。

つまり、ユーザーはフォームに昨日の体重を 135 と入力し、フォームに入力した日付は 2012 年 12 月 3 日です。

それが重要かどうかはわかりませんが、ユーザーには多くの重みがあり、重みはユーザーに属しています。

これが私が持っているもので、さまざまなエラーが発生しています。私は間違いなくここに何かが欠けている/理解していません:

重量モデル:

class Weight < ActiveRecord::Base

 def user_weight_series(user, weight)
  weights_by_weight_date = Weights.select("date(weight_date) as dater, content as   weights")
   weights_by_weight_date.map do |record|
parts = %w[%Y %m %d].map{ |s| record.dater.send(s) }
"[Date.UTC(#{parts.join(',')}), #{record.weights}]"
  end
end

application.html.erb

  <script type="text/javascript">
    $(function () {
    var chart;
     $(document).ready(function() {
    window.chart = new Highcharts.StockChart({

        chart: {
            renderTo: 'weight_chart',
            type: 'line',
            marginRight: 20,
            marginBottom: 25
        },
        title: {
            text: 'Your Weight Over Time',
            x: -20 //center
        },
        yAxis: {
            title: {
                text: 'Weight'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },

        legend: {
            layout: 'vertical',
            align: 'center',
            verticalAlign: 'bottom',
            x: -10,
            y: 100,
            borderWidth: 0
        },

        scrollbar: {
          enabled: true
        },

        rangeSelector : {
            selected : 1
        },

        credits: {
            enabled: false
        },


        series: [{
            tickInterval: <%= 1.day * 1000 %>,
            pointStart: <%= 3.weeks.ago.at_midnight.to_i * 1000 %>,
            name: 'Weight',
            data: [ <%= current_user.user_weight_series(user, weight).join(", ") %> ],

        }]
    }, 

    function(chart){

        // apply the date pickers
        setTimeout(function(){
            $('input.highcharts-range-selector', $('#'+chart.options.chart.renderTo))
                .datepicker()
        },0)


    });
});

});

これを行う最善の方法は何ですか？前もって感謝します！

4

1 に答える 1

0

以下は、私が使用するプロセスと、開始するためのヒントです。

  1. ダミーの json データを使用してグラフに入力し、作成したい表示から逆方向に作業します。

  2. ダミーの json データ シリーズと一致する、実際のデータベース データの ruby​​ ハッシュを作成する方法を見つけてください。タイムスタンプについては、次のようにハイチャートで読み取り可能な形式に変換します。

    SOME_DATE.to_time.to_i * 1000

  3. コントローラーの 1 つに、結果の ruby​​ ハッシュを json としてレンダリングさせます。

    def some_controller_method
  @chart_data_series = [] // your desired series here

  respond_to do |format|
    format.json { render :json => @chart_data_series }
  end
end

  4. この json を適切なページから読み取り、チャート シリーズに渡します。1 つの方法はd3を使用することです。

    function buildChart(){
  d3.json("/path/to/your/data.json", function(error, json_data) {

    $('#chart_container').highcharts({
        chart: {type: 'column'}, 
        // options, options, etc
        series: json_data,
        // options, options, etc
    });

  });
});
于 2014-02-21T20:33:12.940 に答える