publications-charts.js

(function ($, Drupal, settings) {

    "use strict";

    Drupal.PublicationsCharts = Drupal.PublicationsCharts || {};

    Drupal.PublicationsCharts.createChart = function (name, labels, datasets) {
        var ctx = $("#chart-" + name);

        console.log(ctx);
        var chart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: labels,
                datasets: [{
                    // label: '# of Votes',
                    data: datasets.data,
                    backgroundColor: datasets.backgroundColor,
                    borderColor:  'rgba(253, 209, 6, 0.9)',
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero:true
                        }
                    }]
                },
                legend: {
                    position: 'left',
                    display: false
                }
            }
        });



    };

    Drupal.behaviors.PublicationsCharts = {
        attach: function (context) {

            var labels = [];
            var chartData = {};


            var jqxhr = $.getJSON( "/publications/chart", function(data) {
                console.log( "success" );
                labels = data.labels;
                chartData = data;
            })
                .done(function(data) {
                    console.log( "second success" );
                    console.log(data);
                    console.log(labels);

                    Drupal.PublicationsCharts.createChart('list', labels, data.datasets.list);
                    Drupal.PublicationsCharts.createChart('if', labels, data.datasets.if);
                    Drupal.PublicationsCharts.createChart('sjr', labels, data.datasets.sjr);

                })
                .fail(function() {
                    console.log( "getJSON: error PublicationsCharts" );
                })
                .always(function() {
                    console.log( "complete" );
                });

            console.log('PublicationsCharts');
        }
    }

})(jQuery, Drupal, drupalSettings);