jube-fork/Jube.App/wwwroot/kendo/examples/sparklines/index.html

<!DOCTYPE html>
<html>
<head>
    <title>Basic usage</title>
    <meta charset="utf-8">
    <link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.mobile.min.css" rel="stylesheet">
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/jszip.min.js"></script>
    <script src="../../js/kendo.all.min.js"></script>
    <script src="../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
    
        <a class="offline-button" href="../index.html">Back</a>
    
    <div id="example">
    <div class="demo-section k-content">
        <div class="climate">
            <h4>
                Climate control history
            </h4>
            <table class="history">
                <tr>
                    <td class="spark"><span id="press-log"></span></td>
                    <td class="value">980<span>mb</span></td>
                </tr>
                <tr>
                    <td class="spark"><span id="temp-log"></span></td>
                    <td class="value">21<span>&deg;C</span></td>
                </tr>
                <tr>
                    <td class="spark"><span id="hum-log"></span></td>
                    <td class="value">32<span>%</span></td>
                </tr>
            </table>
        </div>
        <div class="temperature">
            <h4>
                Temperature control
            </h4>
            <div class="stats">
                <span id="temp-range"></span>
            </div>
        </div>
        <div class="conditioner">
            <h4>
                Conditioner working time
            </h4>
            <ul class="pie-list stats">
                <li>MON <span id="stats-mon"></span></li>
                <li>TUE <span id="stats-tue"></span></li>
                <li>WED <span id="stats-wed"></span></li>
                <li>THU <span id="stats-thu"></span></li>
                <li>FRI <span id="stats-fri"></span></li>
                <li>SAT <span id="stats-sat"></span></li>
                <li>SUN <span id="stats-sun"></span></li>
            </ul>
        </div>
    </div>

    <script>
        function createSparklines() {
            // binding to array
            $("#press-log").kendoSparkline({
                data: [
                    936, 968, 1025, 999, 998, 1014, 1017, 1010, 1010, 1007,
                    1004, 988, 990, 988, 987, 995, 946, 954, 991, 984,
                    974, 956, 986, 936, 955, 1021, 1013, 1005, 958, 953,
                    952, 940, 937, 980, 966, 965, 928, 916, 910, 980
                ]
            });

            // User-set Sparkline type
            $("#temp-log").kendoSparkline({
                type: "column",
                data: [
                    16, 17, 18, 19, 20, 21, 21, 22, 23, 22,
                    20, 18, 17, 17, 16, 16, 17, 18, 19, 20,
                    21, 22, 23, 25, 24, 24, 22, 22, 23, 22,
                    22, 21, 16, 15, 15, 16, 19, 20, 20, 21
                ],
                tooltip: {
                    format: "{0} &deg;C"
                }
            });

            $("#hum-log").kendoSparkline({
                type: "area",
                data: [
                    71, 70, 69, 68, 65, 60, 55, 55, 50, 52,
                    73, 72, 72, 71, 68, 63, 57, 58, 53, 55,
                    63, 59, 61, 64, 58, 53, 48, 48, 45, 45,
                    63, 64, 63, 67, 58, 56, 53, 59, 51, 54
                ],
                tooltip: {
                    format: "{0} %"
                }
            });

            $("#temp-range").kendoSparkline({
                type: "bullet",
                data: [21, 23],
                valueAxis: {
                    min: 0,
                    max: 30,
                    plotBands: [{
                        from: 0, to: 15, color: "#787878", opacity: 0.15
                    }, {
                        from: 15, to: 22, color: "#787878", opacity: 0.3
                    }, {
                        from: 22, to: 30, color: "#787878", opacity: 0.15
                    }]
                },
                tooltip: {
                    visible: true
                }
            });

            // Pie "sparklines"
            $("#stats-mon").kendoSparkline({
                type: "pie",
                data: [14, 10]
            });

            $("#stats-tue").kendoSparkline({
                type: "pie",
                data: [8, 16]
            });

            $("#stats-wed").kendoSparkline({
                type: "pie",
                data: [8, 16]
            });

            $("#stats-thu").kendoSparkline({
                type: "pie",
                data: [12, 12]
            });

            $("#stats-fri").kendoSparkline({
                type: "pie",
                data: [6, 18]
            });

            $("#stats-sat").kendoSparkline({
                type: "pie",
                data: [1, 23]
            });

            $("#stats-sun").kendoSparkline({
                type: "pie",
                data: [5, 19]
            });
        }

        $(document).ready(createSparklines);
        $("#example").bind("kendo:skinChange", createSparklines);
    </script>

    <style>
        .temperature, .conditioner {
            margin: 0;
            padding: 30px 0 0 0;
        }

        .history {
            border-collapse: collapse;
            width: 100%;
        }
        .history td {
            padding: 0;
            vertical-align: bottom;
        }
        .history td.spark {
            line-height: 30px;
        }
        .history td.value {
            font-size: 1.6em;
            font-weight: normal;
            line-height: 20px;
        }
        .history td.value span {
            font-size: .5em;
            vertical-align: top;
            line-height: 30px;
        }
        .stats {
            text-align: center;
        }
        .pie-list {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }
        .pie-list li {
            display: inline-block;
            text-align: center;
            width: 34px;
            font-size: 10px;
        }
        #stats-mon,
        #stats-tue,
        #stats-wed,
        #stats-thu,
        #stats-fri,
        #stats-sat,
        #stats-sun {
            display: block;
            width: 34px;
            line-height: 30px;
        }
        #temp-range {
            width: 100%;
            line-height: 30px;
        }
    </style>
</div>


    
</body>
</html>