Javascript 如何计算值并将其放置在Chart.JS条形图的最后一个条形图中？

由于在条形图的最后一个条形图上方放置标签似乎不可能或非常困难（没有有效答案），我现在想知道如何在最后一个条形图内放置标签

我正在使用以下代码向水平条形图的所有条形图添加标签：

Chart.pluginService.register({
    afterDraw: function (chartInstance) {
        if (chartInstance.id !== 1) return; // affect this one only
        var ctx = chartInstance.chart.ctx;
        // render the value of the chart above the bar
        ctx.font = Chart.helpers.fontString(14, 'bold', Chart.defaults.global.defaultFontFamily);
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';

        chartInstance.data.datasets.forEach(function (dataset) {
            for (var i = 0; i < dataset.data.length; i++) {
                var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;
                ctx.fillText(dataset.data[i] + (Number.isInteger(dataset.data[i]) ? ".0" : "") + "%", ((model.x + model.base) / 2), model.y + (model.height / 3));
            }
        });
    }
});

…失败（没有显示任何内容，事实上，它不仅会导致其自身外观出现问题，还会导致页面上其他图表的外观出现问题，即使我使用代码仅将此事件应用于此特定图表：

那么，我如何计算一个值（基于最后一个和倒数第二个条形图值），然后将计算出的“标签”放在Chart.JS条形图的最后一个条形图中呢

对于我上面尝试的代码，我现在只想获取条内条的原始值；逻辑的计算部分可以留到以后

一种可能是将其制作成一个堆叠条形图，除了最后一个条形图外，其他任何条形图都不添加任何内容，然后将其背景色设置为白色，以与图表背景混合

更新 我尝试了我的最后一个想法；我想也许我可以通过将我的图表变形为一个堆叠的条形图（从一个简单的条形图），添加第二组主要为“零”的数据作为堆栈的第二部分来实现我想要的，如下所示：

旧代码摘录：

var forecastChartData = {
    labels: [
        "Total Sales"
    ],
    datasets: [
    {
        label: "8/28/2016 - 9/3/2016",
        backgroundColor: "rgba(255,0,0,0.75)",
        hoverBackgroundColor: "rgba(255,0,0,1)",
        data: [240]
    },
    {
        label: "9/4/2016 - 9/10/2016",
        backgroundColor: "rgba(255,153,0,0.75)",
        hoverBackgroundColor: "rgba(255,153,0,1)",
        data: [272]
    },
    {
        label: "9/11/2016 - 9/17/2016",
        backgroundColor: "rgba(255,255,0,0.75)",
        hoverBackgroundColor: "rgba(255,255,0,1)",
        data: [250]
    },
    {
        label: "9/18/2016 - 9/24/2016",
        backgroundColor: "rgba(0,255,0,0.75)",
        hoverBackgroundColor: "rgba(0,255,0,1)",
        data: [232]
    },
    {
        label: "9/25/2016 - 10/1/2016",
        backgroundColor: "rgba(0,0,255,0.75)",
        hoverBackgroundColor: "rgba(0,0,255,1)",
        data: [244]
    }],
};

var forecastOptions = {
    tooltips: {
        enabled: true
    }
};

新代码：

var forecastChartData = {
    labels: [
        "Total Sales"
    ],
    datasets: [
    {
        label: "8/28/2016 - 9/3/2016",
        backgroundColor: "rgba(255,0,0,0.75)",
        hoverBackgroundColor: "rgba(255,0,0,1)",
        data: [240]
    },
    {
        label: "9/4/2016 - 9/10/2016",
        backgroundColor: "rgba(255,153,0,0.75)",
        hoverBackgroundColor: "rgba(255,153,0,1)",
        data: [272]
    },
    {
        label: "9/11/2016 - 9/17/2016",
        backgroundColor: "rgba(255,255,0,0.75)",
        hoverBackgroundColor: "rgba(255,255,0,1)",
        data: [250]
    },
    {
        label: "9/18/2016 - 9/24/2016",
        backgroundColor: "rgba(0,255,0,0.75)",
        hoverBackgroundColor: "rgba(0,255,0,1)",
        data: [232]
    },
    {
        label: "9/25/2016 - 10/1/2016",
        backgroundColor: "rgba(0,0,255,0.75)",
        hoverBackgroundColor: "rgba(0,0,255,1)",
        data: [244]
    }],
    [{
        backgroundColor: "rgba(255, 255, 255, 0.5)",
        hoverBackgroundColor: "rgba(200, 200, 200, 1)",
        data: [0, 0, 0, 0, 5.2]
    }]
};

