How to use gRaphael on rails

Question

as a newbie in Rails, i'm trying to find a good open charting library to work with rails.

With some research I've found gRaphael, and it seems it could just work for me, if i just could use it in my rails app.. I found a gem that seems to aggregate graphael (graphael-rails), but actually do not understand how to use it, since i cannot reference to its files, and have to copy/paste them to my local assets directory.

I've followed the guidelines and have put raphael-min.js, g.raphael.js and g.pie.js inside my assets/javascripts folder, as well as a demo.css file in the stylesheets folder, and some background images.

I added to application.html.erb

<%= javascript_include_tag "raphael-min.js","g.raphael.js","g.pie.js", "application" %>

and to my view :

...
<div id="holder"></div>
...
<%= javascript_tag "

            var r = Raphael(""holder"");
        r.piechart(320, 240, 150, [55, 20, 13, 32, 5, 1, 2, 10]);
            r.text(320, 70, 'Static Pie Chart').attr({ font: '20px ""Fontin Sans"", Fontin-Sans, sans-serif' });

       " %>
</body>

The problem is that for some reason, the piechart function is not being built into Raphael DOM object....

What might i be doing wrong? I've spent an entire day looking for answers on this and would appreciate any help here.

Here are the scripts being load to my html file

<script type="text/javascript" src="/assets/raphael-min.js?body=1">
<script type="text/javascript" src="/assets/g.raphael.js?body=1">
<script type="text/javascript" src="/assets/g.pie.js?body=1">
<script type="text/javascript" src="/assets/jquery.js?body=1">
<script type="text/javascript" src="/assets/jquery_ujs.js?body=1">
<script type="text/javascript" src="/assets/bootstrap-transition.js?body=1">
<script type="text/javascript" src="/assets/bootstrap-alert.js?body=1">
<script type="text/javascript" src="/assets/bootstrap-button.js?body=1">
<script type="text/javascript" src="/assets/bootstrap-carousel.js?body=1">
<script type="text/javascript" src="/assets/bootstrap-collapse.js?body=1">
<script type="text/javascript" src="/assets/bootstrap-dropdown.js?body=1">
<script type="text/javascript" src="/assets/bootstrap-modal.js?body=1">
<script type="text/javascript" src="/assets/bootstrap-scrollspy.js?body=1">
<script type="text/javascript" src="/assets/bootstrap-tab.js?body=1">
<script type="text/javascript" src="/assets/bootstrap-tooltip.js?body=1">
<script type="text/javascript" src="/assets/bootstrap-popover.js?body=1">
<script type="text/javascript" src="/assets/bootstrap-typeahead.js?body=1">
<script type="text/javascript" src="/assets/bootstrap.js?body=1">
<script type="text/javascript" src="/assets/g.pie.js?body=1">
<script type="text/javascript" src="/assets/g.raphael.js?body=1">
<script type="text/javascript" src="/assets/jquery-ui.min.js?body=1">
<script type="text/javascript" src="/assets/raphael-min.js?body=1">
<script type="text/javascript" src="/assets/retailers.js?body=1">
<script type="text/javascript" src="/assets/application.js?body=1">

and my application.js file contents:

//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .

Notice that raphael's js files are being loaded twice, and the only reason i include them in my application.html.erb file is that if i don't, than raphael-min.js gets loaded after g.raphael.js and g.pie.js which depend on it, and i get javascript errors...

Any suggestions on this?

Thanks

Anthony Alberto · Answer 1 · 2012-07-30T13:31:43.633

1

I don't know about graphael, but I'd go with Google API. I found a ruby wrapper for it here that seems maintained :

https://github.com/mattetti/googlecharts

Usage :

I'd suggest creating a variable somewhere :

@graph_url = Gchart.bar( :data => [[1,2,4,67,100,41,234],[45,23,67,12,67,300, 250]], :title => 'SD Ruby Fu level', :legend => ['matt','patrick'], :bg => {:color => '76A4FB', :type => 'gradient'}, :bar_colors => 'ff0000,00ff00')

Then in the view :

<%= image_tag @graph_url, :width=>500, :height=>300 %>

Seems cleaner this way :)

edited Jul 30 '12 at 13:31

answered Jul 30 '12 at 12:41

Anthony Alberto

10,325
3
34
38

Hmmm, do you have any links/examples on how to use it with Rails? I can only find pure ruby examples – MrWater Jul 30 '12 at 13:00
I just figured it out. You use the output of the google function as an image source... example : `` – MrWater Jul 30 '12 at 13:20

How to use gRaphael on rails

1 Answers1