jube-fork/Jube.App/wwwroot/kendo/examples/chart-api/benchmark.html

<!DOCTYPE html>
<html>
<head>
    <title>Benchmark</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="configurator">
        <div class="header">Configurator</div>
        <div class="box-col" id="canvasSelector">
            <input id="useCanvas" type="checkbox" checked="checked" />
            <label for="useCanvas">Use Canvas</label>
        </div>
        <div class="box-col">
            <div id="fpsCount">-- FPS / (-- ms per frame)</div>
        </div>
        <div class="box-col">
            <button id="playButton" class="k-button" style="float: right;">Start update</button>
        </div>
    </div>
    <div class="demo-section k-content wide">
        <div id="chart"></div>
    </div>
    <script>
        var TICKS_PER_DAY = 86400000,
            POINTS = 20,
            lastDate = new Date("2000/01/20"),
            playing,
            frames,
            fpsUpdateInterval,
            categoryList = [],
            stocks = [[], [], []];

        function createChart() {
            $("#chart").kendoChart({
                renderAs: "canvas",
                title: {
                    text: "Stock prices"
                },
                legend: {
                    visible: false
                },
                series: [{
                    type: "column",
                    name: "Stock A",
                    color: "#ffba00",
                    overlay: null,
                    data: stocks[0]
                }, {
                    type: "line",
                    name: "Stock B",
                    color: "#565656",
                    data: stocks[1]
                }, {
                    type: "line",
                    name: "Stock C",
                    color: "#ffba00",
                    data: stocks[2]
                }],
                valueAxis: {
                    labels: {
                        format: "${0}"
                    },
                    line: {
                        visible: false
                    }
                },
                categoryAxis: {
                    categories: categoryList,
                    majorGridLines: {
                        visible: false
                    }
                },
                transitions: false
            });
        }

        $(document).on("kendoReady", function () {
            initializeData();

            setTimeout(function () {
                // Initialize the chart with a delay to make sure
                // the initial animation is visible
                createChart();

                $("#example").bind("kendo:skinChange", function (e) {
                    createChart();
                });
            }, 400);
        });

        function initializeData() {
            for (var i = 0; i < POINTS; i++) {
                addPoint();
            }
        }

        function play() {
            var start = new Date();

            frames = 0;
            playing = true;
            step();

            fpsUpdateInterval = setInterval(function () {
                var time = (new Date() - start) / 1000,
                    fps = (frames / time),
                    delay = Math.round(1000 / fps);

                $("#fpsCount").html(kendo.format(
                    "FPS: {0:N1} ({1} ms/frame)",
                    fps, delay
                ));

                start = new Date();
                frames = 0;
            }, 1000);
        }

        function stop() {
            clearInterval(fpsUpdateInterval);
            playing = false;
            fpsUpdateInterval = null;
        }

        function step() {
            addPoint();
            $("#chart").data("kendoChart").refresh();
            frames++;
            if (playing) {
                kendo.animationFrame(step);
            }
        }

        function addPoint() {
            var stockData,
                change,
                lastValue;

            // Shift existing categories to the left and add the next date at the end
            lastDate = new Date(lastDate.getTime() + TICKS_PER_DAY);
            categoryList.push((lastDate.getMonth() + 1) + "/" + (lastDate.getDay() + 1));

            if (categoryList.length > POINTS) {
                categoryList.shift();
            }

            for (var i = 0; i < stocks.length; i++) {
                stockData = stocks[i];
                change = (Math.random() > 0.5 ? 1 : - 1) * Math.random() * 10;
                lastValue = stockData[stockData.length - 1] || Math.random() * 10;

                // Add a new pseudo-random data point
                stockData.push(Math.min((i + 1) * 20, Math.max((i + 1) * 10, lastValue + change)));

                // Shift the data points of each series to the left
                if (stockData.length > POINTS) {
                    stockData.shift();
                }
            }
        }

        $("#playButton").click(function () {
            var button = $(this);

            if (playing) {
                stop();
                button.text("Start update");
            } else {
                play();
                button.html("Pause update");
            }
        });

        if (kendo.support.canvas) {
            $("#useCanvas").click(function () {
                var checked = $(this).prop("checked");

                var chart = $("#chart").data("kendoChart");
                chart.options.renderAs = checked ? "canvas" : "";
                chart.redraw();
            });
        } else {
            $("#useCanvas").prop("checked", false).attr("disabled", true);
        }

    </script>
</div>


    
</body>
</html>