var forecastOptions = {
    scales: {
        xAxes: [
        {
            stacked: true
        }
        ],
        yAxes: [
        {
            stacked: true
        }
        ]
    },
    tooltips: {
        enabled: true
    }
};

但这一点都没有帮助；我做错了什么；如果一切顺利，在用我的新代码追求核选项之后，我该如何继续

更新2 Hung Tran的代码让我很接近。我现在的选择是：

var forecastOptions = {
    tooltips: {
        enabled: true
    },
    animation: {
        duration: 500,
        easing: "easeOutQuart",
        onComplete: function () {
            var ctx = this.chart.ctx;
            ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
            ctx.textAlign = 'center';
            ctx.textBaseline = 'bottom';

            this.data.datasets.forEach(function (dataset) {
                for (var i = 0; i < dataset.data.length; i++) {
                    var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model,
                        scale_max = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._yScale.maxHeight;
                    ctx.fillStyle = '#444';
                    var y_pos = model.y - 5;
                    // Make sure data value does not get overflown and hidden
                    // when the bar's value is too close to max value of scale
                    // Note: The y value is reverse, it counts from top down
                    if ((scale_max - model.y) / scale_max >= 0.93)
                        y_pos = model.y + 20;
                    ctx.fillText(dataset.data[i], model.x, y_pos);
                }
            });
        }
    }
};

var预测选项={
工具提示：{
已启用：true
},
动画：{
持续时间：500，
放松：“放松夸脱”，
onComplete:函数（）{
var ctx=this.chart.ctx；
ctx.font=Chart.helpers.fontString（Chart.defaults.global.defaultFontFamily，'normal'，Chart.defaults.global.defaultFontFamily）；
ctx.textAlign='中心'；
ctx.textb基线='底部'；
this.data.datasets.forEach（函数（数据集）{
对于（var i=0；i=0.93）
y_pos=型号y+20；
ctx.fillText（dataset.data[i]，model.x，y_pos）；
}
});
}
}
};

…并将数据值放置在每个条的上方

如上所述，这接近于我想要的；但是，我真正想要的是最后一个值和当前值之间的差值。例如，使用此图表：

…我想看到的是：

240272（30）、250（-22）、232（-18）、244（12）

或者可能只是最后一个条上方的一个值，或者是“244（12）”或者只是“12”

这正是他们想要的（后者），但如果他们改变主意，想要所有的VAL/DIFF，我也不会感到惊讶

更新3 该解决方案在条顶上不添加任何值，并吃掉我的一片馅饼：

