Highstock Demo

author(s): Paweł Fus Sebastian Bochan Sebastian Domas

by watti

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>

<script src="https://code.highcharts.com/modules/annotations.js"></script>
<script src="https://code.highcharts.com/modules/drag-panes.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>

<script src="https://code.highcharts.com/stock/indicators/indicators.js"></script>

<script src="https://code.highcharts.com/stock/indicators/accumulation-distribution.js"></script>
<script src="https://code.highcharts.com/stock/indicators/atr.js"></script>
<script src="https://code.highcharts.com/stock/indicators/bollinger-bands.js"></script>
<script src="https://code.highcharts.com/stock/indicators/cci.js"></script>
<script src="https://code.highcharts.com/stock/indicators/cmf.js"></script>
<script src="https://code.highcharts.com/stock/indicators/ema.js"></script>
<script src="https://code.highcharts.com/stock/indicators/ichimoku-kinko-hyo.js"></script>
<script src="https://code.highcharts.com/stock/indicators/macd.js"></script>
<script src="https://code.highcharts.com/stock/indicators/mfi.js"></script>
<script src="https://code.highcharts.com/stock/indicators/momentum.js"></script>
<script src="https://code.highcharts.com/stock/indicators/pivot-points.js"></script>
<script src="https://code.highcharts.com/stock/indicators/price-envelopes.js"></script>
<script src="https://code.highcharts.com/stock/indicators/roc.js"></script>
<script src="https://code.highcharts.com/stock/indicators/rsi.js"></script>
<script src="https://code.highcharts.com/stock/indicators/stochastic.js"></script>
<script src="https://code.highcharts.com/stock/indicators/volume-by-price.js"></script>
<script src="https://code.highcharts.com/stock/indicators/wma.js"></script>
<script src="https://code.highcharts.com/stock/indicators/vwap.js"></script>
<script...

CSS

@import 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css';

#main-content {
    background: #fff;
    color: #4e4f4d;
    font-family: 'Open Sans', sans-serif;
    font-size: 9pt;
    margin: 0px;
}

#demo * {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}
#demo *:before,
#demo *:after {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

#demo #highcharts-save {
    margin-right: 7px;
}

#demo #indicators-container ul {
    display: none;
    padding: 3px;
    width: 130px;
    background-color: #ffffff;
}

#demo #analyze-container ul {
    display: none;
    padding: 3px;
    width: 62px;
    background-color: #ffffff;
}

#demo #analyze-dropdown {
    width: auto;
    height: 21px;
    margin-bottom: 0px;
}

#demo #indicators-container li,
#demo #analyze-container li {
    list-style: none;
}

#demo #indicators-container a {
    display: block;
    text-decoration: none;
}

#demo #analyze-container a {
    display: block;
    text-decoration: none;
    line-height: 18px;
}

#demo #indicators-container span {
    display: inline-block;
    width: 110px;
}

#demo #indicators-dropdown {
    width: auto;
    height: 21px;
    margin-bottom: 0px;
}

#demo .menu-btn {
    color: #000;
    cursor: pointer;
    background-color: #fff;
    border: 1px solid #cccccc;
    padding: 4px 10px;
    margin-right: 0px;
    margin-left: 0px;
    font-weight: normal;
    text-transform: none;
    line-height: 12px;
}

#demo .menu-btn:hover {
    background-color: #99bbdd;
    border-color: #6688aa;
}

#demo .right {
    float: right;
    margin-right: 10px;
}

#demo .select {
    width: 99px;
    overflow: hidden;
}

#demo .select label {}

#demo .select-dropdown::after {
    content: '▽';
    margin: 0 0 0 10px;
    -moz-transition: 0.5s all;
    -webkit-transition: 0.5s all;
}

#demo .select-dropdown.dropdown-active::after {
    -moz-transform:...

JavaScript

/**
 * This is a complex demo to demonstrate how Highstock can be set up to
 * provide a full trading dashboard. It is not intended for implementers who
 * want to get quickly up and running with simple charts. For that, see for
 * example the "Single line series" or "Candlestick" demo.
 */


// Predefined analyzes, like default dataset+indicators+annotations
window.analyzes = [{
    indicators: [{
        linkedTo: "main",
        type: "ema",
        id: "s-ema"
    }, {
        linkedTo: "main",
        type: "sma",
        id: "s-sma"
    }, {
        linkedTo: "main",
        type: "wma",
        id: "s-wma"
    }],
    flags: [],
    annotations: [{
        visible: true,
        labelOptions: {
            align: "center",
            allowOverlap: false,
            backgroundColor: "rgba(0, 0, 0, 0.75)",
            borderColor: "black",
            borderRadius: 1,
            borderWidth: 1,
            crop: false,
            overflow: "none",
            padding: 5,
            shadow: false,
            shape: "callout",
            style: {
                fontSize: "11px",
                fontWeigth: "bold",
                color: "contrast"
            },
            useHTML: false,
            verticalAlign: "bottom",
            x: 0,
            y: -16
        },
        shapeOptions: {
            stroke: "rgba(0, 0, 0, 0.75)",
            strokeWidth: 1,
            fill: "rgba(0, 0, 0, 0.75)",
            r: 0
        },
        zIndex: 6,
        events: {},
        id: "annotation-text-5",
        labels: [{
            text: "September 2017:<br>iPhone X annoucment",
            point: {
                x: 1505174400000,
                y: 162,
                xAxis: 0,
                yAxis: 0
            },
            backgroundColor: "rgba(0, 0, 0, 0.75)",
            shape: "callout",
            borderWidth: 0,
            x: 0,
            y: -16
        }]
    }, {
        visible: true,
        labelOptions: {
            align:...