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

StackOverflow https://stackoverflow.com/questions/18508741

Question

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)

2. 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 from my end. Any inputs on what I could be missing ?.

Thank you.

Was it helpful?

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>

  • Order in application.js

    require raphael-min

require g.raphael

require g.bar

OTHER TIPS

For one using Rails 4 and the graphael-rails gem:

Add to application.js before the require_tree statement:

...
//= require raphael/raphael.js
//= require g.raphael/g.raphael.js
//= require g.raphael/g.bar.js // ...and g.pie.js etc
//= require_tree .

This gem helps by internally linking to Rafaël and g.Rafaël repos, helping to keep them updated.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top