Color Bar on Top

Useful for timeline

by Nick Karnik

HTML

<div>
    <div id=container class="colorOverlayChart"></div>
    <svg id=can class=colorOverlay></svg>
</div>



<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<script type="text/javascript" src="http://www.highcharts.com/samples/data/usdeur.js"></script>

CSS

body {
    margin:0;
    background-color: steelblue;
}
.colorOverlayChart {
    height: 50px;
    width: 800px;
    position: absolute;
    top: 0
}
.chart {
    width: 800px;
    height: 50px;
    background: red;
    cursor: pointer;
    border: 1px solid;
    background-color: rgba(150, 150, 150, 0.5);
    position: absolute;
}
.colorOverlay {
    //background: red;
    opacity: 0.5;
    width:800px;
    height:50px;
}
.can:hover {
    //background:blue;
}
.can:hover .lineBlock {
    stroke:'red';
}
.lineBlock {
    cursor: col-resize;
    stroke-width: 5px;
    //opacity:0.5;
}
.rectBlock {
    //opacity: 0.5;
}

JavaScript

var c = null;
var svgNS = "http://www.w3.org/2000/svg";
var selected = false;
var selectedLine = null;
var t = null;
var lineUnder = null;
var lines = [];

var colors = ['blue', 'green', 'yellow', 'orange', 'red', 'maroon', 'purple', 'pink', 'black', 'brown', 'magenta', 'cyan'];

function sortedInsert(line) {
    lines.push(line);
    lines.sort(function (a, b) {
        return a.x1.baseVal.value > b.x1.baseVal.value;
    });
}

function refresh() {
    can.innerHTML = "";

    var x = 0;

    for (i = 0; i < lines.length; i++) {
        if (i > 0) {
            x = lines[i - 1].x1.baseVal.value;
            width = lines[i].x2.baseVal.value - lines[i - 1].x2.baseVal.value;
            height = can.getBoundingClientRect().height;
        } else {
            x = 0;
            width = lines[i].x2.baseVal.value;
            height = can.getBoundingClientRect().height;
        }

        r = createRect(x, 0, width, height, colors[i % colors.length]);
        can.appendChild(r);

        if (i == lines.length - 1) {
            x = lines[i].x2.baseVal.value;
            width = can.getBoundingClientRect().width;
            height = can.getBoundingClientRect().height;
            r = createRect(x, 0, width, height, colors[i + 1 % colors.length]);
            can.appendChild(r);

        }

        //    lines[i].style.stroke = 'black';
        //  can.appendChild(lines[i]);
    }

    for (i = 0; i < lines.length; i++) {
        lines[i].style.stroke = 'black';

        if (selectedLine == lines[i]) {
            lines[i].style.opacity = '1';
        } else {
            lines[i].style.opacity = '0';
        }
        can.appendChild(lines[i]);
    }

}
var rect = [];

function createRect(x, y, width, height, fill) {
    var r = document.createElementNS(svgNS, 'rect');

    r.setAttributeNS(null, 'x', x);
    r.setAttributeNS(null, 'y', y);
    r.setAttributeNS(null, 'width', width);
    r.setAttributeNS(null, 'height', height);
    r.setAttributeNS(null, 'style',...