Highcharts - How to split up multiple charts in Rails 3

Question

I'm trying to draw two separate graphs on two separate views - one on the Project#Index page, and the other on the Project#Show page. I plan on having different graphs in similar locations for each model, so I've created folders in app/assets/javascripts/ that correspond to my models and contain all the Javascript files required for those graphs (I currently have one file for each graph). I can get them to draw separately on their own, but when I have both files being served to the browser, It will only draw the one that is listed first in the HTML source code. I've made sure both graphs are rendering to a different div - but that doesn't seem to help. When I take a look at the Javascript console in my web browser, there is an error:

Uncaught Highcharts error #13: www.highcharts.com/errors/13 

Which means the graph is unable to find the div it has been told to render in.

Which makes sense, both graphs are being served to the page, but only one is able to find it's corresponding div . Being able to see one and not the other is partially explained by this, too - the graph that is listed first in the HTML source works, and the the error is Highcharts saying the second graph cannot find it's div . When I go to the second graph's page, Highcharts errors out on the first one, leaving the second one unrendered.

Is there a better way to organize this? Should I be keeping all model-related Javascripts in a single file? Am I referencing the div s wrong?

Answer 1

So, after a little more research, and some help from a friend, I've come across a pretty suitable answer:

Originally, I had the following line in my app/assets/javascripts/application.js :

//= require_tree .

Which would instruct the rails server to serve out all the files in that directory, including those that were in directories.

By changing this to

//= require_directory .

The rails server will now only serve out files that are directly located in that directory.

This then allowed me to add individual javascript_include_tag s in each view, as such:

= javascript_include_tag "projects/show"

Now my graphs work, and the server doesn't serve out Javascripts unnecessarily!