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

<!DOCTYPE html>
<html>
<head>
    <title>Overview</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="demo-section k-content wide">
    <div id="column-chart"></div>

    <div class="flex-container demo-section k-content wide">
        <div id="funnel-chart"></div>
        <div id="donut-chart"></div>
        <div id="bar-chart"></div>
    </div>

    <div id="stock-chart"></div>
</div>

<script>
    function createChart() {
        $("#column-chart").kendoChart({
            dataSource: {
                transport: {
                    read: {
                        url: "../content/dataviz/js/properties-sales.json",
                        dataType: "json"
                    }
                },
                sort: {
                    field: "year",
                    dir: "asc"
                }
            },
            title: {
                text: "Sales by Product Category Over Time"
            },
            legend: {
                position: "bottom"
            },
            series:
                [{
                    type: "column",
                    field: "vacantLand",
                    categoryField: "year",
                    name: "Vacant Land",
                    color: "#2185b4"
                }, {
                    type: "column",
                    field: "residentialProperties",
                    categoryField: "year",
                    name: "Residential Properties",
                    color: "#319fd2"
                }, {
                    type: "column",
                    field: "commercialProperties",
                    categoryField: "year",
                    name: "Commercial Properties",
                    color: "#3eaee2"
                }, {
                    type: "line",
                    field: "total",
                    categoryField: "year",
                    name: "Total Sales",
                    axis: "axis",
                    color: "red"
                }],
            categoryAxis: {
                axisCrossingValue: [0, 10],
                majorGridLines: {
                    visible: false
                }
            },
            valueAxis: [{
                title: {
                    text: "Sales"
                },
                majorUnit: 1000000,
                labels: {
                    template: "#= formatSales(value) #"
                },
                line: {
                    visible: false
                }
            },
            {
                 name: "axis",
                 title: {
                     text: "Total sales"
                 },
                 majorUnit: 2000000,
                 labels: {
                     template: "#= formatSales(value) #"
                },
                line: {
                    visible: false
            }
            }],
            tooltip: {
                visible: true,
                format: "N0"
            }
        });

        $("#funnel-chart").kendoChart({
            dataSource: {
                transport: {
                    read: {
                        url: "../content/dataviz/js/funnel-sales.json",
                        dataType: "json"
                    }
                },
                sort: {
                    field: "value",
                    dir: "desc"
                }
            },
            legend: {
                visible: false
            },
            title: {
                text: "Sales Funnel 2019",
                position: "top"
            },
            seriesDefaults: {
                type: "funnel",
                dynamicSlope: false,
                dynamicHeight: false,
                labels: {
                    visible: true,
                    color: "white",
                    format: "{0:c0}" 
                }
            },
            seriesColors: ["#166f99", "#2185b4", "#3eaee2", "#89CFF0", "#B0DFE5"],
            series: [{
                field: "value",
                categoryField: "category",
                segmentSpacing: 2
            }],
            tooltip: {
                visible: true,
                template: "#= category #"
            }
        });

        $("#donut-chart").kendoChart({
            dataSource: {
                transport: {
                    read: {
                        url: "../content/dataviz/js/sales-per-region.json",
                        dataType: "json"
                    }
                }
            },
            title: {
                position: "top",
                text: "2019 Sales per Region",
                margin: { bottom: 25 }
            },
            legend: {
                visible: false
            },
            chartArea: {
                background: "transparent"
            },
            seriesColors: ["#166f99", "#2185b4", "#319fd2", "#3eaee2", "#89CFF0", "#B0DFE5"],
            seriesDefaults: {
                type: "donut",
                startAngle: 300
            },
            series: [{
                field: "sales",
                categoryField: "region",
                visibleInLegendField: "visibleInLegend",
                padding: 40,
                startAngle: 270,
                labels: {
                    visible: true,
                    position: "outsideEnd",
                    background: "transparent",
                    template: "#= category #: \n #= value#%"
                }
            }],
            tooltip: {
                visible: true,
                template: "#= category #: #= value #%"
            }
        });

        $("#bar-chart").kendoChart({
            dataSource: {
                transport: {
                    read: {
                        url: "../content/dataviz/js/sales-performers.json",
                        dataType: "json"
                    }
                },
                sort: {
                    field: "salesAmount",
                    dir: "asc"
                }
            },
            title: {
                text: "Top 5 Sales Performers"
            },
            legend: {
                visible: false
            },
            seriesDefaults: {
                type: "bar"
            },
            series:
                [{
                    field: "salesAmount",
                    categoryField: "salesPerson",
                    name: "Sales amount",
                    color: setSalesPerformersBarsColor,
                    gap: 1
                }],
            categoryAxis: {
                labels: {
                    template: "#= categoryAxisLabelTemplate(data.value) #"
                },
                majorGridLines: {
                    visible: false
                }
            },
            valueAxis: {
                line: {
                    visible: false
                },
                labels: {
                    template: "#= formatPerformersSales(value) #"
                },
                majorUnit: 500000,
                line: {
                    visible: false
                }
            },
            tooltip: {
                visible: true,
                template: "#= formatTooltip(value) #"
            }
        });

        $("#stock-chart").kendoStockChart({
            dataSource: {
                transport: {
                    read: {
                        url: "../content/dataviz/js/boeing-stock.json",
                        dataType: "json"
                    }
                },
                schema: {
                    model: {
                        fields: {
                            Date: { type: "date" }
                        }
                    }
                }
            },
            title: {
                text: "Company Stocks"
            },
            dateField: "Date",
            series: [{
                type: "candlestick",
                openField: "Open",
                highField: "High",
                lowField: "Low",
                closeField: "Close",
                color: itemColor
            }],
            categoryAxis: {
                labels: {
                    rotation: "auto"
                }
            },
            navigator: {
                series: {
                    type: "area",
                    field: "Close"
                },
                select: {
                    from: "2009/02/05",
                    to: "2011/10/07"
                },
                categoryAxis: {
                    labels: {
                        rotation: "auto"
                    }
                }
            }
        });
    }

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

    function formatSales(value) {
        if (value == 0) {
            return 0;
        }
        else {
            // hundreds
            if (value <= 999) {
                return value;
            }
            // thousands
            else if (value >= 1000 && value <= 999999) {
                return "$" + (value / 1000) + ".00K";
            }
            // millions
            else if (value >= 1000000 && value <= 999999999) {
                return "$" + (value / 1000000) + ".00M";
            }
        }
    };

    function categoryAxisLabelTemplate(value) {
        return value.split(" ").join("\n");
    };

    function formatPerformersSales(value) {
        if (value == 0) {
            return 0;
        }
        else {
            // hundreds
            if (value <= 999) {
                return value;
            }
            // thousands
            else if (value >= 1000 && value <= 999999) {
                return "$" + (value / 1000) + "K";
            }
            // millions
            else if (value >= 1000000 && value <= 999999999) {
                return "$" + (value / 1000000) + "M";
            }
        }
    };

    function formatTooltip(value) {
        return "$" + kendo.toString(value, "#,##");
    };

    function setSalesPerformersBarsColor(point) {
        switch (point.index) {
            case 0: {
                return "#2185b4";
            };
            case 1: {
                return "#319fd2";
            };
            case 2: {
                return "#3eaee2";
            };
            case 3: {
                return "#89CFF0";
            };
            case 4: {
                return "#B0DFE5";
            };
        };
    };

    var prevItemValue;
    function itemColor(e) {
        var currentItemValue = e.dataItem;
        var currentLargerThenPrev = !prevItemValue || currentItemValue.Volume >= prevItemValue.Volume;
        if (currentItemValue.Volume) {
            prevItemValue = currentItemValue;
        }
        return currentLargerThenPrev ? '#B0DFE5' : '#166f99';
    }

    $(window).on("resize", function () {
        setDonutChartLabelsPosition()
    });

    $(document).ready(function () {
        setDonutChartLabelsPosition()
    });

    function setDonutChartLabelsPosition() {
        var donutChart = $("#donut-chart").data("kendoChart");
        var donutSeries = donutChart.options.series;
        if ($(window).width() <= 716) {
            donutSeries[0].labels.position = "center";
            donutChart.setOptions({
                series: donutSeries
            });
        }
        else {
            donutSeries[0].labels.position = "outsideEnd";
            donutChart.setOptions({
                series: donutSeries
            });
        }
    }
</script>


<style>
    .flex-container {
        display: flex;
        flex-wrap: wrap;
        margin: 40px 0 40px 0;
    }

    #funnel-chart {
        flex-grow: 1;
    }

    #donut-chart {
        flex-basis: 45%;
        margin: 0 20px 0 20px;
        background: center no-repeat url('../content/shared/styles/world-map.png');
        background-size: contain;
    }

    #bar-chart {
        flex-grow: 1;
    }

    media only screen and (max-width: 1815px) and (min-width: 1500px) {
      #donut-chart {
        flex-basis: 60%;
        }
    }
    media only screen and (max-width: 1500px) {
      #donut-chart {
        flex-basis: 100%;
        }
    }
</style>



    
</body>
</html>