jube-fork/Jube.App/wwwroot/kendo/examples/financial/stock-history.html

<!DOCTYPE html>
<html>
<head>
    <title>Stock History</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 hidden-on-narrow">
        <h3 class="example-title">Stock<span>History</span></h3>
        <h4 class="example-description">Kendo UI Data Visualization Project</h4>

        <div id="year-filtering-tabs" class="filtering-tabs"></div>

        <h5 class="example-subtitle">Closing stock prices</h5>
        <span class="metric">throughout <span class="selected-year"></span></span>

        <div id="chart-type-chooser">
            <strong class="example-subtitle radio-group-label">Chart type</strong>

            <ul class="radio-group">
                <li><input type="radio" name="chart-type" value="area" id="chart-type-area" checked><label for="chart-type-area">Area</label></li>
                <li><input type="radio" name="chart-type" value="line" id="chart-type-line"><label for="chart-type-line">Line</label></li>
            </ul>
        </div>

        <div id="yearly-stock-prices"></div>

        <script type="text/x-kendo-template" id="company-info-template">
            <dl class="stat first">
                <dt class="example-subtitle">
                    #= name # stock price
                    <span class="metric">US dollars</span>
                </dt>
                <dd class="eoy-closing"></dd>
            </dl>

            <div class="company-trends">
                <div class="example-subtitle">
                    Stock market trends
                    <span class="metric">throughout the year</span>
                </div>

                <dl class="stat trend-container highest-container">
                    <dt class="example-subtitle">Highest stock price</dt>
                    <dd class="highest"></dd>
                    <dd class="sparkline highest-sparkline"></dd>
                </dl>

                <dl class="stat trend-container lowest-container">
                    <dt class="example-subtitle">Lowest stock price</dt>
                    <dd class="lowest"></dd>
                    <dd class="sparkline lowest-sparkline"></dd>
                </dl>

                <dl class="stat trend-container">
                    <dt class="example-subtitle">YoY change</dt>
                    <dd class="relative-value"></dd>
                    <dd class="sparkline relative-value-sparkline"></dd>
                </dl>

                <div class="relative-value-pie"></div>
            </div>

            <div class="separator"></div>

            <dl class="stat first">
                <dt class="example-subtitle">
                    volume of traded stocks
                    <span class="metric">traded stocks</span>
                </dt>
                <dd class="volume"></dd>
            </dl>

            <div class="volume-chart"></div>
        </script>

        <div id="company-filtering-tabs" class="filtering-tabs"></div>

        <div class="company-info" id="google"></div>
    </div>
    <div class="responsive-message"></div>
    <script>
        $(document).ready(function () {
            setTimeout(setup, 500);
        });

        function setup() {
            var selectedYear = 2011;

            var stocksDataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: function() {
                            return "../content/dataviz/dashboards/stock-data-" + selectedYear + ".json";
                        },
                        dataType: "json"
                    }
                },

                group: {
                    field: "symbol"
                },

                sort: {
                    field: "date",
                    dir: "asc"
                },

                schema: {
                    model: {
                        fields: {
                            date: {
                                type: "date"
                            }
                        }
                    }
                },

                change: function() {
                    $("[name=chart-type][value=area]").prop("checked", true);

                    var view = this.view(),
                        index = $("#company-filtering-tabs").data("kendoTabStrip").select().index();

                    // populate detailed stock prices
                    populateStockPrices(view[index], index);
                }
            });

            var defaultSeriesColors = [ "#70b5dd", "#1083c7", "#1c638d" ];

            function populateStockPrices(data, companyIndex) {
                var container = $(".company-info"),
                    yearlyStockValues = data.items,
                    highest = yearlyStockValues[0].high,
                    lowest = yearlyStockValues[0].low,
                    volume = 0,
                    metric = "",
                    format = function(number) {
                        return kendo.toString(number, "n");
                    },
                    sparklineOptions = function(field, color, data) {
                        return {
                            renderAs: "canvas",
                            dataSource: data || yearlyStockValues,
                            series: [{
                                field: field,
                                color: color
                            }],
                            seriesDefaults: {
                                type: "line",
                                markers: { visible: false },
                                line: { width: 2 }
                            },
                            axisDefaults: {
                                visible: false,
                                majorGridLines: { visible: false }
                            },
                            legend: { visible: false }
                        };
                    };

                $.each(yearlyStockValues, function() {
                    highest = this.high > highest ? this.high : highest;
                    lowest = this.low < lowest ? this.low : lowest;
                    volume += this.volume;
                });

                if (volume > 999999999) {
                    volume /= 1000000000;
                    metric = "billions stocks";
                } else if (volume > 999999) {
                    volume /= 1000000;
                    metric = "millions stocks";
                }

                function yearlyRelativeValue(stockValues) {
                    return stockValues[stockValues.length-1].close / stockValues[0].open * 100;
                }

                var relativeValues = $.map(yearlyStockValues, function(item, index) {
                    var value = 100;

                    if (index > 0) {
                        value = item.close * 100 / yearlyStockValues[index - 1].open;
                    }

                    return { value: value };
                });

                var companyRelativeGain = $.map(stocksDataSource.view(), function(data, index) {
                    return {
                        value: yearlyRelativeValue(data.items) - 100
                    };
                });

                container
                    .find(".eoy-closing").text(format(yearlyStockValues[yearlyStockValues.length - 1].close)).end()
                    .find(".highest").text(format(highest)).end()
                    .find(".lowest").text(format(lowest)).end()
                    .find(".lowest-sparkline").kendoChart(sparklineOptions("low", "#cd1533")).end()
                    .find(".highest-sparkline").kendoChart(sparklineOptions("high", "#639514")).end()
                    .find(".first dt .metric").eq(1).text(metric).end().end()
                    .find(".volume").text(format(volume)).end()
                    .find(".relative-value").text(format(yearlyRelativeValue(yearlyStockValues) - 100) + "%").end()
                    .find(".relative-value-sparkline").kendoChart(sparklineOptions("value", "#4da3d5", relativeValues)).end()
                    .find(".relative-value-pie").kendoChart({
                        renderAs: "canvas",
                        dataSource: companyRelativeGain,
                        seriesDefaults: {
                            type: "pie",
                            overlay: {
                                gradient: "none"
                            }
                        },
                        seriesColors: defaultSeriesColors,
                        series: [{
                            field: "value"
                        }],
                        legend: { visible: false }
                    }).end()
                    .find(".volume-chart").kendoChart({
                        renderAs: "canvas",
                        dataSource: yearlyStockValues,
                        series: [{
                            field: "volume",
                            categoryField: "date",
                            gap: 0.7
                        }],
                        seriesDefaults: {
                            type: "column",
                            color: "#1c638d",
                            border: {
                                width: 0
                            },
                            overlay: {
                                gradient: "none"
                            }
                        },
                        axisDefaults: {
                            majorGridLines: { visible: false },
                            majorTicks: { visible: false }
                        },
                        categoryAxis: {
                            labels: {
                                format: "MMM",
                                color: "#727f8e"
                            }
                        },
                        tooltip: {
                            visible: true
                        },
                        valueAxis: {
                            visible: false
                        },
                        legend: { visible: false }
                    }).end();
            }

            $("#yearly-stock-prices").kendoChart({
                renderAs: "canvas",
                dataSource: stocksDataSource,

                autoBind: false,

                seriesDefaults: {
                    type: "area",
                    overlay: {
                        gradient: "none"
                    },
                    markers: {
                        visible: false
                    },
                    majorTickSize: 0,
                    opacity: .8
                },

                series: [{
                    field: "close",
                    categoryField: "date"
                }],

                seriesColors: defaultSeriesColors,

                valueAxis: {
                    line: {
                        visible: false
                    },

                    labels: {
                        format: "${0}",
                        skip: 2,
                        step: 2,
                        color: "#727f8e"
                    }
                },

                categoryAxis: {
                    labels: {
                        format: "MMM",
                        color: "#727f8e"
                    },

                    line: {
                        visible: false
                    },

                    majorTicks: {
                        visible: false
                    },

                    majorGridLines: {
                        visible: false
                    }
                },

                legend: {
                    visible: false
                }
            });

            $("[name=chart-type]").on("click", function() {
                var chart = $("#yearly-stock-prices").data("kendoChart"),
                    allSeries = chart.options.series,
                    newSeriesType = $(this).val();

                chart.options.seriesDefaults.type = newSeriesType;

                for (var series in allSeries) {
                    allSeries[series].type = newSeriesType;
                    allSeries[series].opacity = newSeriesType == "area" ? .8 : 1;
                }

                chart.redraw();
            });

            var companyInfoTemplate = kendo.template($("#company-info-template").html());

            $(".company-info").each(function() {
                var panel = $(this);
                panel.html(companyInfoTemplate({ name: panel.attr("id") }));
            });

            $("#year-filtering-tabs").kendoTabStrip({
                dataSource: ["2007","2008","2009","2010","2011"],
                change: function(e) {
                    selectedYear = this.value();

                    $(".selected-year").text(selectedYear);

                    stocksDataSource.read();
                }
            }).data("kendoTabStrip").select(4);

            $("#company-filtering-tabs").kendoTabStrip({
                dataSource: ["Google", "Apple", "Amazon"],
                change: function() {
                    var company = this.value().toLowerCase(),
                        index = this.select().index(),
                        view = stocksDataSource.view();

                    if (view.length) {
                        $(".company-info").html(companyInfoTemplate({ name: company }));

                        populateStockPrices(view[index], index);
                    }
                }
            })
                .find(".k-item").each(function(index) {
                    var color = defaultSeriesColors[index];

                    $(this).css({
                        color: color,
                        borderColor: color
                    });
                }).end()
                .data("kendoTabStrip").select(0);

        }
    </script>

    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300" rel="stylesheet">