更新4 下面是Index.cshtml中几乎所有的代码：

    <style>

        .pieLegend li span {
            display: inline-block;
            width: 12px;
            height: 12px;
            margin-right: 5px;
        }

        #piechartlegendleft {
            height: 360px;
            width: 100%;
        }

        #top10Legend {
            display: inline-block;
        }

            #top10Legend > ul {
                list-style: none;
            }

        #container {
            display: inline-block;
            height: 50%;
            width: 50%;
        }
    </style>
    <script>
        $(document).ready(function () {
            $("body").on("click", "#btnGetData",
        . . .
                    });

            Chart.defaults.global.defaultFontFamily = "Candara";
            Chart.defaults.global.defaultFontSize = 16;

            // Top 10 Pie Chart
            var formatter = new Intl.NumberFormat("en-US");

            Chart.pluginService.register({
                afterDatasetsDraw: function (chartInstance) {
                    var ctx = chartInstance.chart.ctx;

                    ctx.font = Chart.helpers.fontString(14, 'bold', Chart.defaults.global.defaultFontFamily);
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'bottom';
                    ctx.fillStyle = '#666';

                    chartInstance.config.data.datasets.forEach(function (dataset) {

                        for (var i = 0; i < dataset.data.length; i++) {
                            var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model,
                                total = dataset._meta[Object.keys(dataset._meta)[0]].total,
                                mid_radius = model.innerRadius + (model.outerRadius - model.innerRadius) / 2,
                                start_angle = model.startAngle,
                                end_angle = model.endAngle,
                                mid_angle = start_angle + (end_angle - start_angle) / 2;

                            var x = mid_radius * 1.5 * Math.cos(mid_angle);
                            var y = mid_radius * 1.5 * Math.sin(mid_angle);

                            ctx.fillStyle = '#fff';
                            if (i === 0 || i === 3 || i === 7 || i === 9) { // Darker text color for lighter background
                                ctx.fillStyle = '#000';
                            }
                            var percent = String(Math.round(dataset.data[i] / total * 100)) + "%";
                            // this prints the data number
                            // this prints the percentage
                            ctx.fillText(percent, model.x + x, model.y + y);
                        }
                    });
                }
            });

            var data = {
                labels: [
                    "Bananas (18%)",
                    "Lettuce, Romaine (14%)",
                    "Melons, Watermelon (10%)",
                    "Pineapple (10%)",
                    "Berries (10%)",
                    "Lettuce, Spring Mix (9%)",
                    "Broccoli (8%)",
                    "Melons, Honeydew (7%)",
                    "Grapes (7%)",
                    "Melons, Cantaloupe (7%)"
                ],
                datasets: [
                {
                    data: [2755, 2256, 1637, 1608, 1603, 1433, 1207, 1076, 1056, 1048],
                    backgroundColor: [
                        "#FFE135",
                        "#3B5323",
                        "#fc6c85",
                        "#ffec89",
                        "#021c3d",
                        "#3B5323",
                        "#046b00",
                        "#cef45a",
                        "#421C52",
                        "#FEA620"
                    ]
                }]
            };

            var optionsPie = {
                responsive: true,
                scaleBeginAtZero: true,
                legend: {
                    display: false
                },
                tooltips: {
                    callbacks: {
                        label: function (tooltipItem, data) {
                            return data.labels[tooltipItem.index] + ": " +
                                formatter.format(data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]);
                        }
                    }
                },
            };

            var ctx = $("#top10ItemsChart").get(0).getContext("2d");
            var top10PieChart = new Chart(ctx,
            {
                type: 'pie',
                data: data,
                options: optionsPie
            });

            $("#top10Legend").html(top10PieChart.generateLegend());
            // </ Top 10 Pie Chart

            // Price Compliance Bar Chart
            Chart.pluginService.register({
                afterDraw: function (chartInstance) {
                    if (chartInstance.id !== 1) return; // affect this one only
                    var ctx = chartInstance.chart.ctx;
                    // render the value of the chart above the bar
                    ctx.font = Chart.helpers.fontString(14, 'bold', Chart.defaults.global.defaultFontFamily);
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'bottom';

                    ctx.fillStyle = "#000";

                    chartInstance.data.datasets.forEach(function (dataset) {
                        for (var i = 0; i < dataset.data.length; i++) {
                            var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;
                            ctx.fillText(dataset.data[i] + (Number.isInteger(dataset.data[i]) ? ".0" : "") + "%", ((model.x + model.base) / 2), model.y + (model.height / 3));
                        }
                    });
                }
            });

            var ctxBarChart = $("#priceComplianceBarChart").get(0).getContext("2d");
            var priceComplianceData = {
                labels: [
                    "Bix Produce", "Capitol City", "Charlies Portland", "Costa Fruit and Produce",
                    "Get Fresh Sales", "Loffredo East", "Loffredo West", "Paragon", "Piazza Produce"
                ],
                datasets: [
                {
                    label: "Price Compliant",
                    backgroundColor: "rgba(34,139,34,0.5)",
                    hoverBackgroundColor: "rgba(34,139,34,1)",
                    data: [99.0, 99.2, 99.4, 98.9, 99.1, 99.5, 99.6, 99.2, 99.7]
                },
                {
                    label: "Non-Compliant",
                    backgroundColor: "rgba(255, 0, 0, 0.5)",
                    hoverBackgroundColor: "rgba(255, 0, 0, 1)",
                    data: [1.0, 0.8, 0.6, 1.1, 0.9, 0.5, 0.4, 0.8, 0.3]
                }
                ]
            }

            var priceComplianceOptions = {
                scales: {
                    xAxes: [
                    {
                        stacked: true
                    }],
                    yAxes: [
                    {
                        stacked: true
                    }]
                },
                tooltips: {
                    enabled: false
                }
            };

            var priceBarChart = new Chart(ctxBarChart,
            {
                type: 'horizontalBar',
                data: priceComplianceData,
                options: priceComplianceOptions
            });
            // </Price Compliance Bar Chart

            // Forecast/Impact Analysis chart
            var ctxForecastChart = $("#forecastLineChart"); //.get(0).getContext("2d");
            // See if the "olde style" makes any diff (used by the Chart.JS Whisperer)
            //var ctxForecastChart = document.getElementById("forecastLineChart"); // no diff

            var forecastChartData = {
                labels: ["Total Sales"],
                datasets: [
                {
                    label: "8/28/2016 - 9/3/2016",
                    backgroundColor: "rgba(255,0,0,0.75)",
                    hoverBackgroundColor: "rgba(255,0,0,1)",
                    data: [240]
                },
                {
                    label: "9/4/2016 - 9/10/2016",
                    backgroundColor: "rgba(255,153,0,0.75)",
                    hoverBackgroundColor: "rgba(255,153,0,1)",
                    data: [272]
                },
                {
                    label: "9/11/2016 - 9/17/2016",
                    backgroundColor: "rgba(255,255,0,0.75)",
                    hoverBackgroundColor: "rgba(255,255,0,1)",
                    data: [250]
                },
                {
                    label: "9/18/2016 - 9/24/2016",
                    backgroundColor: "rgba(0,255,0,0.75)",
                    hoverBackgroundColor: "rgba(0,255,0,1)",
                    data: [232]
                },
                {
                    label: "9/25/2016 - 10/1/2016",
                    backgroundColor: "rgba(0,0,255,0.75)",
                    hoverBackgroundColor: "rgba(0,0,255,1)",
                    data: [244]
                }]
        };

        var forecastOptions = {
            tooltips: {
                enabled: true
            },
            animation: {
                    duration: 500,
                    easing: "easeOutQuart",
                    onComplete: function () {
                        var ctx = this.chart.ctx;
                        ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
                        ctx.textAlign = 'center';
                        ctx.textBaseline = 'bottom';

                        this.data.datasets.forEach(function (dataset) {
                            for (var i = 0; i < dataset.data.length; i++) {
                                var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model,
                                    scale_max = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._yScale.maxHeight;
                                ctx.fillStyle = '#444';
                                var y_pos = model.y - 5;
                                // Make sure data value does not get overflown and hidden
                                // when the bar's value is too close to max value of scale
                                // Note: The y value is reverse, it counts from top down
                                if ((scale_max - model.y) / scale_max >= 0.93)
                                    y_pos = model.y + 20;
                                ctx.fillText(dataset.data[i], model.x, y_pos);
                            }
                        });
                    }
                }
            };

        var forecastBarChart = new Chart(ctxForecastChart, {
            type: 'bar',
            //type: 'line',
            data: forecastChartData,
            options: forecastOptions
        });
        // </ Forecast/Impact Analysis chart

        $('#delperfTable').DataTable({
            "paging": false,
            "info": false,
            "searching": false
        });
        });


    </script>
