Rails - Google_Visular柱形圖欄寬度

Question

我已添加一些使用google_visular寶石的圖表。我正試圖弄清楚當我在我的活動記錄語句中調用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"}); 
    }}); 

輸出：

但是，如果我改變我在其中方法包括命令如：

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

生成的圖表看起來像：

我能要解決這個問題嗎？ （我需要的順序條款上有這樣的圖表時間尺度線性）

Answer 1

你與兩行數據在時間結束了一個單點：

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組寬度選項指定不正確，應該是bar:{groupWidth:"80%"}，而不是bar_groupWidth: "80%"，但是一旦修復了其餘部分，就不需要使用該選項。