Paul Jaker

HighChart

by PaulJaker

HTML

<link rel="stylesheet" type="text/css" href="https://code.highcharts.com/css/stocktools/gui.css">
<link rel="stylesheet" type="text/css" href="https://code.highcharts.com/css/annotations/popup.css">


<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/indicators/indicators-all.js"></script>
<script src="https://code.highcharts.com/stock/modules/drag-panes.js"></script>

<script src="https://code.highcharts.com/modules/annotations-advanced.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/price-indicator.js"></script>
<script src="https://code.highcharts.com/modules/full-screen.js"></script>

<script src="https://code.highcharts.com/modules/stock-tools.js"></script>

<div id="container" class="chart"></div>

JavaScript

function indicator_hide(){
if(chart.series[0].visible==true){ 
	chart.series[0].visible=false
}else{
	chart.series[0].visible=true
}

}
function indicator_remove(){
if(chart.series[0].visible==true){ 
	chart.series[0].remove=false
}else{
	chart.series[0].remove=true
}

}

function indicator_settings(){
if(chart.series[0].visible==true){ 
	chart.series[0].option=false
}else{
	chart.series[0].option=true
}

}



Highcharts.getJSON('https://api.npoint.io/0a4122f134b91d347536', function (data) { 

    // split the data set into ohlc and volume
    var ohlc = [],
        volume = [],
        dataLength = data.length,
        i = 0;

    for (i; i < dataLength; i += 1) {
        ohlc.push([
            data[i][0], // the date
            data[i][1], // open
            data[i][2], // high
            data[i][3], // low
            data[i][4] // close
        ]);

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

    Highcharts.stockChart('container', {
    		legend:{
        	enabled: true,
             useHTML:true,
             labelFormatter: function () {
              return this.name + ' <button onclick="indicator_hide()">Hide</button>'+
               '<button onclick="indicator_remove()">Remove</button>'+
               '<button onclick="indicator_settings()">Settings</button>';
            }

        },
        plotOptions: {
          series: {
            showInLegend: true,
            }
        },

				rangeSelector: {
          buttonPosition: {
            align: 'left',
            // x: '0',
            y: '-1',
          },

          allButtonsEnabled: true,
          buttons: 
          [
            {
              count: 180,
              type: 'day',
              text: 'Day',
              preserveDataGrouping: true,
              dataGrouping: {
                forced: true,
                units: [['day', [1]]]
              }
            },
            {
              count:...