Rails - Google_Visular柱形图条宽

时间:2013-07-31 23:32:23

标签: ruby-on-rails ruby-on-rails-3.2 google-visualization

我使用google_visular gem添加了一些图表。我正在试图弄清楚当我在我的活动记录语句上调用order方法时,是什么原因导致我的柱形图用极薄的列创建。

例如:

生成图表的代码:

  def self.get_graph(options={})
     data_table = GoogleVisualr::DataTable.new
      data_table.new_column('datetime', 'Date')
      data_table.new_column('number', "#{options[:model_name]}")
      options[:model_name].where(:generated_at => options[:start_date].beginning_of_day..options[:end_date].end_of_day).each do |p|
          data_table.add_row([p.generated_at.in_time_zone('Pacific Time (US & Canada)'), p.__send__(options[:col_name])])
      end
       opts = { :width => 1100, :height => 280, :chartArea => {:width => 950, :height => 220}, :colors => [options[:color]], :legend => 'none' }
       @chart = GoogleVisualr::Interactive::ColumnChart.new(data_table, opts)
  end

代码调用方法:

@users_chart  = Graphing.get_graph({:model_name =>  User, :col_name => "users", :start_date => start_date, :end_date => end_date, :color => "#D48F00"})

JavaScript生成:

  google.load('visualization','1', {packages: ['corechart'], callback: function() {
    var data_table = new google.visualization.DataTable();data_table.addColumn({"type":"datetime","label":"Date"});data_table.addColumn({"type":"number","label":"User"});data_table.addRow([{v: new Date(2013, 6, 29, 20, 0, 0)}, {v: 182313}]);data_table.addRow([{v: new Date(2013, 6, 29, 23, 0, 0)}, {v: 62751}]);data_table.addRow([{v: new Date(2013, 6, 29, 17, 0, 0)}, {v: 234533}]);data_table.addRow([{v: new Date(2013, 6, 29, 21, 0, 0)}, {v: 132029}]);data_table.addRow([{v: new Date(2013, 6, 29, 22, 0, 0)}, {v: 92957}]);data_table.addRow([{v: new Date(2013, 6, 29, 19, 0, 0)}, {v: 222587}]);data_table.addRow([{v: new Date(2013, 6, 30, 0, 0, 0)}, {v: 9353}]);data_table.addRow([{v: new Date(2013, 6, 29, 18, 0, 0)}, {v: 240253}]);data_table.addRow([{v: new Date(2013, 6, 30, 10, 0, 0)}, {v: 240635}]);data_table.addRow([{v: new Date(2013, 6, 30, 14, 0, 0)}, {v: 225663}]);data_table.addRow([{v: new Date(2013, 6, 30, 1, 0, 0)}, {v: 34734}]);data_table.addRow([{v: new Date(2013, 6, 30, 16, 0, 0)}, {v: 213179}]);data_table.addRow([{v: new Date(2013, 6, 30, 2, 0, 0)}, {v: 31031}]);data_table.addRow([{v: new Date(2013, 6, 30, 9, 0, 0)}, {v: 231830}]);data_table.addRow([{v: new Date(2013, 6, 30, 12, 0, 0)}, {v: 247994}]);data_table.addRow([{v: new Date(2013, 6, 30, 4, 0, 0)}, {v: 63644}]);data_table.addRow([{v: new Date(2013, 6, 30, 6, 0, 0)}, {v: 151377}]);data_table.addRow([{v: new Date(2013, 6, 30, 11, 0, 0)}, {v: 252827}]);data_table.addRow([{v: new Date(2013, 6, 30, 13, 0, 0)}, {v: 244994}]);data_table.addRow([{v: new Date(2013, 6, 30, 5, 0, 0)}, {v: 107412}]);data_table.addRow([{v: new Date(2013, 6, 30, 15, 0, 0)}, {v: 214306}]);data_table.addRow([{v: new Date(2013, 6, 30, 0, 0, 0)}, {v: 41760}]);data_table.addRow([{v: new Date(2013, 6, 30, 8, 0, 0)}, {v: 199565}]);data_table.addRow([{v: new Date(2013, 6, 30, 3, 0, 0)}, {v: 40525}]);data_table.addRow([{v: new Date(2013, 6, 30, 7, 0, 0)}, {v: 185940}]);
    var chart = new google.visualization.ColumnChart(document.getElementById('users_chart'));
    chart.draw(data_table, {width: 1100, height: 280, chartArea: {width: 950, height: 220}, colors: ["#D48F00"], legend: "none"});
  }});

输出: Output without order clause

但是,如果我改变我的where方法以包含订单,例如:

