Vault data v3

author(s): Torstein Hønsi

by pepperdigital

HTML

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


<div id="container" style="height: 600px; min-width: 310px; max-width: 800px"></div>

CSS

/* Series Colours*/
.highcharts-point.highcharts-color-0,
.highcharts-legend-item.highcharts-color-0 .highcharts-point,
.highcharts-tooltip .highcharts-color-0 .stroke.highcharts-label-box {
	fill: #F9A630 !important;
} 
.highcharts-legend-item-hidden * {
fill: #cccccc !important;
transition: fill 250ms;
}
.highcharts-point.highcharts-color-1,
.highcharts-legend-item.highcharts-color-1 .highcharts-point,
.highcharts-tooltip .highcharts-color-1 {
	fill: #8E9090;
}


/* Colours */
.highcharts-background {
    fill: #FFFFFF;
  stroke: #FFFFFF;
}
.highcharts-point {
stroke-width: 0px  !important;
}

.highcharts-legend-item rect.highcharts-point {
width: 16px;
height: 16px;
rx: 14px;
ry: 14px;
y: 12px;
x: 0px;
}
.highcharts-plot-band {
fill: rgba(204, 214, 235, 0.2) !important;
}


.highcharts-grid-line {
  stroke: rgba(204, 214, 235, 0) !important;
}
.highcharts-tick {
  stroke: rgba(204, 214, 235, 0.5);
}
.highcharts-axis-title {
  fill: #000000 !important;
}
.highcharts-axis-labels text {
  fill: #000000 !important;
  }

/* Tooltips */
.highcharts-tooltip-box .highcharts-label-box {
    fill: rgb(255, 255, 255);
    fill-opacity: 1;
    stroke-width: 1px;
}
.highcharts-markers {
    stroke-width: 2px;
}
.highcharts-scrollbar-arrow {
  fill: rgb(255, 255, 255);
}
.highcharts-scrollbar-rifles {
  stroke: rgb(255, 255, 255);
}

JavaScript

Highcharts.getJSON('https://demo-live-data.highcharts.com/aapl-ohlcv.json', function (data) {

    // split the data set into ohlc and volume
    var ohlc = [],
        volume = [],
        dataLength = data.length,
        // set the allowed units for data grouping
        groupingUnits = [[
            'month',                         // unit name
            [1]                             // allowed multiples
        ], [
            'month',
            [1, 2, 3, 4, 6, 7, 8, 9, 10, 11, 12]
        ]],

        i = 0;

    for (i; i < dataLength; i += 1) {
        ohlc.push([
            data[i][0], // the date
            data[i][1], // gold

        ]);

        volume.push([
            data[i][0], // the date
            data[i][2] // silver
        ]);
    }


    // create the chart
    Highcharts.stockChart('container', {

        rangeSelector: {
           inputEnabled: false,
            
            buttons: [{
                type: 'month',
                count: 12,
                text: 'Last year',
                dataGrouping: {
                    forced: true,
                    units: [['month', [1]]]
               			},
                },
                {
                type: 'month',
                count: 24,
                text: 'Last 2 years',
                dataGrouping: {
                    forced: true,
                    units: [['month', [1]]]
                }
                },
                              {
                type: 'all',
                count: 1,
                text: 'All',
                dataGrouping: {
                    forced: true,
                    units: [['month', [1]]]
                }
                }
            ],
            selected: 0,
            buttonSpacing: 15,
            buttonTheme: {
                width: 100
            },
           
        },
     exporting: {
        enabled: false
    },

    credits: {
        enabled: false
    },
        title: {
            text:...