jube-fork/Jube.App/wwwroot/kendo/examples/bullet-charts/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">
        <div id="chart-mmHg"></div>
        <div id="chart-hPa"></div>
    </div>
    <script>
        function createChart() {
            var mmhgData = [
                    { current: 750, target: 762.5, category: 1 }, { current: 754, target: 768.5, category: 2 },
                    { current: 762, target: 770, category: 3 }, { current: 764, target: 773, category: 4 },
                    { current: 753, target: 760, category: 5 }, { current: 748, target: 765, category: 6 },
                    { current: 740, target: 760, category: 7 }, { current: 755, target: 758, category: 8 },
                    { current: 765, target: 768, category: 9 }, { current: 776, target: 783, category: 10 },
                    { current: 768, target: 770, category: 11 }, { current: 760, target: 762.5, category: 12 },
                    { current: 763, target: 768, category: 13 }, { current: 758, target: 766, category: 14 }
                ],
                hPaData = [
                    { current: 1001, target: 1017, category: 1 }, { current: 1005, target: 1024, category: 2 },
                    { current: 1016, target: 1026, category: 3 }, { current: 1019, target: 1030, category: 4 },
                    { current: 1004, target: 1013, category: 5 }, { current: 998, target: 1020, category: 6 },
                    { current: 987, target: 1013, category: 7 }, { current: 1006.5, target: 1010, category: 8 },
                    { current: 1020, target: 1023, category: 9 }, { current: 1035, target: 1044, category: 10 },
                    { current: 1025, target: 1026, category: 11 }, { current: 1013, target: 1017, category: 12 },
                    { current: 1017, target: 1023, category: 13 }, { current: 1010, target: 1021, category: 14 }
               ];

            $("#chart-mmHg").kendoChart({
                legend: {
                    visible: false
                },
                dataSource: {
                    data: mmhgData
                },
                series: [{
                    type: "verticalBullet",
                    color: "#ffffff",
                    opacity: .8,
                    target: {
                        color: "#ffffff"
                    },
                    currentField: "current",
                    targetField: "target",
                    categoryField: "category"
                }],
                categoryAxis: {
                    majorGridLines: {
                        visible: false
                    },
                    majorTicks: {
                        visible: false
                    },
                    title: {
                        text: "mmHg"
                    }
                },
                valueAxis: [{
                    plotBands: [{
                        from: 715, to: 752, color: "#2890cc", opacity: .5
                    }, {
                        from: 752, to: 772, color: "#2890cc", opacity: .7
                    }, {
                        from: 772, to: 790, color: "#2890cc", opacity: .5
                    }, {
                        from: 761, to: 761.5, color: "#ff0000", opacity: 1
                    }],
                    majorGridLines: {
                        visible: false
                    },
                    min: 715,
                    max: 790,
                    minorTicks: {
                        visible: true
                    }
                }],
                tooltip: {
                    visible: true,
                    template: "Maximum: #= value.target # <br /> Average: #= value.current #"
                }
            });

            $("#chart-hPa").kendoChart({
                legend: {
                    visible: false
                },
                dataSource: {
                    data: hPaData
                },
                series: [{
                    type: "verticalBullet",
                    color: "#ffffff",
                    opacity: .8,
                    target: {
                        color: "#ffffff"
                    },
                    currentField: "current",
                    targetField: "target",
                    categoryField: "category"
                }],
                categoryAxis: {
                    majorGridLines: {
                        visible: false
                    },
                    axisCrossingValue: 14,
                    majorTicks: {
                        visible: false
                    },
                    title: {
                        text: "hPa"
                    }
                },
                valueAxis: [{
                    plotBands: [{
                        from: 955, to: 1002, color: "#8ebc00", opacity: .6
                    }, {
                        from: 1002, to: 1027, color: "#8ebc00", opacity: .8
                    }, {
                        from: 1027, to: 1050, color: "#8ebc00", opacity: .6
                    }, {
                        from: 1014, to: 1014.5, color: "#ff0000", opacity: 1
                    }],
                    majorGridLines: {
                        visible: false
                    },
                    min: 955,
                    max: 1050,
                    minorTicks: {
                        visible: true
                    }
                }],
                tooltip: {
                    visible: true,
                    template: "Maximum: #= value.target # <br /> Average: #= value.current #"
                }
            });
        }

        $(document).ready(createChart);
        $(document).bind("kendo:skinChange", createChart);
    </script>
    <style>
        .demo-section {
         text-align: center;
        }
        .k-chart {
            display: inline-block;
            width: 300px;
        }
    </style>
</div>


    
</body>
</html>