def self.get_graph(options={})
         data_table = GoogleVisualr::DataTable.new
          data_table.new_column('datetime', 'Date')
          data_table.new_column('number', "#{options[:model_name]}")
          options[:model_name].where(:generated_at => options[:start_date].beginning_of_day..options[:end_date].end_of_day).order('generated_at ASC').each do |p|
              data_table.add_row([p.generated_at.in_time_zone('Pacific Time (US & Canada)'), p.__send__(options[:col_name])])
          end
           opts = { :width => 1100, :height => 280, :chartArea => {:width => 950, :height => 220}, :colors => [options[:color]], :legend => 'none' }
           @chart = GoogleVisualr::Interactive::ColumnChart.new(data_table, opts)
      end

生成JavaScript:

  google.load('visualization','1', {packages: ['corechart'], callback: function() {
    var data_table = new google.visualization.DataTable();data_table.addColumn({"type":"datetime","label":"Date"});data_table.addColumn({"type":"number","label":"User"});data_table.addRow([{v: new Date(2013, 6, 29, 17, 0, 0)}, {v: 234533}]);data_table.addRow([{v: new Date(2013, 6, 29, 18, 0, 0)}, {v: 240253}]);data_table.addRow([{v: new Date(2013, 6, 29, 19, 0, 0)}, {v: 222587}]);data_table.addRow([{v: new Date(2013, 6, 29, 20, 0, 0)}, {v: 182313}]);data_table.addRow([{v: new Date(2013, 6, 29, 21, 0, 0)}, {v: 132029}]);data_table.addRow([{v: new Date(2013, 6, 29, 22, 0, 0)}, {v: 92957}]);data_table.addRow([{v: new Date(2013, 6, 29, 23, 0, 0)}, {v: 62751}]);data_table.addRow([{v: new Date(2013, 6, 30, 0, 0, 0)}, {v: 9353}]);data_table.addRow([{v: new Date(2013, 6, 30, 0, 0, 0)}, {v: 41760}]);data_table.addRow([{v: new Date(2013, 6, 30, 1, 0, 0)}, {v: 34734}]);data_table.addRow([{v: new Date(2013, 6, 30, 2, 0, 0)}, {v: 31031}]);data_table.addRow([{v: new Date(2013, 6, 30, 3, 0, 0)}, {v: 40525}]);data_table.addRow([{v: new Date(2013, 6, 30, 4, 0, 0)}, {v: 63644}]);data_table.addRow([{v: new Date(2013, 6, 30, 5, 0, 0)}, {v: 107412}]);data_table.addRow([{v: new Date(2013, 6, 30, 6, 0, 0)}, {v: 151377}]);data_table.addRow([{v: new Date(2013, 6, 30, 7, 0, 0)}, {v: 185940}]);data_table.addRow([{v: new Date(2013, 6, 30, 8, 0, 0)}, {v: 199565}]);data_table.addRow([{v: new Date(2013, 6, 30, 9, 0, 0)}, {v: 231830}]);data_table.addRow([{v: new Date(2013, 6, 30, 10, 0, 0)}, {v: 240635}]);data_table.addRow([{v: new Date(2013, 6, 30, 11, 0, 0)}, {v: 252827}]);data_table.addRow([{v: new Date(2013, 6, 30, 12, 0, 0)}, {v: 247994}]);data_table.addRow([{v: new Date(2013, 6, 30, 13, 0, 0)}, {v: 244994}]);data_table.addRow([{v: new Date(2013, 6, 30, 14, 0, 0)}, {v: 225663}]);data_table.addRow([{v: new Date(2013, 6, 30, 15, 0, 0)}, {v: 214306}]);data_table.addRow([{v: new Date(2013, 6, 30, 16, 0, 0)}, {v: 213179}]);
    var chart = new google.visualization.ColumnChart(document.getElementById('users_chart'));
    chart.draw(data_table, {width: 1100, height: 280, chartArea: {width: 950, height: 220}, bar_groupWidth: "80%", colors: ["#D48F00"], legend: "none"});
  }});

生成的图表如下所示: Image with order clause

我该怎么做才能解决这个问题? (我需要那里的订单条款,以便图表时间刻度是线性的)

1 个答案:

答案 0 :(得分:0)

您最终会在一个时间点获得两行数据:

data_table.addRow([{v: new Date(2013, 6, 30, 0, 0, 0)}, {v: 9353}]);
data_table.addRow([{v: new Date(2013, 6, 30, 0, 0, 0)}, {v: 41760}]);

导致条形画得如此狭窄。你可以看到两条线的结果(http://jsfiddle.net/asgallant/zHwnb/)与一条注释掉的线(http://jsfiddle.net/asgallant/zHwnb/1/)。

修复重复行问题,您将解决条形宽度问题。

顺便提一下,条形图组宽度选项指定不正确,应该是bar:{groupWidth:"80%"},而不是bar_groupWidth: "80%",但是一旦修复了其余部分,就不需要使用它。