</head>

<body>
    <div class="container body-content">
        <div class="jumbotronjr">
            <div class="col-md-3" style="margin-top: 0.6cm">
                <img src="http://www.proactusa.com/wp-content/themes/proact/images/pa_logo_notag.png" height="86" width="133" alt="PRO*ACT usa logo">
            </div>
            <div class="col-md-9">
                <label class="titletext" style="margin-top: 0.2cm;">Customer Dashboard</label>
                <br />
                <label class="titletextjr" style="margin-top: -2.2cm;" id="unitName">SODEXO</label>
                <label class="cccsfont"> for the week of September 25          </label>
                <input class="smalldatepicker" type="date" id="datepickerFrom" value="2016-09-25">
                </input>
                <label class="cccsfont"> to </label>
                <input type="date" class="smalldatepicker" id="datepickerTo" value="2016-10-01">
                </input>
                <span id="newhourglass" class="fa fa-4x fa-refresh fa-spin boxRefresh hide" runat="server"></span>
                <button class="btn btn-success btn-sm green" id="btnGetData"><span class="glyphicon glyphicon-refresh"></span></button>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <hr />
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
            </div>
        </div>

        <div class="row" id="top10Items">
            <div class="col-md-6">
                <div class="topleft">
                    <h2 class="sectiontext">Top 10 Items</h2>
                    <br />
                    <div id="piechartlegendleft">
                        <div id="container">
                            <canvas id="top10ItemsChart" width="800" height="800"></canvas>
                        </div>
                        <div id="top10Legend" class="pieLegend"></div>
                    </div>
                </div>
            </div>

            <div class="col-md-6">
                <div class="topright">
                    <h2 class="sectiontext">Price Compliance</h2>
                    <div class="graph_container">
                        <canvas id="priceComplianceBarChart"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6">
                <div class="bottomleft">
                    <h2 class="sectiontext">Forecast/Impact Analysis</h2>
                    <div class="graph_container">
                        <canvas id="forecastLineChart"></canvas>
                    </div>
                </div>
            </div>

            <div class="col-md-6">
                <div class="bottomright">
                    <h2 class="sectiontext">Delivery Performance</h2>
                    <table id="delperfTable">
            . . .
                    </table>
                </div>
            </div>
        </div>

    </div>
