Trend computation test

author(s): Øystein Moseng

by oysteinmoseng

HTML

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/stock/indicators/indicators.js"></script>
<script src="https://code.highcharts.com/stock/indicators/ema.js"></script>
<script src="https://code.highcharts.com/stock/indicators/zigzag.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<fieldset>
    <legend>
        Chart data
    </legend>
    <label class="datasel">
       Dataset 1
       <input type="radio" name="dataset" value="1" checked>
    </label>
    <label class="datasel">
       Dataset 2
       <input type="radio" name="dataset" value="2">
    </label>
    <label class="datasel">
       Dataset 3
       <input type="radio" name="dataset" value="3">
    </label>
    <label class="datasel">
       Dataset 4
       <input type="radio" name="dataset" value="4">
    </label>
    <label class="datasel">
       Dataset 5
       <input type="radio" name="dataset" value="5">
    </label>
    <label style="display: none">
       Random
       <input id="random" type="radio" name="dataset" value="random">
    </label>
    <button id="randomize">
        Randomize
    </button>
</fieldset>
<figure class="highcharts-figure">
    <div id="container"></div>
</figure>

CSS

body {
    font-family: Verdana, sans-serif;    
}

.datasel {
    margin-right: 20px;    
}

.highcharts-figure, .highcharts-data-table table {
    min-width: 360px;
    max-width: 1300px;
    margin: 1em auto;
}

.highcharts-data-table table {
	border-collapse: collapse;
	border: 1px solid #EBEBEB;
	margin: 10px auto;
	text-align: center;
	width: 100%;
	max-width: 500px;
}
.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}
.highcharts-data-table th {
	font-weight: 600;
    padding: 0.5em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
    padding: 0.5em;
}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}
.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

JavaScript

function showPeaks(chart) {
	
}

// ------------------------------------------------

console.clear();

const chart = Highcharts.chart('container', {
    title: {
        text: 'Trend computation test'
    },

	legend: {
    	enabled: false
    },

	plotOptions: {
		series: {
        	marker: {
            	enabled: false
            }
        }    
    },

    series: [{
        data: [1, 2, 4, 8, 16, 32, 64, 128, 256, 512],
        id: 'id1'
    }, {
        type: 'ema',
        linkedTo: 'id1',
        params: {
            period: 3
        }
    }, {
        type: 'zigzag',
        linkedTo: 'id1',
        params: {
            deviation: 1,
            highIndex: 0,
            lowIndex: 0
        }
    }]
});

function getRandomDataset() {
	const arr = Array.apply(null, Array(50));

	// Just random
	if (Math.random() > 0.8) {
    	return arr.map(() => 50 * Math.random());
	}

	// Positive
    if (Math.random() > 0.66) {
    	return arr.map((_, i) =>
        	i / 2 * Math.random() + i / 2 + Math.random());
    }
    
   	// Negative
    if (Math.random() > 0.66) {
    	return arr.map((_, i) =>
        	arr.length - (i / 2 * Math.random() + i / 2) + Math.random());
    }

	return arr.map((_, i) => 1 / ((i+0.1) * Math.random()));
}

function setDataset(id) {
	const dataset = {
    	'1': [1, 1, 1, 1, 1, 1,2,3,6,10,13,9,14,17,19,16,20,21,21,19,17,18,19],
        '2': [50, 50, 50, 50, 50, 50,49,51,49,46,44,49,40,41,44,39,37,41,44,38,37,35,36,33],
        '3': [20, 20, 20, 20, 20, 20,20,6,19,20,22,21,20,19,19,20,21,20,22,19,19,19,22,21],
        '4': [40,40,40,40,40,40,40,45,51,49,46,44,49,40,41,44,39,37,41,44,38,37,35,39,42,39,38,36,39,41],
        '5': [1,1,1,1,1,1,1,1,2,3,6,10,23,4,1,9,13,1,1,2,5,9,12,14,15],
        'random': getRandomDataset()
    }[id];
    chart.series[0].setData(dataset);
    showPeaks(chart);
}

const inputs = document.getElementsByTagName('input');
for (let i = 0; i < inputs.length; ++i) {
	inputs[i].addEventListener('change', function...