0

I want to include the google charts js library to a specific (or set of) controller(s). In my library file, gcharts.libraries.yml, I have the following:

google_charts:
  remote: https://developers.google.com/chart
  version: current
  license:
    name: apache 2.0
    url: http://www.apache.org/licenses/LICENSE-2.0
    gpl-compatible: true
  js:
    https://www.gstatic.com/charts/loader.js: { type: external, minified: true }
  dependencies:
    - core/jquery

Which, unless I copied something incorrectly, should be correct.

Question 1: is the dependencies tag allowed here? The documentation isn't expressly clear on that.


My controller (GoogleChartsController) correctly instantiates and looks like:

<?php
array(
  '#theme' => 'custom_theme',
  '#attached' =>
    array(
      'library' =>
        array('company/google_charts')
    ),
  // For testing purposes
  '#cache' => array(
    'max_age' => 0,
  )
);
?>

However, when I look through the source I don't see the library that I told my controller has a dependency for. My library never loads.

Question 2: Do I have have to use the hook_page_attachement or the hook_preprocess_page hooks? If so, how do I limit it to use just my set of controllers I want (I don't need or want this loading on every page)? Can I get the path, check to see that it is what I want and then add it conditionally, like so? Or is there some other way?


My custom-theme.html.twig looks like:

<div id="testing-div">Are we here?</div>
<!-- inflate chart here -->
<div id="chart-div"></div>

The documentation isn't crystal clear as to when and where to include inline js. From the google charts api, I'm to include something like:

<script type="text/javascript">
  // Load the Visualization API and the piechart package.
  google.charts.load('current', {'packages':['corechart']});
  // Set a callback to run when the Google Visualization API is loaded.
  google.charts.setOnLoadCallback(drawChart);
  // issue google charts api call to inflate chart at "chart-div"
  // omitted rest for brevity
</script>

Now, my intuition is that I can actually abstract each of the charts I want into their own "library" and add the dependency, because of the way I designed things, this will be fairly trivial. But I'm not certain if this is the best way to do it. But I've read that you can dump inline js into twig files; but I'm not 100% certain this applies here...

Question 3: Is adding the js into twig best practices or is libraries the way to go? Assuming libraries, can I include several libraries into one library file and just include the one(s) that I want/need? So I would have one library for customized_charts.libraries.yml and in there there would be declarations for pie_chart, bar_chart, etc. And then I would load module/bar_chart when I wanted to display bar charts, etc?

  • Please show the route definition and the full controller callback. – Jaypan Jul 21 '17 at 10:06
2

You are not indenting parts of the yml file that you need to indent.

Look at this example from token.libraries.yml at /modules/contrib/token/token.libraries.yml:

jquery.treeTable:
  remote: 'http://plugins.jquery.com/treetable/'
  version: 3.2.0
  license:
    name: MIT
    url: https://github.com/ludo/jquery-treetable/blob/3.2.0/MIT-LICENSE.txt
    gpl-compatible: true
  js:
    js/jquery.treetable.js: {}
  css:
    component:
      css/jquery.treetable.css: {}
      css/token.treetable.theme.css: {}
  dependencies:
    - core/jquery

Also, pay attention to colons, since they are part of YAML syntax.

use:

remote: 'remote: https://developers.google.com/chart'

not

remote: remote: https://developers.google.com/chart
  • I was going to say the same, but I ran it through an online YAML linter and it said it was okay. – Kevin Jul 20 '17 at 17:28
  • That's because it's valid YAML, but it won't be parsed in the correct way, each row will be a separate array, instead of all being part of the same array. – Jaypan Jul 20 '17 at 23:08
  • ...smh, that is just an error in translation. My actual gcharts.libraries.yml has the correct indentation. I just mistyped the number of spaces. – lilott8 Jul 20 '17 at 23:24
1

To answer two of your questions:

Question 2: Do I have have to use the hook_page_attachement or the hook_preprocess_page hooks?

No, you can attach libraries to a controller.

Question 3: Is adding the js into twig best practices or is libraries the way to go?

It's not a good practice to add JS into a template. It should be added to whichever render array represents the data the script belongs to.

  • Yes, I discovered last night, that I was misinterpreting the documentation. I didn't realized that it was module_name.libraries.yml. I thought it was just library_name.libraries.yml. I have it attaching to my render array in my controller just fine now. As for #3: I have several different chart types, does it makes sense to just build a library for each of those and include them as needed? That brings a whole host of other challenges, but it seems that it is the best Drupal compatible approach... – lilott8 Jul 21 '17 at 16:50
  • Yes, you'll want to build libraries for each of your chart types. – Jaypan Jul 22 '17 at 0:45

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.