Browse | Submit A New Snippet | Create A Package

 

Use raphaeljs to create graph with ruby data

Type:
Sample Code (HOWTO)
Category:
Math Functions
License:
GNU General Public License
Language:
JavaScript
 
Description:
Use raphaeljs to create graph with ruby data

Versions Of This Snippet::

Daihua ye
Snippet ID Download Version Date Posted Author Delete
6531.02012-06-22 00:01Daihua ye

Download a raw-text version of this code by clicking on "Download Version"

 


Latest Snippet Version: :1.0

<% content_for :javascript do %>
  <%= javascript_include_tag "raphael", "g.raphael", "g.line" %>
  <script type="text/javascript">
    $(document).ready(function() {
      $('#downloads_over_time img').hide();
      $('#downloads_over_time').height(430)
      var dates = <%= downloads_over_time_chart_dates.to_json.html_safe %>;
      var r = Raphael("downloads_over_time");
            
      var days = <%= (0..90).to_json.html_safe %>
      
      var versions = <%= downloads_over_time(@versions).map{|v| v[:counts] }.to_json.html_safe
       %>
       var labels = <%= downloads_over_time_labels.to_json.html_safe %>

       var fin  = function () {
         this.flag = r.g.popup(this.x, this.y, dates[this.axis] + ": " + this.value || "0").insertBefore(this);
       };
       var fout = function () {
         this.flag.animate({opacity: 0}, 300, function () {this.remove();});
       };

      chart = r.g.linechart(30, 20, 500, 400, days, versions, {'axis':'0 0 0 1'}).hover(fin, fout);
      yaxis = r.g.axis(40,410,480,0,90,3,0, labels);
      
      var raph = r
      var labels = <%= @versions.map(&:number).to_json.html_safe %>;
      chart.labels = raph.set();
      var x = 540; var h = (400 - (labels.length*10))/2;
      for( var i = 0; i < labels.length; ++i ) {
        var clr = chart.lines[i].attr("stroke");
        chart.labels.push(raph.set());
        chart.labels[i].push(raph.g["disc"](x + 5, h, 5)
                             .attr({fill: clr, stroke: "none"}));
        chart.labels[i].push(txt = raph.text(x + 20, h, labels[i])
                             .attr(raph.g.txtattr)
                             .attr({fill: "#000", "text-anchor": "start"}));
        h += chart.labels[i].getBBox().height * 1.2;
      };
    });
  </script>
<% end %>
		

Submit a new version

You can submit a new version of this snippet if you have modified it and you feel it is appropriate to share with others..