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