OpenXE/www/js/chart-helper.js

var ChartHelper = (function ($, ChartJs) {

    var me = {

        elem: {
            $chartWrapper: null
        },

        storage: {
            charts: []
        },

        init: function () {
            me.elem.$chartWrapper = $('.chart-wrapper');

            // Keine Charts gefunden > Ende
            if (me.elem.$chartWrapper.length === 0) {
                return;
            }

            me.initCharts();
        },

        /**
         * Alle Diagramme initialisieren
         */
        initCharts: function () {
            var interval = 250;
            me.elem.$chartWrapper.each(function () {
                var $wrapper = $(this);

                // Alle 250 ms ein Chart initialisieren
                window.setTimeout(function () {
                    me.initChart($wrapper);
                }, interval);

                interval += 250;
            });
        },

        /**
         * Einzelnes Diagramm initialisieren
         *
         * @param {jQuery} $wrapper
         *
         * @return {Chart}
         */
        initChart: function ($wrapper) {
            var chartCanvas = $wrapper.find('canvas');
            var chartJson = $wrapper.find('script');
            var chartData = JSON.parse(chartJson.html());

            var graphId = chartCanvas.data('graph-id');
            var graph = new ChartJs(chartCanvas, chartData);

            if (typeof graphId === 'undefined') {
                graphId = me.generateRandomId();
                chartCanvas.data('graph-id', graphId);
            }
            me.storage.charts[graphId] = graph;

            return graph;
        },

        /**
         * Chart-Instanz abrufen
         *
         * @param {String} chartId
         *
         * @return {Chart}
         */
        getChart: function (chartId) {
            return me.storage.charts[chartId];
        },

        /**
         * Alle Chart-Instanzen abrufen
         *
         * @return {Array|Chart[]}
         */
        getCharts: function () {
            return me.storage.charts;
        },

        /**
         * Zufällige ID generieren
         *
         * @return {string}
         */
        generateRandomId: function () {
            return 'chart-' + Math.floor(Math.random() * Math.floor(9999999999));
        }
    };

    return {
        init: me.init,
        initChart: me.initChart,
        getChart: me.getChart,
        getCharts: me.getCharts
    };

})(jQuery, Chart);

$(document).ready(ChartHelper.init);