Google Charts Axis Label Issues Line Chart

Question

I am creating google charts to show Google Analytics data from the past 7 days. I have an issue with the X-Axis labels stacking on top of each other when I have certain data (or at least that's all I can tell is different.)

I am generating the API call using this gem: https://github.com/mattetti/googlecharts and I've looked at what each part of the URL is doing and can't find the issue, but I'm sure I'm missing something.

Here is an example of two sites data over the same time period, the first one shows the issue and the second one is a working example:

broken chart

working chart

Here is the URL, these are text encoded for readability, but it has the same issues when switched to simple or extended encoding:

BROKEN VERSION:

https://chart.apis.google.com/chart?chxl=0:|11-22|11-23|11-24|11-25|11-26|11-27&chxt=x&chco=58838C,BF996B,BF5841,A61C1C&chf=bg,s,ffffff&chd=t:979,807,681,653,580,509|822,724,602,562,519,455|540,409,381,375,336,301|307,156,173,176,155,133&chds=0,979&chdl=Visits|Visitors|New+Visits|Organic+Searches&chtt=Google+Analytics+-+Last+7+Days&cht=lc&chs=600x200&chxr=0,979,979|1,822,822|2,540,540|3,307,307

WORKING VERSION:

https://chart.apis.google.com/chart?chxl=0:|11-22|11-23|11-24|11-25|11-26|11-27&chxt=x&chco=58838C,BF996B,BF5841,A61C1C&chf=bg,s,ffffff&chd=t:1385,1395,981,947,863,731|1083,1222,832,715,690,546|580,566,427,413,387,329|247,151,151,171,162,135&chds=0,1395&chdl=Visits|Visitors|New+Visits|Organic+Searches&chtt=Google+Analytics+-+Last+7+Days&cht=lc&chs=600x200&chxr=0,1385,1395|1,1083,1222|2,580,580|3,247,247

MVarrieur MVarrieur · Accepted Answer · 2012-11-29T17:07:07

The chxr values were incorrect. The gem was generating them for multiple axes when it should have only been generating them for one. I manually overrode the min, max and step in the gem and it worked.

Here is my code using the gem, first getting the max value from all my data points:

[@visits,@visitors,@new_visits,@organic_searches].each do |array|
  array.values.each do |value|
    @max_value = value if (value > @max_value)
  end
end

# Chart it
chart = Gchart.line(
  :title => prop.to_s.upcase + ' Google Analytics - Past 7 Days',
  :size => '600x200',
  :bg => 'ffffff',
  :axis_with_labels => ['x'],
  :axis_labels => [@visits.keys],
  :legend => ['Visits','Visitors','New Visits','Organic Searches'],
  :line_colors => ['58838C','BF996B','BF5841','A61C1C'],
  :encoding => 'text',
  :data => [@visits.values,@visitors.values, @new_visits.values, @organic_searches.values],
  :max_value => @max_value,
  :axis_range => [nil, [0, @max_value, (@max_value / 10).to_i]],
  :format => 'image_tag')

Google Charts Axis Label Issues Line Chart

1 Answers