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

<!DOCTYPE html>
<html>
<head>
    <title>Selection</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 class="configurator">
    <div class="header">Configurator</div>
    <div class="box-col">
        <h4>Mousewheel</h4>
        <div class="box-col">
            <ul class="options">
                <li>
                    <input id="reverse" type="checkbox" />
                    <label for="reverse">Reverse</label>
                </li>
            </ul>
        </div>
        <div class="box-col">
            <ul class="options">
                <li>
                    <label for="zoom">Zoom direction</label>
                    <select id="zoom">
                        <option value="both">Both</option>
                        <option value="left">Left</option>
                        <option value="right">Right</option>
                    </select>
                </li>
            </ul>
        </div>
    </div>
</div>

<div class="demo-section k-content wide">
    <div id="chart"></div>
</div>

<script>
    function createChart() {
        $("#chart").kendoChart({
            title: {
                text: "Olympic Medals won by USA"
            },
            legend: {
                position: "bottom"
            },
            seriesDefaults: {
                type: "column"
            },
            series: [{
                name: "Gold Medals",
                data: [40, 32, 34, 36, 45, 33, 34, 83, 36, 37, 44, 37, 35, 36, 46],
                color: "#f3ac32"
            }, {
                name: "Silver Medals",
                data: [19, 25, 21, 26, 28, 31, 35, 60, 31, 34, 32, 24, 40, 38, 29],
                color: "#b8b8b8"
            }, {
                name: "Bronze Medals",
                data: [17, 17, 16, 28, 34, 30, 25, 30, 27, 37, 25, 33, 26, 36, 29],
                color: "#bb6e36"
            }],
            categoryAxis: {
                categories: [1952, 1956, 1960, 1964, 1968, 1972, 1976, 1984, 1988, 1992, 1996, 2000, 2004, 2008, 2012],
                majorGridLines: {
                    visible: false
                },
                select: {
                    from: 2,
                    to: 5
                }
            },
            selectStart: onSelectStart,
            select: onSelect,
            selectEnd: onSelectEnd
        });
    }

    function formatRange(e) {
        var categories = e.axis.categories;

        return kendo.format("{0} - {1} ({2} - {3})",
            e.from, e.to,
            categories[e.from],
            // The last category included in the selection is at (to - 1)
            categories[e.to - 1]
        );
    }

    function onSelectStart(e) {
        kendoConsole.log(kendo.format("Select start :: {0}", formatRange(e)));
    }

    function onSelect(e) {
        kendoConsole.log(kendo.format("Select :: {0}", formatRange(e)));
    }

    function onSelectEnd(e) {
        kendoConsole.log(kendo.format("Select end :: {0}", formatRange(e)));
    }

    function setOptions() {
        var chart = $("#chart").data("kendoChart");

        $.extend(true /* deep */, chart.options, {
            categoryAxis: {
                select: {
                    mousewheel: {
                        reverse: $("#reverse").prop("checked"),
                        zoom: $("#zoom").val()
                    }
                }
            }
        });

        chart.refresh();
    }

    $("#reverse, #zoom").click(setOptions);

    $(document).ready(createChart);
    $("#example").bind("kendo:skinChange", createChart);

</script>



    
</body>
</html>