</body>
</html>

李鹏先生{
显示：内联块；
宽度：12px；
高度：12px；
右边距：5px；
}
#皮耶沙特勒让德勒{
高度：360px；
宽度：100%；
}
#10大传奇{
显示：内联块；
}
#top10Legend>ul{
列表样式：无；
}
#容器{
显示：内联块；
身高：50%；
宽度：50%；
}
$（文档）.ready（函数（）{
$（“正文”）。在（“单击”上，“#btnGetData”，
. . .
});
Chart.defaults.global.defaultFontFamily=“Candara”；
Chart.defaults.global.defaultFontSize=16；
//十大饼图
var格式化程序=新的国际编号格式（“en-US”）；
Chart.pluginService.register({
afterDatasetsDraw:函数（chartInstance）{
var ctx=chartInstance.chart.ctx；
ctx.font=Chart.helpers.fontString（14，'bold'，Chart.defaults.global.defaultFontFamily）；
ctx.textAlign='中心'；
ctx.textb基线='底部'；
ctx.fillStyle='#666'；
chartInstance.config.data.datasets.forEach（函数（数据集）{
对于（var i=0；i    <style>

        .pieLegend li span {
            display: inline-block;
            width: 12px;
            height: 12px;
            margin-right: 5px;
        }

        #piechartlegendleft {
            height: 360px;
            width: 100%;
        }

        #top10Legend {
            display: inline-block;
        }

            #top10Legend > ul {
                list-style: none;
            }

        #container {
            display: inline-block;
            height: 50%;
            width: 50%;
        }
    </style>
    <script>
        $(document).ready(function () {
            $("body").on("click", "#btnGetData",
        . . .
                    });

            Chart.defaults.global.defaultFontFamily = "Candara";
            Chart.defaults.global.defaultFontSize = 16;

            // Top 10 Pie Chart
            var formatter = new Intl.NumberFormat("en-US");

            Chart.pluginService.register({
                afterDatasetsDraw: function (chartInstance) {
                    var ctx = chartInstance.chart.ctx;

                    ctx.font = Chart.helpers.fontString(14, 'bold', Chart.defaults.global.defaultFontFamily);
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'bottom';
                    ctx.fillStyle = '#666';

                    chartInstance.config.data.datasets.forEach(function (dataset) {

                        for (var i = 0; i < dataset.data.length; i++) {
                            var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model,
                                total = dataset._meta[Object.keys(dataset._meta)[0]].total,
                                mid_radius = model.innerRadius + (model.outerRadius - model.innerRadius) / 2,
                                start_angle = model.startAngle,
                                end_angle = model.endAngle,
                                mid_angle = start_angle + (end_angle - start_angle) / 2;

                            var x = mid_radius * 1.5 * Math.cos(mid_angle);
                            var y = mid_radius * 1.5 * Math.sin(mid_angle);

                            ctx.fillStyle = '#fff';
                            if (i === 0 || i === 3 || i === 7 || i === 9) { // Darker text color for lighter background
                                ctx.fillStyle = '#000';
                            }
                            var percent = String(Math.round(dataset.data[i] / total * 100)) + "%";
                            // this prints the data number
                            // this prints the percentage
                            ctx.fillText(percent, model.x + x, model.y + y);
                        }
                    });
                }
            });

            var data = {
                labels: [
                    "Bananas (18%)",
                    "Lettuce, Romaine (14%)",
                    "Melons, Watermelon (10%)",
                    "Pineapple (10%)",
                    "Berries (10%)",
                    "Lettuce, Spring Mix (9%)",
                    "Broccoli (8%)",
                    "Melons, Honeydew (7%)",
                    "Grapes (7%)",
                    "Melons, Cantaloupe (7%)"
                ],
                datasets: [
                {
                    data: [2755, 2256, 1637, 1608, 1603, 1433, 1207, 1076, 1056, 1048],
                    backgroundColor: [
                        "#FFE135",
                        "#3B5323",
                        "#fc6c85",
                        "#ffec89",
                        "#021c3d",
                        "#3B5323",
                        "#046b00",
                        "#cef45a",
                        "#421C52",
                        "#FEA620"
                    ]
                }]
            };

            var optionsPie = {
                responsive: true,
                scaleBeginAtZero: true,
                legend: {
                    display: false
                },
                tooltips: {
                    callbacks: {
                        label: function (tooltipItem, data) {
                            return data.labels[tooltipItem.index] + ": " +
                                formatter.format(data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]);
                        }
                    }
                },
            };

            var ctx = $("#top10ItemsChart").get(0).getContext("2d");
            var top10PieChart = new Chart(ctx,
            {
                type: 'pie',
                data: data,
                options: optionsPie
            });

            $("#top10Legend").html(top10PieChart.generateLegend());
            // </ Top 10 Pie Chart

            // Price Compliance Bar Chart
            Chart.pluginService.register({
                afterDraw: function (chartInstance) {
                    if (chartInstance.id !== 1) return; // affect this one only
                    var ctx = chartInstance.chart.ctx;
                    // render the value of the chart above the bar
                    ctx.font = Chart.helpers.fontString(14, 'bold', Chart.defaults.global.defaultFontFamily);
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'bottom';

                    ctx.fillStyle = "#000";

                    chartInstance.data.datasets.forEach(function (dataset) {
                        for (var i = 0; i < dataset.data.length; i++) {
                            var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;
                            ctx.fillText(dataset.data[i] + (Number.isInteger(dataset.data[i]) ? ".0" : "") + "%", ((model.x + model.base) / 2), model.y + (model.height / 3));
                        }
                    });
                }
            });

            var ctxBarChart = $("#priceComplianceBarChart").get(0).getContext("2d");
            var priceComplianceData = {
                labels: [
                    "Bix Produce", "Capitol City", "Charlies Portland", "Costa Fruit and Produce",
                    "Get Fresh Sales", "Loffredo East", "Loffredo West", "Paragon", "Piazza Produce"
                ],
                datasets: [
                {
                    label: "Price Compliant",
                    backgroundColor: "rgba(34,139,34,0.5)",
                    hoverBackgroundColor: "rgba(34,139,34,1)",
                    data: [99.0, 99.2, 99.4, 98.9, 99.1, 99.5, 99.6, 99.2, 99.7]
                },
                {
                    label: "Non-Compliant",
                    backgroundColor: "rgba(255, 0, 0, 0.5)",
                    hoverBackgroundColor: "rgba(255, 0, 0, 1)",
                    data: [1.0, 0.8, 0.6, 1.1, 0.9, 0.5, 0.4, 0.8, 0.3]
                }
                ]
            }

            var priceComplianceOptions = {
                scales: {
                    xAxes: [
                    {
                        stacked: true
                    }],
                    yAxes: [
                    {
                        stacked: true
                    }]
                },
                tooltips: {
                    enabled: false
                }
            };

            var priceBarChart = new Chart(ctxBarChart,
            {
                type: 'horizontalBar',
                data: priceComplianceData,
                options: priceComplianceOptions
            });
            // </Price Compliance Bar Chart

            // Forecast/Impact Analysis chart
            var ctxForecastChart = $("#forecastLineChart"); //.get(0).getContext("2d");
            // See if the "olde style" makes any diff (used by the Chart.JS Whisperer)
            //var ctxForecastChart = document.getElementById("forecastLineChart"); // no diff

            var forecastChartData = {
                labels: ["Total Sales"],
                datasets: [
                {
                    label: "8/28/2016 - 9/3/2016",
                    backgroundColor: "rgba(255,0,0,0.75)",
                    hoverBackgroundColor: "rgba(255,0,0,1)",
                    data: [240]
                },
                {
                    label: "9/4/2016 - 9/10/2016",
                    backgroundColor: "rgba(255,153,0,0.75)",
                    hoverBackgroundColor: "rgba(255,153,0,1)",
                    data: [272]
                },
                {
                    label: "9/11/2016 - 9/17/2016",
                    backgroundColor: "rgba(255,255,0,0.75)",
                    hoverBackgroundColor: "rgba(255,255,0,1)",
                    data: [250]
                },
                {
                    label: "9/18/2016 - 9/24/2016",
                    backgroundColor: "rgba(0,255,0,0.75)",
                    hoverBackgroundColor: "rgba(0,255,0,1)",
                    data: [232]
                },
                {
                    label: "9/25/2016 - 10/1/2016",
                    backgroundColor: "rgba(0,0,255,0.75)",
                    hoverBackgroundColor: "rgba(0,0,255,1)",
                    data: [244]
                }]
        };

        var forecastOptions = {
            tooltips: {
                enabled: true
            },
            animation: {
                    duration: 500,
                    easing: "easeOutQuart",
                    onComplete: function () {
                        var ctx = this.chart.ctx;
                        ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
                        ctx.textAlign = 'center';
                        ctx.textBaseline = 'bottom';

                        this.data.datasets.forEach(function (dataset) {
                            for (var i = 0; i < dataset.data.length; i++) {
                                var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model,
                                    scale_max = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._yScale.maxHeight;
                                ctx.fillStyle = '#444';
                                var y_pos = model.y - 5;
                                // Make sure data value does not get overflown and hidden
                                // when the bar's value is too close to max value of scale
                                // Note: The y value is reverse, it counts from top down
                                if ((scale_max - model.y) / scale_max >= 0.93)
                                    y_pos = model.y + 20;
                                ctx.fillText(dataset.data[i], model.x, y_pos);
                            }
                        });
                    }
                }
            };

        var forecastBarChart = new Chart(ctxForecastChart, {
            type: 'bar',
            //type: 'line',
            data: forecastChartData,
            options: forecastOptions
        });
        // </ Forecast/Impact Analysis chart

        $('#delperfTable').DataTable({
            "paging": false,
            "info": false,
            "searching": false
        });
        });


    </script>
