<div class="row">
    <div class="col-md-12">
        <!-- Basic column chart -->
        <div class="border p-3 shadow-sm rounded-3">
            <div class="">
                <div class="chart-container">
                    <div class="chart has-fixed-height-250" id="CustomersGrowthChart"
                        style="width: 100%;height:350px;"
                    ></div>
                </div>
            </div>
        </div>
        <!-- /basic column chart -->
    </div>
</div>

<script>
    $(function() {
        CustomersGrowthChart.showChart();
    });
    var CustomersGrowthChart = {
        url: '<?php echo e(action('Admin\CustomerController@growthChart'), false); ?>',
        getChart: function() {
            return $('#CustomersGrowthChart');
        },

        showChart: function() {
            $.ajax({
                method: "GET",
                url: this.url,
            })
            .done(function( response ) {
                CustomersGrowthChart.renderChart( response );
            });
        },

        renderChart: function(data) {
                // based on prepared DOM, initialize echarts instance
                var growthChart1 = echarts.init(CustomersGrowthChart.getChart()[0], ECHARTS_THEME);

                var option = {
                    grid: {
                        bottom: '20px'
                    },
                    title: {
                        text: '<?php echo e(trans('messages.customers_growth'), false); ?>',
                        // subtext: '<?php echo e(trans('messages.growth_chart'), false); ?>',
                        left: 'center'
                    },
                    xAxis: {
                        type: 'category',
                        data: data.columns
                    },
                    yAxis: {
                        type: 'value',
                        name: '<?php echo e(trans('messages.subscribers'), false); ?>',
                    },
                    series: [{
                        label: {
                            show: true
                        },
                        itemStyle: {
                            color: '#81ac8d'
                        },
                        data: data.data,
                        type: 'bar'
                    }]
                };

                // use configuration item and data specified to show chart
                growthChart1.setOption(option);
        }
    }
</script>
<?php /**PATH /home/xedaptot/be.naniguide.com/resources/views/admin/customers/_growth_chart.blade.php ENDPATH**/ ?>