Clearing 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-gold-1" style="height: 600px; min-width: 310px; max-width: 800px"></div>

CSS

/* Colours */
     .highcharts-background {
     fill: #FFFFFF;
     stroke: #FFFFFF;
     }
     .highcharts-plot-band {
     fill: rgba(204, 214, 235, 0.2) !important;
     }
  .highcharts-point {
     stroke-width: 0px  !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) {
   // Highcharts.getJSON('https://www.lbma.org.uk/clearing-data/data.json', function (data) {
    // split the data
    var metal = [],
        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) {
        metal.push([
            data[i][0], // the date
            data[i][1], // gold
        ]);
    }
   // create the chart
    Highcharts.stockChart('container-gold-1', {
        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: ''
        },
    navigator: {
        height:...