</head>

<body>
    <div class="container body-content">
        <div class="jumbotronjr">
            <div class="col-md-3" style="margin-top: 0.6cm">
                <img src="http://www.proactusa.com/wp-content/themes/proact/images/pa_logo_notag.png" height="86" width="133" alt="PRO*ACT usa logo">
            </div>
            <div class="col-md-9">
                <label class="titletext" style="margin-top: 0.2cm;">Customer Dashboard</label>
                <br />
                <label class="titletextjr" style="margin-top: -2.2cm;" id="unitName">SODEXO</label>
                <label class="cccsfont"> for the week of September 25          </label>
                <input class="smalldatepicker" type="date" id="datepickerFrom" value="2016-09-25">
                </input>
                <label class="cccsfont"> to </label>
                <input type="date" class="smalldatepicker" id="datepickerTo" value="2016-10-01">
                </input>
                <span id="newhourglass" class="fa fa-4x fa-refresh fa-spin boxRefresh hide" runat="server"></span>
                <button class="btn btn-success btn-sm green" id="btnGetData"><span class="glyphicon glyphicon-refresh"></span></button>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <hr />
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
            </div>
        </div>

        <div class="row" id="top10Items">
            <div class="col-md-6">
                <div class="topleft">
                    <h2 class="sectiontext">Top 10 Items</h2>
                    <br />
                    <div id="piechartlegendleft">
                        <div id="container">
                            <canvas id="top10ItemsChart" width="800" height="800"></canvas>
                        </div>
                        <div id="top10Legend" class="pieLegend"></div>
                    </div>
                </div>
            </div>

            <div class="col-md-6">
                <div class="topright">
                    <h2 class="sectiontext">Price Compliance</h2>
                    <div class="graph_container">
                        <canvas id="priceComplianceBarChart"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6">
                <div class="bottomleft">
                    <h2 class="sectiontext">Forecast/Impact Analysis</h2>
                    <div class="graph_container">
                        <canvas id="forecastLineChart"></canvas>
                    </div>
                </div>
            </div>

            <div class="col-md-6">
                <div class="bottomright">
                    <h2 class="sectiontext">Delivery Performance</h2>
                    <table id="delperfTable">
            . . .
                    </table>
                </div>
            </div>
        </div>

    </div>
</body>
</html>