I'm trying to use Raphaël with a Drupal 8 website. I'm wondering if there's a step I'm missing, or maybe some other issue, as it doesn't seem to work. I suspect I'm just missing a step in using extra javascript on the site.

For reference, I'm using a version of the raphael code - found at justgage.com. I placed the primary js (justgage.js) in my "js" folder and added it to the js folder in my custom theme, and linked to it in my libraries.yml as a global resource.

Then I created a block, added to the home page, and dropped the code from one of the examples that comes with the zip file. (custom-value-renderer.html) Unfortunately, the gauge doesn't appear.

I thought it would be that simple, but nope. I also tried with the justgage.js added right to the page.

To add detail, I've added the below to a full html field of a content type:

    <div id="gauge" class="200x160px"></div>
  var g = new JustGage({
    id: "gauge",
    value: 67,
    min: 0,
    max: 100,
    title: "test"

That's it. I placed the js from JustGauge to the js folder inside my custom theme, and then modified the mytheme.libraries.yml to include this:

        js/raphael-2.1.4.min.js: {}
        js/justgage.js: {}
        - core/jquery

Then I connected the library, in mytheme.info.yml adding:

 - cyberscout/global-css
 - cyberscout/global-js

I think that's all I need. I don't need to add any functions in Drupal 8, like in 7 - it's a global. And, again, I tested by adding a little alert('hello world') to the two scripts referenced in library and navigated to the page. They gave me the alert. I also tried putting the two scripts (raphaël and justgage) directly on the page twig. This made some difference. The code doesn't work, but at least I see part of the svg appearing. But - this is a wrong and slow way of doing this. It confuses me too, becuase the 'hello world' add-in worked, doing it the correct way.

maybe there's some requirement I need to add? I did reference this page of instructions and don't see that I'm missing anything: https://www.drupal.org/docs/8/theming/adding-stylesheets-css-and-javascript-js-to-a-drupal-8-theme

  • Is the script in the HTML source? That's the first thing you need to determine, so you can figure out whether your problem is that the library is not being included, or if it's being included in the wrong place in the DOM, or if it's being included correctly but your integration code is incorrect. – Jaypan Apr 19 at 1:55
  • Difficult to answer from afar. Also difficult without seeing how exactly you added it. – leymannx Apr 19 at 5:25
  • If I understand the question, viewing source does show me that all scripts are appearing on the page. There may be something still to that point, because I tried dropping scripts directly on the page twig and it got closer to working properly. but I'm stumped. I did read the link @leymannx provided above, while doing this. I'm not seeing anything different than what I've done? - Also, I updated the question above to add more clarity, if it helps. – turpentyne Apr 19 at 17:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.