ElementStacks
HTML
<script src="http://github.com/highslide-software/highcharts.com/raw/resizing/js/highcharts.src.js"></script>
<div id="container" style="height: 400px; width: 600px;"></div>
<button id="button">Update</button>
JavaScript
var maxY = -99999;
var generateTerrain = function(){
// make random series (speed test)
var arr = [];
var name = 'Terrain';
var distBetweenPoint = 3; //meters
var x = 0;
for (var i=1; i<=51; i++){
var minVal = 100;
var maxVal = 200;
var randVal = minVal+(Math.random()*(maxVal-minVal));
var y= randVal;
if (y > maxY) maxY = y;
arr.push( [x,y]);
x = x + distBetweenPoint ;
}
return {name: name, data: arr
};
}
var elev = generateTerrain() ;
var chart = new Highcharts.Chart({
title: {text:'Elevation/Distance Chart'},
tooltip: {
enabled: true,
crosshairs: [true, true] // [x, y]
},
labels: {
items: [{
id: 'mylabel',
html: "*Click on area on top or below the points to adjust station height",
style: {
left: '10px',
top: '3px'
}
}]
},
chart: {
renderTo: 'container',
zoomType: 'x',
defaultSeriesType: 'area',
events: {
click: function(e) {
// find the clicked values and the series
var x = e.xAxis[0].value,
y = e.yAxis[0].value,
// series = this.series[0];
series = chart.get('LOS');
var x1 = series.data[0].x;
var y1 = series.data[0].y;
var x2 = series.data[1].x;
var y2 = series.data[1].y;
// Add it
// series.addPoint([x, y]);
var myLineColor = 'green';
if (x < 25 ){
//...