</div>

<style>
    .demo-section {
        padding: 20px 25px;
        margin: 0 auto;
    }

    .example-title,
    .example-subtitle,
    .metric,
    .example-description,
    .stat dd {
        font-family: 'Open Sans Condensed', Verdana, sans-serif;
    }

    .example-title,
    .example-subtitle {
        text-transform: uppercase;
    }

    .example-title {
        color: #2b8abe;
        font-size: 48px;
        font-weight: 300;
    }

    .example-title span,
    .first dd {
        font-weight: 700;
    }

    .example-description {
        font-size: 18px;
        font-weight: 300;
        color: #1a364a;
    }

    .example-subtitle {
        font-size: 13px;
        font-weight: 700;
        margin-bottom: 0;
    }

    .metric {
        display: block;
        text-transform: none;
        font-weight: 300;
        font-size: 12px;
        color: #727f8e;
        margin: 0;
    }

    .example-title,
    .example-description {
        display: inline-block;
        margin: 0;
    }

    #chart-type-chooser {
        float: right;
        margin-right: .2%;
        width: 170px;
        text-align: right;
        line-height: 32px;
        margin-top: -30px;
    }

    .radio-group-label {
        margin-right: 12px;
        color: #727f8e;
    }

    .radio-group {
        margin: 0;
        padding: 0;
        list-style-type: none;
        display: inline-block;
        vertical-align: top;
    }

    .radio-group > li {
        display: inline-block;
        *display: inline;
        zoom: 1;
    }

    .radio-group label {
        width: 32px;
        height: 32px;
        background: #b3bbc5 no-repeat center center;
        display: inline-block;
        border-radius: 16px;
        overflow: hidden;
        font: 0/0;
        color: transparent;
    }

    .radio-group input {
        display: none;
    }

    .radio-group input:checked+label {
        background-color: #2b8abe;
    }

    .radio-group label[for="chart-type-area"],
    .radio-group label[htmlFor="chart-type-area"] {
        background-image: url("../content/dataviz/dashboards/area-chart.png");
    }

    .radio-group label[for="chart-type-line"],
    .radio-group label[htmlFor="chart-type-line"] {
        background-image: url("../content/dataviz/dashboards/line-chart.png");
    }

    .stat .eoy-closing {
        font-size: 110px;
        line-height: 1em;
        letter-spacing: -2px;
        text-indent: -8px;
        color: #454447;
    }

    .stat .volume {
        font-size: 72px;
        color: #454447;
    }

    .filtering-tabs {
        border: 0;
        background: none;
    }

    .filtering-tabs .k-tabstrip-items {
        padding: 0;
    }

    .filtering-tabs .k-item {
        width: 19.8%;
        border: 0;
        margin: 0 .2% 0 0;
        padding: 0 0 4px;
        text-align: center;
        cursor: pointer;
        background: none;
        border-bottom: 4px solid #b3bbc5;
        font: 16px/2em Arial,sans-serif;
        color: #727f8e;
    }

    .filtering-tabs .k-state-hover {
        color: #2e2e2e;
        background: none;
    }

    .filtering-tabs .k-state-active {
        padding: 0;
        color: #2b8abe;
        border-bottom: 8px solid #2b8abe;
    }

    .filtering-tabs .k-link {
        padding: 0;
    }

    #yearly-stock-prices {
        height: 200px;
        margin-top: 20px;
        clear: both;
    }

    #company-filtering-tabs .k-item {
        width: 32.8%;
        margin: 4px .5% 0 0;
    }

    .stat dd {
        margin: 0;
    }

    .stat,
    .relative-value-pie,
    .company-trends {
        margin: 1em 0 0;
        display: inline-block;
        *display: inline;
        zoom: 1;
        vertical-align: top;
    }

    .company-trends {
        margin-left: 27px;
    }

    .trend-container {
        background: transparent none no-repeat 100% 29px;
        width: 120px;
        margin-right: 27px;
    }

    .lowest-container {
        background: transparent url("../content/dataviz/dashboards/lowest.png") no-repeat 100% 37px;
    }

    .highest-container {
        background: transparent url("../content/dataviz/dashboards/highest.png") no-repeat 100% 29px;
    }

    dd.highest,
    dd.lowest,
    dd.relative-value {
        margin: 0;
        font-size: 36px;
        font-weight: 700;
    }

    .lowest {
        color: #cd151e;
    }

    .highest {
        color: #639514;
    }

    .relative-value {
        color: #4da3d5;
    }

    dd.sparkline {
        height: 40px;
        width: 120px;
        margin-top: -5px;
    }

    .separator {
        height: 1px;
        background: #b3bbc5;
    }

    .relative-value-pie {
        width: 110px;
        height: 100px;
        margin-left: -10px;
    }

    .volume-chart {
        display: inline-block;
        *display: inline;
        zoom: 1;
        width: 615px;
        height: 136px;
        vertical-align: top;
        margin: 1.2em 0 0 4em;
    }

    #example {
        width: auto;
        background: none;
        color: #454447;
    }
</style>


    
</body>
</html>