Trouble installing GitHub plugin: visual elements not rendering

Other Questions Github
1

I’m having issues with a plugin I got from GitHub. I added the necessary code to my base application html.haml file, but it’s not working as expected. Instead of showing a visual graph, I’m only seeing text.

Here’s what I put in my file:

= javascript_include_tag :defaults, 'jquery-1.3.2.min', 'highcharts'
<!--[if IE]>
javascript_include_tag 'excanvas.compiled'
<![endif]-->
%script{:type => "text/javascript"}
$(document).ready(function() {
= yield :javascripts
});

The output is just a bunch of text describing a pie chart with browser market share data. It looks like JavaScript code that should create a Highcharts graph.

Has anyone run into this problem before? Any ideas on what might be causing it or how to fix it? I’m pretty sure I followed the installation instructions correctly, but maybe I missed something. Thanks for any help!

2

I’ve dealt with this exact issue before. The problem likely stems from how your application is processing the JavaScript. First, ensure your asset pipeline is configured correctly to handle these files. Then, try moving the Highcharts initialization code to a separate .js file and include it after your other scripts.

Also, check if you’re using Turbolinks. If so, you might need to wrap your chart initialization in a Turbolinks:load event listener. Something like:

document.addEventListener(‘turbolinks:load’, function() {
// Your Highcharts initialization code here
});

This ensures the chart renders correctly even when navigating between pages. If you’re still stuck, consider using a JavaScript debugging tool like console.log() to trace where the execution is failing. Hope this helps!

3

hey markseeker91, had similar probs b4. check if ur js files r loading properly in browser console. also, try moving the chart code outside document.ready. sometimes that helps. make sure ur not accidentally printing js as text. good luck mate!

4

I’ve encountered similar issues when working with GitHub plugins, particularly those involving data visualization. From my experience, the problem often lies in how the JavaScript is being loaded and executed.

First, make sure all the required files are actually being loaded correctly. Check your browser’s developer tools (usually F12) and look at the Network tab to confirm that jquery, highcharts, and excanvas (for IE) are all loading without errors.

Another common pitfall is the order of script execution. Try moving your chart initialization code outside of the document.ready function. Sometimes, Highcharts needs to be initialized after the DOM is fully loaded.

Lastly, double-check that you’re not accidentally outputting the JavaScript as plain text somewhere in your template. This can happen if there’s a misplaced equals sign or if your HAML indentation is off.

If none of these solve the issue, you might want to try a simpler test case first - just to ensure Highcharts is working correctly in your environment. Good luck!