Why am I not able to pass a variable to my JavaScript code?

Question

I'm hoping someone can shed some light on this for me. I've been building my first Drupal 8 custom block via a custom module. It was all going well until I've tried to pass some values into javascript. I'm working on some morris.js graphs, and want to display data from a database.

I've tried numerous variations, but can never get the variable to work. BTW, I'm not great at Javascript, so that might be where the flaw lies.

Here is the library definition:

 morris:
  css:
    theme:
      /libraries/morris/morris.css: {}
  js:
    /libraries/morris/morris.min.js: {}
    /libraries/raphael-master/raphael.min.js: {}
    js/custom.js: {}
    dependencies:
    - core/jquery
    - core/drupal.ajax
    - core/drupal
    - core/drupalSettings
    - core/jquery.once

Here is the relevant part of the block file:

 $build['#attached']['library'][] = 'module_machine_name/morris';
$build['#attached']['drupalSettings']['module_machine_name']['morris']['memGraph'] = $graph_total;

And here is the js file:

     var infoo;

    (function ($, Drupal, drupalSettings) {
      Drupal.behaviors.module_machine_name = {
        attach: function (context, settings) {

            infoo = drupalSettings.module_machine_name.morris.memGraph;

        Morris.Bar({
      element: 'graph',
      data: [
        {x: '2011 Q1', y: infoo, z: 2, a: 6},
        {x: '2011 Q2', y: 2, z: null, a: 1},
        {x: '2011 Q3', y: 0, z: 2, a: 4},
        {x: '2011 Q4', y: 2, z: 4, a: 3}
      ],
      xkey: 'x',
      ykeys: ['y', 'z', 'a'],
      labels: ['Y', 'Z', 'A']
    }).on('click', function(i, row){
      console.log(i, row);
    });



        }
      };


})(jQuery, Drupal, drupalSettings);

Can anybody help? Thanks

Answer 1

Have you try changing the order?

First load the drupalSettings attachment and after the library?

$build['#attached']['drupalSettings']['module_machine_name']['morris']['memGraph'] = $graph_total;
$build['#attached']['library'][] = 'module_machine_name/morris';