Is there a way to get the google chart image on a file/db, instead of inject the iframe into the view ? Something like https://github.com/mattetti/googlecharts currently is doing :

chart = Gchart.new( :type => 'line',
                    :title => "example title",
                    :data => [[17, 17, 11, 8, 2],[10, 20, 15, 5, 7],[2, 3, 7, 9, 12]], 
                    :line_colors => 'e0440e,e62ae5,287eec',
                    :legend => ['courbe 1','courbe 2','courbe 3'],
                    :axis_with_labels => ['x', 'y'], 
                    :axis_range => [[0,100,20], [0,20,5]],
                    :filename => "tmp/chart.png")

# Record file in filesystem
chart.file

... I'd like to avoid bundling two different libraries for same field tasks, what do you say ?

Thanks in advance
Luca G. Soave

Congrats for this gem. It's easy to use and really well documented.

I have a question: Would it be difficult to add the Toolbar (https://google-developers.appspot.com/chart/interactive/docs/gallery/toolbar)? As it's set in the draw method I can't add it once the chart has been rendered.

Any thoughts on how we could do that?

How can we configure data filters?

I hope you can help me. I am trying out google_visualr for the first time with one of the examples you gave on Github. I do exactly the sample code but run into the undefined method error for render_chart. the bundle is correct. many thanks in advance!
(ruby 1.9.3, rails 3.2.12, gem 2.0.0, google_visualr 2.1.7)

Hi, Winston,

I am Ruby on Rails newbie. I recently started using the Google Visualr. It's pretty awesome and saved me a lot of work! The problem I am running into is how do I refresh the chart via an ajax get request? I tried re-drawing the chart inside a .js.erb file but that didn't work. My next attempt was to just convert the GoogleVisualr::DataTable into a JSON object and send that over to the google visualization api. Here I get an error back because the converted JSON object isn't in the same format as what google expects. Can you share an example of how I would refresh (ie. re-draw) a chart via a ajax request?

Thanks,

Nizar

RubyGems.org doesn't report a license for your gem. This is because it is not specified in the gemspec of your last release.

via e.g.

spec.license = 'MIT'
# or
spec.licenses = ['MIT', 'GPL-2']

Including a license in your gemspec is an easy way for rubygems.org and other tools to check how your gem is licensed. As you can imagine, scanning your repository for a LICENSE file or parsing the README, and then attempting to identify the license or licenses is much more difficult and more error prone. So, even for projects that already specify a license, including a license in your gemspec is a good practice. See, for example, how rubygems.org uses the gemspec to display the rails gem license.

There is even a License Finder gem to help companies/individuals ensure all gems they use meet their licensing needs. This tool depends on license information being available in the gemspec. This is an important enough issue that even Bundler now generates gems with a default 'MIT' license.

I hope you'll consider specifying a license in your gemspec. If not, please just close the issue with a nice message. In either case, I'll follow up. Thanks for your time!

Appendix:

If you need help choosing a license (sorry, I haven't checked your readme or looked for a license file), GitHub has created a license picker tool. Code without a license specified defaults to 'All rights reserved'-- denying others all rights to use of the code.
Here's a list of the license names I've found and their frequencies

p.s. In case you're wondering how I found you and why I made this issue, it's because I'm collecting stats on gems (I was originally looking for download data) and decided to collect license metadata,too, and make issues for gemspecs not specifying a license as a public service :). See the previous link or my blog post about this project for more information.

As per Pull Request 39, the gem now adds the ability to have listeners. The issue is that 'ready' listeners do not fire after the first draw() event (subsequent redraws work).

The solution is to add listeners before the draw call, unless I am missing something?

Hi there,

I'm using google_visualr gem and I'm stuck trying to update a very single Google Chart in real time/ each a few seconds/ or with some button (https://developers.google.com/chart/interactive/docs/animation) (I'm a novate in RoR). This would be great koz It takes some time to reload from google the whole curve, or in case of having a gauge it would be nice to see its needle evolving with time (and not refreshing the whole gauge!)
There are some examples around on the web and they use the so called ajax /js/jquerry. So to face the problem, I decided to use the gem to get the data from some controller (it is easer!), and then use Google's generated code to plot data & update plots using all this ajax stuff.

Is that possible??

I give it a try but without any success.
What I did was first to create the data on the controller using google_visualr gem (gem "google_visualr", ">= 2.1"):

In gcharts_controller.rb

def plotgchart
data_table = GoogleVisualr::DataTable.new
data_table.new_column('datetime' , 'Time')
data_table.new_column('number' ,'some data')
data_table.add_rows([[DateTime.new(2012, 8, 1, 22, 35, 0), 140]])
data_table.add_rows([[DateTime.now, 145]])
end
....

and then to pass the data to the javascript block in the html.erb, taking Google example code

In plotgchart.html.erb

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var options = {
      title: 'Company Performance'
    };
   var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw( data_table, options);
  }

Finally I call it in the "div id" as "chart_div"

It is worth to mention that I started from separate working examples to plot the single graph. That is, using the gem alone defining the variable chart with the options and then in the view file using <%= render_chart @Chart, 'chart' %> and it works!. The same as if I copy the google code on my view html file and I feed the plot with data (my data_table) inside the javascript block
var data_table = google.visualization.arrayToDataTable([ my 2 points data example]); and not from the controller!

The problem seem to be that the script block (from its inside) doesnt see the variable data_table that I'm defining from the controller, I would discart problems from data_table format koz from the gem example alone it works fine!

Any suggestion?

Thanks in advance,

Rene

Hello,

I'm trying to use GoogleVisualr::Image::PieChart to render an image which will then be rended in PDF by wicked_pdf.

I'm succesfully using GoogleVisualr::Interactive::PieChart in my code for HTML output, however, when I use the Image::PieChart I get this error:

uninitialized constant GoogleVisualr::Image::PieChart

Here is the output I get from the rails console:

Loading development environment (Rails 3.2.2)
irb(main):001:0> GoogleVisualr::DataTable.new
=> #<GoogleVisualr::DataTable:0x00000003af5070 @cols=[], @rows=[]>
irb(main):002:0> GoogleVisualr::Image::PieChart
NameError: uninitialized constant GoogleVisualr::Image::PieChart
    from (irb):2
    from /var/lib/gems/1.9.1/gems/railties-3.2.2/lib/rails/commands/console.rb:47:in `start'
    from /var/lib/gems/1.9.1/gems/railties-3.2.2/lib/rails/commands/console.rb:8:in `start'
    from /var/lib/gems/1.9.1/gems/railties-3.2.2/lib/rails/commands.rb:41:in `<top (required)>'
    from script/rails:6:in `require'
    from script/rails:6:in `<main>'
irb(main):003:0> GoogleVisualr::Interactive::PieChart
=> GoogleVisualr::Interactive::PieChart

I'm using Rails 3.2.2 and google_visualr 2.1.1

Any help to be able to render an image instead of an interactive chart is welcome.

Sometimes I need to call the graph render method as a callback after some other JS method finish, so I need to embed the JS without the script tag for that (script type='text/javascript'). Wouldn't it be usefull an extra option to the render method to bypass generating the script tag? For example options[:script_tag] returning true in case the script tag need to be renderer.Thanks for your great work!

OK, I know that DataTable Roles are Experimental; but I need to define one column with Tooltip role.

http://code.google.com/apis/chart/interactive/docs/roles.html

This might not be an issue directly with Google Visualr, but whenever I use Google Visualr, the Javascript files are returned from a http source. When I use it with a https site, it will throw up an ugly error that can be pretty scary. Otherwise the chart simply doesn't show up at all unless you disable https.

Any ideas how to make it such that Google returns the scripts through a https URL source?

How can I customize CSS with google_visualr ? Cannot find indication about that.

Thanks in advance
Luca

Any reason GeoMaps haven't been included yet? Or is this a future feature? ;-)

Hi.

I read up previous issues with rendering charts with AJAX requests. I tried a small hard-coded change and I could get the re-drawing of charts with AJAX calls. I followed a suggestion on SO as put down here http://stackoverflow.com/a/10659721.

So, as I said I tried a hard-coded script to draw graphs, where I replaced
google.setOnLoadCallback(drawChart);
with
google.setOnLoadCallback(drawChart());

and my charts started rendering on AJAX calls, but they don't on HTML request (google.visualization is undefined).

I cannot pinpoint the issue and the reasons behind what is happening because I am not familiar with these setOnLoadCallback and other methods. Would like some comments from you on this and what can I do to include this in render_chart.

This is what I tried to reload my charts:

google.load('visualization','1', {packages: ['corechart']});
google.setOnLoadCallback(draw_chart());
function draw_chart() {
var data_table = new google.visualization.DataTable();data_table.addColumn({"type":"string","label":"Year"});data_table.addColumn({"type":"number","label":"Sales"});data_table.addColumn({"type":"number","label":"Expenses"});data_table.addRow([{v: "2004"}, {v: 1000}, {v: 400}]);data_table.addRow([{v: "2005"}, {v: 1170}, {v: 460}]);data_table.addRow([{v: "2006"}, {v: 660}, {v: 1120}]);data_table.addRow([{v: "2007"}, {v: 1030}, {v: 540}]);
var chart = new google.visualization.BarChart(document.getElementById('chart'));
chart.draw(data_table, {width: 400, height: 240, title: "App Performance", vAxis: {title: "Year", titleTextStyle: {color: "red"}}});
};

Hello,

Either this is not yet a feature or my generic system is not working correctly, but the "Issues & Milestones" search won't give any results on 'pagination'.

I think it would be nice to implement pagination for the table-view

It should be really nice just to add the options and get it done:

options = {
  :page => "enabled",
  :pageSize => "10",
  :pagingSymbols => "{:prev => 'prev', :next => 'next'}",     # With or without quotes, I'm not sure
  :pagingButtonsConfiguration => "auto"
}

I really don't know how much work this will be, but I think it is missing.

Fonteijne

I use another ruby gem to generate my statistics: I get an ordered hash like this:

=> #<OrderedHash {"2010-10-23"=>2, "2010-09-22"=>3, "2010-09-11"=>1, "2010-08-27"=>1, "2010-10-15"=>
1, "2010-09-15"=>1, "2010-08-08"=>2, "2010-10-17"=>14, "2010-10-06"=>2, "2010-09-28"=>1, "2010-10-19
"=>1, "2010-09-20"=>1}>

How can I pass this in without needing to do a row by row loop?

Hi,

Is there a way to make this work with a sinatra app? Cant get it to work.

when I run the following script"ruby script/plugin install git://github.com/winston/google_visualr.git"
I get plug in not found:

Any idea why I cannot locate the plug in ?

Tried to test, but faced an error:

undefined method `to_js' for nil:NilClass

info: ruby-1.9.3-p125 with rails 3.2.7

Hi,

I'm trying to use google_visualr for displaying interactive PieCharts and even though you seem to be using the same data as Google for the example, when invoked via Google, the %ages on the pie charts are displayed on the pie slice whereas when invoked via google_visualr, they're only available when clicked. I tried playing around with the options params but nothing there seems to affect it.

Thanks
Scott

Hi,
I noticed in the base_chart.rb that you use '#{options[:package].downcase}'.

base_chart.rb
script << "\n google.load('visualization','1', {packages: ['#{options[:package].downcase}'], callback: function() {"

I'm using a ColumnChart and Rails 2 plugin.

In the ColumnChart example I found (http://code.google.com/apis/ajax/playground/?type=visualization#column_chart) it loads package 'corechart' and then do a "new google.visualization.ColumnChart".

I tried to change the base_chart.rb to use 'corechart' but it didn't work.

I also noticed quite a bit of changes in these methods for the Rails 3 version.

I'm wondering: is this a limitation of plugin version for Rails 2? Or the simple change to the line below is expected to work?
script << "\n google.load('visualization','1', {packages: ['corechart'], callback: function() {"

Thanks
/Helio

The Image Charts portion of Google Chart Tools has been officially deprecated as of April 20, 2012.
It will continue to work as per our deprecation policy.

https://developers.google.com/chart/interactive/docs/gallery/genericimagechart
https://developers.google.com/chart/interactive/docs/gallery/imagepiechart
https://developers.google.com/chart/interactive/docs/gallery/imagelinechart
https://developers.google.com/chart/interactive/docs/gallery/imagebarchart
https://developers.google.com/chart/interactive/docs/gallery/imagesparkline

@winston -

I've been working with this gem for a while, and just recently had to make changes to do two things:

1. Add support for adding listeners to the charts; this isn't currently possible without redefining BaseChart.to_js in its entirety. If BaseChart had an array of listeners, then they could be inserted into the script in the BaseChart.to_js in a general way.
2. I wanted to override individual chart types (e.g. GoogleVisualr::Interactive::BarChart) to carry some extra data around before rendering. In my case I made a "ClickableBarChart". This also required redefining BaseChart.to_js, because it uses class_name to specify the Google chart type. I propose we have something like "chart_name" as a property, and in BaseChart that simply returns class_name...but in subclasses this could be overridden to be whatever was necessary.

They're not big deals - but it's just ugly to have to redefine to_js and basically copy all the code from the original version.

Would you consider pull requests for the above two items?

In your example chart : http://googlevisualr.heroku.com/example/annotated_time_line, the A/B annotation icons are not displayed on the chart as they are at https://code.google.com/apis/chart/interactive/docs/gallery/annotatedtimeline.html

The google javascript library enables animations and other options. Does this gem also enable these features?

Similar to #54. I'm making an organisation chart, based on the code at http://googlevisualr.herokuapp.com/examples/interactive/org_chart, but the users are being set dynamically so I'm using string interpolation. This means I have to use apostrophes to set attributes on the HTML tags, though.

org_chart = GoogleVisualr::DataTable.new
org_chart.new_column('string', 'Name')
org_chart.new_column('string', 'Boss')
rows = []
rows << [{v: "Bob", f: 'Bob<div style="color:red; font-style:italic">CEO</div>'}, '']
[{name: "Fred", role: "VP"}, {name: "John", role: "VP"}, {name: "Dave", role: "VP"}].each do |data|
  rows << [{v: data[:name], f: "#{data[:name]}<div style='color:red; font-style:italic'>#{data[:role]}</div>"}, 'Bob']
  # the row above is the culprit
end
org_chart.add_rows(rows)
opts   = { :allowHtml => true }
@chart = GoogleVisualr::Interactive::OrgChart.new(org_chart, opts)

In Chrome, this throws a Uncaught SyntaxError: Unexpected identifier. The javascript looks like this:

If I add .gsub("'", '"') to the row in question, or if I escape the quotation marks myself, everything renders fine, but it's not very elegant.

I'm using v2.1.6 of the gem.

I load the charts on the page via ajax, the chart script loads correctly in the html source but doesn't appear on the page.
This is how I load the chart;
$('#geochart').html("<%= render_chart @countries_chart, 'geochart' %>");

what am I doing wrong?

Hello,

When rendering the same chart partial multiple times on the same page, the second chart is rendered on top of the first one.

index.html.erb

<div id="container-with-size1">
  <%= render :partial => 'chart', :locals => {:chart => @chart1} %>
</div>
<div id="container-with-size2">
  <%= render :partial => 'chart', :locals => {:chart => @chart2} %>
</div>

_chart.html.erb

<script src='http://www.google.com/jsapi'></script>
<div id='chart'></div>
<%= render_chart(chart, 'chart') %>

chart2 is rendered inside the first container, on top of chart1.

Thank you.

Hello Winston,
It seems like the Google Visualization API's stylesheets are not being correctly downloaded and applied. The allowHtml option works fine though. So I think it may not even be Google Visualr issue but I thought I will alert you. The way I noticed it is that the styling on my tables (I used Google's default styling which has a bluish header and alternating row colors). I am not getting that anymore, instead, it is just a plain color.

This is not a problem by itself, but it causes the data rows to run into the column header rows when scrolling the table. I am not sure how to fix it. Is there a place where I can download the style sheet from?

Thanks.

Bharat

Is there an example of setting the style for an individual table cell? My attempt is below, but the :p style is ignored:

data_table.set_cell(0, 0, {:v => 'Mike', :p => {:style => 'font-style:bold; font-size:22px;'} } )

The following piece of code will break when trying to run in the browser:

data_table = GoogleVisualr::DataTable.new
data_table.new_column('number', "It's my party" )
chart = GoogleVisualr::Interactive::SteppedAreaChart.new(data_table, {})
chart.to_js('div_id')

If I puts the to_js call I get:

<script type='text/javascript'>
  google.load('visualization','1', {packages: ['corechart'], callback: function() {
    var data_table = new google.visualization.DataTable();data_table.addColumn('number', 'It's my party');
    var chart = new google.visualization.SteppedAreaChart(document.getElementById('div_id'));
    chart.draw(data_table, {});
  }});
</script>

Where the problem is:

data_table.addColumn('number', 'It's my party');

The quote in It's is what's breaking the javascript.

Hi,

I want to apply different color on last column of the chart.

I have 10 columns in chart, 9 columns should have one color and 10th column should have other color.

For example,

var data = GoogleVisualr::DataTable.new
data.new_column('string', 'Year' )
data.new_column('number', 'Sale' )

data_table.add_rows([
['2004', 1000],
['2005', 1170],
['2006', 660],
['2007', 1030]
]);

For 2004, 2005, 2006 columns, I want to show sales in "red" color and for 2007, sale should be in "black" color.

Does google_visualr have any option for this ?

Please tell me how to change the color of last column in the chart.

Thank you,

Prerana

How can I have several different type of charts ( Bar Chart + Geo Chart + Scatter Chart ) in the same page ?
Can you give an example ( controller + view ) ?

Thanks in advance
Luca

Hello Winston,
Great library, I like it a lot. One thing that I am trying to do is a line chart with two vertical axes. The left side axis is volume and varies from hundreds of thousands to may be hundreds or tens, further, it has to be logarithmic scale. The second vertical axis should be on the right hand side and will display units using again logarithmic scale which can go up to one thousand. I am trying to use the google Visualization API as a guide, but the vertical axis labels are not displaying and the scale turns plain instead of logarithmic. Note that if I have just one vertical axis, i.e., the left axis, then the logarithmic scale works fine.

Can you provide some guidance here?

Thanks again.

Bharat

Hi there!

Great Job with visualr! I coma across an issue with rails 3.2.0 (depreciation warning) :

DEPRECATION WARNING: The InstanceMethods module inside ActiveSupport::Concern will be no longer included automatically. Please define instance methods directly in ActionController::Base instead. (called from <top (required)> at /Users/Ioxtrem/apps/ugs/app/controllers/application_controller.rb:1)

Anyway, thanks a lot!

I love using winston/google_visualr to create nice graphs to visualize statistics in my rails application.
It works fine on my locale system, but if I push it to heroku I get something like a token_error. The result is, that it shows only the Heroku page

We're sorry, but something went wrong.

My head section of application.html.erb looks like this

<head>
    <title><%= full_title(yield(:title)) %></title>
    <script src='http://www.google.com/jsapi'></script>
    <%= stylesheet_link_tag    "application", :media => "all" %>
    <%= javascript_include_tag "application" %>
    <%= csrf_meta_tags %>
</head>  

This is the heroku log:

ActionView::Template::Error (Unexpected token name, expected punc (line: 13588, col: 3, pos: 384041)
    at expect (/tmp/execjs20121119-2-qx6eku.js:977:40)
Error
    at js_error (/tmp/execjs20121119-2-qx6eku.js:505:15)
    at new JS_Parse_Error (/tmp/execjs20121119-2-qx6eku.js:497:22)
    at token_error (/tmp/execjs20121119-2-qx6eku.js:961:17)
    at expect_token (/tmp/execjs20121119-2-qx6eku.js:974:17)
    at object_ (/tmp/execjs20121119-2-qx6eku.js:1365:56)
    at /tmp/execjs20121119-2-qx6eku.js:1326:51
Completed 500 Internal Server Error in 4980ms
    at croak (/tmp/execjs20121119-2-qx6eku.js:954:17)
    at maybe_unary (/tmp/execjs20121119-2-qx6eku.js:1425:27)
    at expr_ops (/tmp/execjs20121119-2-qx6eku.js:1452:32)
   (in /app/app/assets/javascripts/application.js)):
    6:    <%= stylesheet_link_tag    "application", :media => "all" %>
    7:    <%= javascript_include_tag "application" %>
    8:    <%= csrf_meta_tags %>
    9:    <%= render 'layouts/shim' %>
    4:    <title><%= full_title(yield(:title)) %></title>
    5:    <script src='http://www.google.com/jsapi'></script>
  app/views/layouts/application.html.erb:7:in `_app_views_layouts_application_html_erb__1437494530852335371_34567960'

It looks like that the external script reference may be the reason. Do you have any idea how to implement this?
The demo implementation of the author of the googlevisualr rails extension on heroku works fine. Is there any configuration settings in heroku I need to consider?
Thanks for your help.

http://code.google.com/apis/chart/interactive/docs/reference.html#DataView

A read-only view of an underlying DataTable.

I get the following error using version 0.7 of the plugin.

undefined method `typecast' for GoogleVisualr:Module

I have some data in a Ruby program that I'd to quickly view formatted in a nice grid. You can do something like this with the Google Visualization plugin for R. Basically, I call a method on an R dataset and it pops open a browser tab with the table displayed. I'd love to be able to reproduce some of that functionality in a Ruby app.

Is there any way to use this gem to run a ruby command and have it pop open a browser tab with the data table/chart without having rails?

I see that the JS generated is like this:

var chart = new google.visualization.#{class_name}(document.getElementById('#{element_id}'));"

This means that if you generate several charts in the same page, it would be impossible to fetch those objects individually (imagine if you want to add an event to each of the charts?).

It might be a good idea to make the name unique, maybe let the user name it when creating the chart?

I have created 4 ColumnChart on the same page. Unfortunately, the chart options of the last chart will be applied to all 4 charts. For example:

@chart_1 = GoogleVisualr::Interactive::ColumnChart.new(data1, options1)
@chart_2 = GoogleVisualr::Interactive::ColumnChart.new(data2, options2)
@chart_3 = GoogleVisualr::Interactive::ColumnChart.new(data2, options3)
@chart_4 = GoogleVisualr::Interactive::ColumnChart.new(data2, options4)

In the view (HAML) I have:

= render_chart(@chart_1, 'chart_1');
= render_chart(@chart_2, 'chart_2');
= render_chart(@chart_3, 'chart_3');
= render_chart(@chart_4, 'chart_4');

When the page is generated, I view the HTML I see all 4 charts having the same options4. Strangely, the data tables for each chart are correct.

Please advice me on this problem.

Thank you

It's not obvious how to pass stuff into the "state" option bag. I'd like to say something like,

@chart.set_options(:width => 600, 
                              :height => 300, 
                              :state => {:showTrails => false}
                             )

but that doesn't render correct json. Neither does

@chart.set_options(:width => 600, 
                              :height => 300, 
                              :state => '"showTrails" : "false"'
                             ) 

Am I missing something, or is this just not supported?

How can I add a class to the chart instead of using the opts to define the css?

Nice library. I am trying to pass custom colors to a column chart and having difficulty generating a javascript array for strings.

I've tried:
option = { :width => 800, :height => 400, :title => 'Revenue', :backgroundColor => 'white', :legend => 'none',
:colors => ["red", "blue"]}

which generates:

colors: redblue

which doesn't work.

If I enclose the array in quotes, and escape the internal strings, it doesn't work b/c it's a string instead of an array.

Am I missing something obvious?

Thanks... and here's the relevant documentation:

http://code.google.com/apis/chart/interactive/docs/gallery/columnchart.html#Configuration_Options

colors Array of strings default colors The colors to use for the chart elements. An array of strings, where each element is an HTML color string, for example: colors:['red','#004411'].

what options are supported and what's the format? for example, chart size in the Google API looks to be :chs=> '600x120'; linestyle :chls => 5 (increase the line width to 5px). But, nothing changes...

Hello Winston,
I am trying to format numbers in Google Visualization API using your google_visualr. Ruby on Rails formatted numbers, i.e., number_with_precision seem to upset the Javascript code. I went to the Google group and posted the following query:

http://groups.google.com/group/google-visualization-api/browse_thread/thread/2ef3726e5174433

The gentleman is pointing me to use NumberFormat. I would like to but do not know how to use it using google_visualr.

Can you please provide some guidance?

Thanks.

Bharat

I tried to reinstall gem google_visualr 2.1.5 but without ano effect
I have installerà ruby 1.9.2
Someone can help me?
Thanks

Specifying an array of colors on the options doesn't display the graph.

The following output will work:

 <script type="text/javascript">
 google.load('visualization','1', {packages: ['columnchart'], callback: function() {
  var chart_data = new  google.visualization.DataTable();chart_data.addColumn('string', 'Gender',   '');chart_data.addColumn('number', 'Men', '');chart_data.addColumn('number', 'Women', '');chart_data.addRows(2);chart_data.setCell(0, 0, '');chart_data.setCell(0, 1, 0);chart_data.setCell(0, 2, 4);
    var chart = new   google.visualization.ColumnChart(document.getElementById('gender_chart'));
chart.draw(chart_data, {backgroundColor:'#efefef',width:600, colors:["red", "green"],    legendFontSize:12,title:'',height:260,axisFontSize:12,is3D:true});
 }});
</script>

but the following output will not:

 <script type="text/javascript">
 google.load('visualization','1', {packages: ['columnchart'], callback: function() {
  var chart_data = new  google.visualization.DataTable();chart_data.addColumn('string', 'Gender',   '');chart_data.addColumn('number', 'Men', '');chart_data.addColumn('number', 'Women', '');chart_data.addRows(2);chart_data.setCell(0, 0, '');chart_data.setCell(0, 1, 0);chart_data.setCell(0, 2, 4);
    var chart = new   google.visualization.ColumnChart(document.getElementById('gender_chart'));
chart.draw(chart_data, {backgroundColor:'#efefef',width:600, colors:'["red", "green"]',    legendFontSize:12,title:'',height:260,axisFontSize:12,is3D:true});
 }});
</script>

The value is converted as a string so google doesn't seem to like this.

Hello Winston,
I am trying to customize the data table cells. Here is my code that uses custom formatting which is a copy of your code in the gem:

  data_table.set_cell(i, 0, month[i])
  data_table.set_cell(i, 1, volume[i].round(3))
  data_table.set_cell(i, 2, {:v => well_count[i], :p => { :style => 'border: 1px solid green;'}})

I was basing it on the following comments in your code:

#   Each cell in the table is described by an object with the following properties:
#
#   * v               [Optional] The cell value. The data type should match the column data type.
#   * f               [Optional] A string version of the v value, formatted strictly for display only. If omitted, a string version of v will be used.
#   * p               [Optional] An object that is a map of custom values applied to the cell. Example: :p => { :style => 'border: 1px solid green;' }.

This does not work. Actually, I was trying to limit the width of the cell by applying :p => {:style => "width:5px;"} which does not work either. Can you please provide some guidance? I would love to debug it but do not know how to proceed.

Thanks.

Bharat