jube-fork/Jube.App/wwwroot/kendo/examples/sparklines/remote-data-binding.html

<!DOCTYPE html>
<html>
<head>
    <title>Binding to remote data</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 wide">
        <table id="weather" class="weather">
            <thead>
                <tr>
                    <th class="month">MONTH</th>
                    <th>MAX TEMP &deg;C</th>
                    <th>WIND SPEED KM/H</th>
                    <th>RAINFALL MM</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>

    <style>
        .demo-section .k-chart {
            width: auto;
            height: auto;
        }
        .k-grid {
            max-width: 700px;
            margin: 0 auto;
        }
    </style>

    <script id="template" type="text/x-kendo-template">
        <tr>
            <td class="month">${month}</td>
            <td><span class="sparkline-tmax"></span></td>
            <td><span class="sparkline-wnd"></span></td>
            <td><span class="sparkline-rain"></span></td>
        </tr>
    </script>

    <script>
        function createSparklines() {
            // Create a row template using the above definition
            var template = kendo.template($("#template").html());

            var months = [ "January", "February", "March", "April", "May", "June" ];

            $("#weather tbody").empty();
            for (var i = 0; i < months.length; i++) {
                var monthNumber = i + 1;

                var row = $("#weather tbody")
                    .append(template({ month: months[i] }))
                    .find("tr:last");

                var rowDataSource = new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: "https://demos.telerik.com/kendo-ui/service/Weather/SOFIA/2012/" + monthNumber,
                            dataType: "jsonp"
                        }
                    }
                });

                $(".sparkline-tmax", row).kendoSparkline({
                    dataSource: rowDataSource,
                    autoBind:false,
                    series: [{
                        type: "column",
                        field: "TMax",
                        color: "#ff0000",
                        negativeColor: "#0099ff"
                    }]
                });

                $(".sparkline-wnd", row).kendoSparkline({
                    dataSource: rowDataSource,
                    autoBind:false,
                    series: [{
                        field: "Wind",
                        color: "#5b8f00"
                    }]
                });

                $(".sparkline-rain", row).kendoSparkline({
                    dataSource: rowDataSource,
                    series: [{
                        type: "area",
                        field: "Rain",
                        color: "#0099ff"
                    }]
                });
            }
        }
        
        function createGrid() {
                $("#weather").kendoGrid({
                     scrollable: true
                });
            }

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


    
</body>
</html>