ruby-on-rails-3.2rubygemsraphaelgraphael

Raphael is not defined using g.raphael-rails and raphael-rails gem

I'm trying to do generate a sample bar chart for JSON data generated through Rails.

To start off, I'm just trying to simply see if my Rails app can generate the barchart.html from the example provided in g.raphael github repo .

I'm using raphael-rails and g.raphael-rails gem in my Rails 3.2.11 app.

Currently when I try to hit /companies/company_division_stats in the browser from my sample code, Firebug throws the below error:

ReferenceError: Raphael is not defined in corresponding to the line of code :-
var r = Raphael("holder")

The documentation from the two gems doesn't specify the need of including any js files to my application.js .

Interestingly, when I just try to do a run of the sample plain HTML below in my browser, I also get two errors.

1.

 ReferenceError: Raphael is not defined
 F.prototype = Raphael.g;

Reference g.bar.js(line 419)
  1. TypeError: r.barchart is not a function

Sample HTML:

<!--<!doctype html>-->
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>g·Raphaël Static Bar Charts</title>
  <link rel="stylesheet" href="css/demo.css" type="text/css" media="screen" charset="utf-8">
  <link rel="stylesheet" href="css/demo-print.css" type="text/css" media="print" charset="utf-8">
  <!-- Throws same error when using the raphael and g.raphael gem-->
  <script src="https://raw.github.com/DmitryBaranovskiy/g.raphael/master/g.bar.js" type="text/javascript" charset="utf-8"></script>
  <script src="https://raw.github.com/DmitryBaranovskiy/g.raphael/master/raphael-min.js" type="text/javascript" charset="utf-8"></script>
  <script src="https://raw.github.com/DmitryBaranovskiy/g.raphael/master/g.raphael.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript" charset="utf-8">
      window.onload = function () {
          var r = Raphael("holder"),
                  data1 = [[55, 20, 13, 32, 5, 1, 2, 10], [10, 2, 1, 5, 32, 13, 20, 55], [12, 20, 30]],
                  data2 = [[55, 20, 13, 32, 5, 1, 2, 10], [10, 2, 1, 5, 32, 13, 20, 55], [12, 20, 30]],
                  data3 = [[55, 20, 13, 32, 5, 1, 2, 10], [10, 2, 1, 5, 32, 13, 20, 55], [12, 20, 30]],
                  txtattr = { font: "12px 'Fontin Sans', Fontin-Sans, sans-serif" };

          r.text(160, 10, "Single Series Chart").attr(txtattr);
//          r.text(480, 10, "Multiline Series Chart").attr(txtattr);
//          r.text(160, 250, "Multiple Series Stacked Chart").attr(txtattr);
//          r.text(480, 250, 'Multiline Series Stacked Vertical Chart. Type "round"').attr(txtattr);

          r.barchart(10, 10, 300, 220, [[55, 20, 13, 32, 5, 1, 2, 10]], 0, {type: "soft"});
//          r.barchart(330, 10, 300, 220, data1);
//          r.barchart(10, 250, 300, 220, data2, {stacked: true});
//          r.barchart(330, 250, 300, 220, data3, {stacked: true, type: "round"});
      };
  </script>
</head>
<body class="raphael" id="g.raphael.dmitry.baranovskiy.com">
<div id="holder"></div>
<p>
  Demo of <a href="http://g.raphaeljs.com/">g·Raphaël</a> JavaScript library.
</p>
</body>
</html>

I'm really not sure what I'm doing wrong. What could I be missing?

Solution

  • Got it fixed, thanks to inputs from my senior. Currently I'm simply adding them as JS in app/assets/javascripts and requiring them in my application.js

    I need to define the js in the correct order .

    --> Order in sample html code

      <script src="https://raw.github.com/DmitryBaranovskiy/g.raphael/master/raphael-min.js" type="text/javascript" charset="utf-8"></script>
  <script src="https://raw.github.com/DmitryBaranovskiy/g.raphael/master/g.raphael.js" type="text/javascript" charset="utf-8"></script>
  <script src="https://raw.github.com/DmitryBaranovskiy/g.raphael/master/g.bar.js" type="text/javascript" charset="utf-8"></script>