jube-fork/Jube.App/wwwroot/kendo/examples/line-charts/visuals.html

<!DOCTYPE html>
<html>
<head>
    <title>Custom Visuals</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"></div>
    </div>
    <script>
        function createChart() {
            var foreCast = [{
                temperature: 15,
                weather: "cloudy",
                day: "Monday"
            }, {
                temperature: 16,
                weather: "rainy",
                day: "Tuesday"
            }, {
                temperature: 20,
                weather: "cloudy",
                day: "Wednesday"
            }, {
                temperature: 23,
                weather: "sunny",
                day: "Thursday"
            }, {
                temperature: 17,
                weather: "cloudy",
                day: "Friday"
            }, {
                temperature: 20,
                weather: "sunny",
                day: "Saturday"
            }, {
                temperature: 25,
                weather: "sunny",
                day: "Sunday"
            }];

            $("#chart").kendoChart({
                dataSource: foreCast,
                title: {
                    text: "Forecast"
                },
                seriesDefaults: {
                    type: "line",
                    style: "smooth"
                },
                series: [{
                    field: "temperature",
                    categoryField: "day",
                    highlight: {
                        toggle: function (e) {
                            // Don't create a highlight overlay,
                            // we'll modify the existing visual instead
                            e.preventDefault();

                            var visual = e.visual;
                            var transform = null;
                            if (e.show) {
                                var center = visual.rect().center();

                                // Uniform 1.5x scale with the center as origin
                                transform = kendo.geometry.transform().scale(1.5, 1.5, center);
                            }

                            visual.transform(transform);
                        }
                    },
                    markers: {
                        size: 32,
                        visual: function (e) {
                            var src = kendo.format("../content/dataviz/chart/images/{0}.png", e.dataItem.weather);
                            var image = new kendo.drawing.Image(src, e.rect);
                            return image;
                        }
                    }
                }],
                valueAxis: {
                    labels: {
                        template: "#:value#℃"
                    }
                },
                categoryAxis: {
                    majorGridLines: {
                        visible: false
                    }
                },
                tooltip: {
                    visible: true,
                    format: "{0}%",
                    template: "#= category #: #= value #℃"
                }
            });
        }

        $(document).ready(createChart);
        $(document).bind("kendo:skinChange", createChart);
    </script>
</div>


    
</body>
</html>