html

@model (DateTime debut, DateTime fin)
<div class="row">
    <div class="col-12">
        <div class="card border-top-albioma-blue">
            <div class="card-header bg-light header-elements-inline">
                <h6 class="card-title ">
                    Quantités transportées
                    <span class="text-muted d-block font-size-sm"><i class="far fa-calendar mr-1"></i>@Model.debut.ToString("dd/MM/yyyy") &#8596; <i class="far fa-calendar mr-1"></i>@Model.fin.ToString("dd/MM/yyyy")</span>
                </h6>
            </div>
            <div class="card-body">
                <div id="chart-loading"></div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    var chart_loading = null;
    var redrawer_chart_loading = null;
    $(document).ready(function() {
        $(window).resize(function() {
            clearTimeout(redrawer_chart_loading);
            redrawer_chart_loading = setTimeout(function() {
                chart_loading.reflow();
            }, 100);
        });
        var options_chart_loading = {
            chart: {
                renderTo: 'chart-loading',
                zoomType: '',
                type: 'column'
            },
            legend: {
                squareSymbol: true,
                enabled: true
            },
            tooltip: {
                xDateFormat: '%A %d %B',
                shared: true,
                valueSuffix: ' T'
            },
            plotOptions: {
                series: {
                    marker: {
                        enabled: false
                    }
                }
            },
            yAxis: {
                title: {
                    text: 'Tonnes'
                }
            },
            xAxis: {
                type: 'datetime',
                units: [['day', [1]]],
                tickInterval: 1
            },
            title: {
                text: ''
            },
            subtitle: {
                text: ''
            },
            series: []
        };
        chart_loading = Highcharts.chart(options_chart_loading, function(chart) { });

        UpdateChartLoading();

    });
    function UpdateChartLoading() {
        chart_loading.showLoading();
        $.ajax({
            url: '@Html.Raw(Url.Action("JsonLoading", new { area = "Kpi", debut = Model.debut, fin = Model.fin}))',
            type: 'GET',
            async: true,
            dataType: "json",
            success: function(data) {
                data.map(function(serie) {
                    var currentSerie = {
                        color: serie.color,
                        type: 'column',
                        name: serie.name,
                        data: serie.data,
                        states: {
                            hover: {
                                lineWidthPlus: 0,
                                halo: {
                                    size: 1
                                }
                            }
                        },
                        showInNavigator: true,
                        lineWidth: 2,
                        showInLegend: true,
                    }
                    chart_loading.addSeries(currentSerie, false);
                });
                chart_loading.reflow();
                chart_loading.hideLoading();
            }
        });
    }
</script>