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

<!DOCTYPE html>
<html>
<head>
    <title>Binding to local 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">
        <h4>Australia - Hourly Compensation Costs in Manufacturing /USD/</h4>
        <table id="stats" class="stats">
            <thead>
                <tr>
                    <th class="year">Year</th>
                    <th class="hourly">Compensation costs</th>
                    <th class="change">Annual change %</th>
                    <th class="direct">Direct Pay</th>
                    <th class="benefits">Benefit components</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>

    <script id="template" type="text/x-kendo-template">
        <tr class="rows">
            <td class="year">${year}</td>
            <td class="hourly"><span class="bar-hourly" style="width: 130px;"></span></td>
            <td class="change"><span class="bar-change" style="width: 130px;"></span></td>
            <td class="direct"><span class="bar-direct" style="width: 130px;"></span></td>
            <td class="benefits"><span class="bar-benefits" style="width: 130px;"></span></td>
        </tr>
    </script>

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

            $("#stats tbody").empty();
            // "data" is declared at the end of the page
            for (var i = 0; i < data.length; i++) {
                var rowData = data[i];

                var row = $("#stats tbody")
                    .append(template(rowData))
                    .find("tr:last");

                $(".bar-hourly", row).kendoSparkline({
                    type: "bar",
                    renderAs: "canvas",
                    data: [rowData.hourly],
                    valueAxis: {
                        max: 50
                    }
                });

                $(".bar-change", row).kendoSparkline({
                    type: "bar",
                    renderAs: "canvas",
                    series: [{
                        data: [rowData.change],
                        negativeColor: "#808080"
                    }],
                    valueAxis: {
                        min: -40,
                        max: 40
                    },
                    categoryAxis: {
                        visible: true,
                        majorTicks: {
                            visible: false
                        }
                    }
                });

                $(".bar-direct", row).kendoSparkline({
                    type: "bar",
                    renderAs: "canvas",
                    data: [rowData.direct],
                    valueAxis: {
                        max: 50
                    }
                });

                $(".bar-benefits", row).kendoSparkline({
                    type: "bar",
                    renderAs: "canvas",
                    dataSource: {
                        data: rowData.benefits,
                        group: {
                            field: "type",
                            dir: "asc"
                        }
                    },
                    series: [{
                        field: "value"
                    }],
                    valueAxis: {
                        max: 10
                    }
                });
            }
        }

        var data = [{
            year: "2011",
            hourly: 46.29,
            change: 16.69,
            direct: 32.09,
            benefits: [{
                type: "Social",
                value: 9.25
            }, {
                type: "Direct",
                value: 4.41
            }]
        },{
            year: "2010",
            hourly: 39.67,
            change: 18.7,
            direct: 29.73,
            benefits: [{
                type: "Social",
                value: 7.93
            }, {
                type: "Direct",
                value: 3.78
            }]
        },{
            year: "2009",
            hourly: 33.42,
            change: -6.93,
            direct: 31.69,
            benefits: [{
                type: "Social",
                value: 6.78
            }, {
                type: "Direct",
                value: 3.17
            }]
        },{
            year: "2008",
            hourly: 35.91,
            change: 7.61,
            direct: 31.87,
            benefits: [{
                type: "Social",
                value: 7.39
            }, {
                type: "Direct",
                value: 3.39
            }]
        },{
            year: "2007",
            hourly: 33.37,
            change: 14.4,
            direct: 28.41,
            benefits: [{
                type: "Social",
                value: 6.86
            }, {
                type: "Direct",
                value: 3.15
            }]
        },{
            year: "2006",
            hourly: 29.17,
            change: 2.17,
            direct: 25.10,
            benefits: [{
                type: "Social",
                value: 6.07
            }, {
                type: "Direct",
                value: 2.75
            }]
        },{
            year: "2005",
            hourly: 28.55,
            change: 6.73,
            direct: 24.20,
            benefits: [{
                type: "Social",
                value: 6.08
            }, {
                type: "Direct",
                value: 2.67
            }]
        },{
            year: "2004",
            hourly: 26.75,
            change: 18.1,
            direct: 23.34,
            benefits: [{
                type: "Social",
                value: 5.74
            }, {
                type: "Direct",
                value: 2.50
            }]
        },{
            year: "2003",
            hourly: 22.65,
            change: 30.02,
            direct: 21.16,
            benefits: [{
                type: "Social",
                value: 4.79
            }, {
                type: "Direct",
                value: 2.12
            }]
        },{
            year: "2002",
            hourly: 17.42,
            change: 15.98,
            direct: 17.37,
            benefits: [{
                type: "Social",
                value: 3.61
            }, {
                type: "Direct",
                value: 1.64
            }]
        },{
            year: "2001",
            hourly: 15.02,
            change: -8.69,
            direct: 16.06,
            benefits: [{
                type: "Social",
                value: 2.92
            }, {
                type: "Direct",
                value: 1.44
            }]
        },{
            year: "2000",
            hourly: 16.45,
            change: -9.32,
            direct: 16.06,
            benefits: [{
                type: "Social",
                value: 3.08
            }, {
                type: "Direct",
                value: 1.59
            }]
        },{
            year: "1999",
            hourly: 18.14,
            change: 5.77,
            direct: 18.13,
            benefits: [{
                type: "Social",
                value: 3.42
            }, {
                type: "Direct",
                value: 1.75
            }]
        },{
            year: "1998",
            hourly: 17.15,
            change: -9.40,
            direct: 18.37,
            benefits: [{
                type: "Social",
                value: 3.17
            }, {
                type: "Direct",
                value: 1.66
            }]
        },{
            year: "1997",
            hourly: 18.93,
            change: -1.25,
            direct: 18.17,
            benefits: [{
                type: "Social",
                value: 3.46
            }, {
                type: "Direct",
                value: 1.84
            }]
        }];

        function createGrid() {
                $("#stats").kendoGrid({
                     scrollable: true
                });
            }

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

</div>


    
</body>
</html>