chart.js

Stacked Bar

by wales

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<div id='legendTime'></div>
<div id='divTimeline'>
    <canvas id="canvasTime" width="500" height="150"></canvas>
</div>
<button id='btnChange'>change</button>

JavaScript

$(document).ready(function () {
    var data = {
        labels: ["00:00 - 08:00", "08:00 - 16:00", "16:00 - 24:00"],
        datasets: [{
            label: "A",
            fillColor: "rgba(54, 174, 226, 1)",
            strokeColor: "rgba(54, 174, 226, 1)",
            highlightFill: "rgba(54, 174, 226, 1)",
            highlightStroke: "rgba(54, 174, 226, 1)",
            data: [2, 2, 3]
        }, {
            label: "B",
            fillColor: "rgba(149, 215, 17, 1)",
            strokeColor: "rgba(149, 215, 17, 1)",
            highlightFill: "rgba(149, 215, 17, 1)",
            highlightStroke: "rgba(149, 215, 17, 1)",
            data: [1, 3, 2]
        }, {
            label: "C",
            fillColor: "rgba(242, 145, 19, 1)",
            strokeColor: "rgba(242, 145, 19, 1)",
            highlightFill: "rgba(242, 145, 19, 1)",
            highlightStroke: "rgba(242, 145, 19, 1)",
            data: [3, 2, 3]
        }]
    };
    createTimeLine(data, true);



    $('#btnChange').on('click', function () {
        var today = new Date();
        var data = {
            datasets: [{
                label: "A",
                fillColor: "rgba(54, 174, 226, 1)",
                strokeColor: "rgba(54, 174, 226, 1)",
                highlightFill: "rgba(54, 174, 226, 1)",
                highlightStroke: "rgba(54, 174, 226, 1)",
                data: [2, 2, 3, 1, 3, 2, 2]
            }, {
                label: "B",
                fillColor: "rgba(149, 215, 17, 1)",
                strokeColor: "rgba(149, 215, 17, 1)",
                highlightFill: "rgba(149, 215, 17, 1)",
                highlightStroke: "rgba(149, 215, 17, 1)",
                data: [1, 3, 2, 3, 2, 3, 2]
            }, {
                label: "C",
                fillColor: "rgba(242, 145, 19, 1)",
                strokeColor: "rgba(242, 145, 19, 1)",
                highlightFill: "rgba(242, 145, 19, 1)",
                highlightStroke: "rgba(242, 145, 19, 1)",
                data:...