jasaraharja/public/assets/js/custom-graph.js

"use strict";
// Class definition

var graph = function () {
    // Private functions

    // basic demo
    var graphic = function (config) {
        Highcharts.chart(config.id, {
            chart: {
                type: config.type,
                text: '',
            },
            title: {
                text: config.title
            },
            xAxis: {
                categories: config.xcategories
            },
            yAxis: {
                title: {
                    text: config.ytitle
                }
            },
            legend: {
                enabled: false
            },

            plotOptions: {
                series: {
                    label: {
                        connectorAllowed: true
                    }

                }
            },
            series: config.series,
            tooltip: {
                formatter: function () {
                    return '<b>' + this.series.name + '</b><br/>' +
                        this.point.y + ' ';
                }
            },
        });
    };

    var graphic_modal = function (config) {
        Highcharts.chart(config.id, {
            chart: {
                type: config.type,
                text: '',
            },
            title: {
                text: config.title
            },
            xAxis: {
                categories: config.xcategories
            },
            yAxis: {
                title: {
                    text: config.ytitle
                }
            },
            legend: {
                enabled: false
            },

            plotOptions: {
                series: {
                    label: {
                        connectorAllowed: true,
                    },
                    point: {
                        events: {
                            click: function () {
                                // alert('Category: ' + this.category + ', value: ' + this.y);
                                // var class_modal = '' + config.class_modal + ''
                                $(config.class_modal).click();
                                var param = this.category;
                                var urlnya = config.url_modal;
                                $.ajax({
                                    type: "POST",
                                    url: urlnya,
                                    data: {
                                        param: param
                                    },
                                    success: function (response) {
                                        // console.log(response);
                                        $(".modal-content").html(response.html);
                                    }
                                });
                            }
                        }
                    }

                }
            },
            series: config.series,
            tooltip: {
                formatter: function () {
                    return '<b>' + this.series.name + '</b><br/>' +
                        this.point.y + ' ';
                }
            },
        });
    };

    return {
        // public functions
        init_graph: function (config) {
            graphic(config);
        },
        init_graph_modal: function (config) {
            graphic_modal(config);
        }
    };
}();