andrewgilmartin/Horizon Chart

## Horizon Chart
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title>Horizon Chart</title>
        <script type="text/javascript">

            function HorizonChart( canvas, barWidth, barColors ) {
                this.canvas = canvas;
                this.canvasHeight = +canvas.attributes.height.value;
                this.canvasWidth = +canvas.attributes.width.value;
                this.barColors = barColors;
                this.barWidth = barWidth;
                this.barsTotalCount = this.canvasWidth / barWidth;
            }

            // values are oldest to newest
            HorizonChart.prototype.draw = function( values ) {
                var context = this.canvas.getContext("2d");
                var canvasHeight = this.canvasHeight;
                var canvasWidth = this.canvasWidth;
                var barWidth = this.barWidth;
                var barColors = this.barColors;
                var barsCount = Math.min(values.length,this.barsTotalCount);
                var xOffset = canvasWidth - ( barsCount * barWidth ); // first x value
                var vOffset = values.length - barsCount; // first value index
                for ( var i = 0; i < barsCount; i += 1 ) {
                    var value = values[vOffset+i];
                    var x = xOffset + (i * barWidth);
                    if ( value < 0 ) {
                        context.fillStyle = barColors[1];
                        context.fillRect(x,0,barWidth,Math.min(canvasHeight,-value));
                        if ( value < -canvasHeight ) {
                            context.fillStyle = barColors[0];
                            context.fillRect(x,0,barWidth,-value-canvasHeight);
                        }
                    }
                    else if ( value > 0 ) {
                        context.fillStyle = barColors[3];
                        context.fillRect(x,canvasHeight,barWidth,-Math.min(canvasHeight,value));
                        if ( value > canvasHeight ) {
                            context.fillStyle = barColors[2];
                            context.fillRect(x,canvasHeight,barWidth,-value+canvasHeight);
                        }
                    }
                }
            }

            HorizonChart.prototype.update = function( values ) {
                var context = this.canvas.getContext("2d");
                var canvasHeight = this.canvasHeight;
                var canvasWidth = this.canvasWidth;
                var barWidth = this.barWidth;
                // slide chart left xWidth pixels
                var xWidth = Math.min(values.length*barWidth,canvasWidth);
                var canvasImage = context.getImageData(xWidth, 0, canvasWidth - xWidth, canvasHeight);
                context.putImageData(canvasImage, 0, 0);
                context.clearRect(canvasWidth-xWidth, 0, xWidth, canvasHeight);
                // draw the value
                this.draw(values);
            }

            HorizonChart.prototype.update1 = function( value ) {
                var context = this.canvas.getContext("2d");
                var canvasHeight = this.canvasHeight;
                var canvasWidth = this.canvasWidth;
                var barWidth = this.barWidth;
                // slide chart left xWidth pixels
                var canvasImage = context.getImageData(barWidth, 0, canvasWidth - barWidth, canvasHeight);
                context.putImageData(canvasImage, 0, 0);
                context.clearRect(canvasWidth-barWidth, 0, barWidth, canvasHeight);
                // draw the value
                this.draw([value]);
            }

        </script>
    </head>
    <body>
        <canvas id="c1" width="900" height="70"></canvas>

        <script>

            var canvas = document.getElementById("c1");

            var canvasHeight = +canvas.attributes.height.value;
            var canvasWidth = +canvas.attributes.width.value;

            var barWidth = 1;
            var barsTotalCount = Math.floor( canvasWidth / barWidth );

            // function to create value based on previous value (or initial value)
            var v = function(initialValue,maximumValue) {
                var value = initialValue;
                var delta = maximumValue * 0.1; // change by 10%
                return function() {
                    // change the previous value by a small amount
                    value = Math.max(-maximumValue, Math.min(maximumValue,value + (-(Math.random() * delta) + (Math.random() * delta) )));
                    return value;
                }
            }(0,canvasHeight*2);

            var values = [];

            // create some sample data
            var value = 0;
            var maxValue = canvasHeight * 2;
            for ( var i = 0; i < barsTotalCount; i++  ) {
                values.push(v());
            }

            var barColors = [
                "#4c9ec9", // < -height
                "#abcddf", // < 0
                "#53b96a", // < height
                "#a5dea8"
            ];

            var horizon_chart = new HorizonChart( canvas, barWidth, barColors );
            horizon_chart.draw(values);

            window.setInterval(function(){
                horizon_chart.update1(v());
            }, 100);

        </script>
    </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<title>Horizon Chart</title>
	<script type="text/javascript">

	function HorizonChart( canvas, barWidth, barColors ) {
	this.canvas = canvas;
	this.canvasHeight = +canvas.attributes.height.value;
	this.canvasWidth = +canvas.attributes.width.value;
	this.barColors = barColors;
	this.barWidth = barWidth;
	this.barsTotalCount = this.canvasWidth / barWidth;
	}

	// values are oldest to newest
	HorizonChart.prototype.draw = function( values ) {
	var context = this.canvas.getContext("2d");
	var canvasHeight = this.canvasHeight;
	var canvasWidth = this.canvasWidth;
	var barWidth = this.barWidth;
	var barColors = this.barColors;
	var barsCount = Math.min(values.length,this.barsTotalCount);
	var xOffset = canvasWidth - ( barsCount * barWidth ); // first x value
	var vOffset = values.length - barsCount; // first value index
	for ( var i = 0; i < barsCount; i += 1 ) {
	var value = values[vOffset+i];
	var x = xOffset + (i * barWidth);
	if ( value < 0 ) {
	context.fillStyle = barColors[1];
	context.fillRect(x,0,barWidth,Math.min(canvasHeight,-value));
	if ( value < -canvasHeight ) {
	context.fillStyle = barColors[0];
	context.fillRect(x,0,barWidth,-value-canvasHeight);
	}
	}
	else if ( value > 0 ) {
	context.fillStyle = barColors[3];
	context.fillRect(x,canvasHeight,barWidth,-Math.min(canvasHeight,value));
	if ( value > canvasHeight ) {
	context.fillStyle = barColors[2];
	context.fillRect(x,canvasHeight,barWidth,-value+canvasHeight);
	}
	}
	}
	}

	HorizonChart.prototype.update = function( values ) {
	var context = this.canvas.getContext("2d");
	var canvasHeight = this.canvasHeight;
	var canvasWidth = this.canvasWidth;
	var barWidth = this.barWidth;
	// slide chart left xWidth pixels
	var xWidth = Math.min(values.length*barWidth,canvasWidth);
	var canvasImage = context.getImageData(xWidth, 0, canvasWidth - xWidth, canvasHeight);
	context.putImageData(canvasImage, 0, 0);
	context.clearRect(canvasWidth-xWidth, 0, xWidth, canvasHeight);
	// draw the value
	this.draw(values);
	}

	HorizonChart.prototype.update1 = function( value ) {
	var context = this.canvas.getContext("2d");
	var canvasHeight = this.canvasHeight;
	var canvasWidth = this.canvasWidth;
	var barWidth = this.barWidth;
	// slide chart left xWidth pixels
	var canvasImage = context.getImageData(barWidth, 0, canvasWidth - barWidth, canvasHeight);
	context.putImageData(canvasImage, 0, 0);
	context.clearRect(canvasWidth-barWidth, 0, barWidth, canvasHeight);
	// draw the value
	this.draw([value]);
	}

	</script>
	</head>
	<body>
	<canvas id="c1" width="900" height="70"></canvas>

	<script>

	var canvas = document.getElementById("c1");

	var canvasHeight = +canvas.attributes.height.value;
	var canvasWidth = +canvas.attributes.width.value;

	var barWidth = 1;
	var barsTotalCount = Math.floor( canvasWidth / barWidth );

	// function to create value based on previous value (or initial value)
	var v = function(initialValue,maximumValue) {
	var value = initialValue;
	var delta = maximumValue * 0.1; // change by 10%
	return function() {
	// change the previous value by a small amount
	value = Math.max(-maximumValue, Math.min(maximumValue,value + (-(Math.random() * delta) + (Math.random() * delta) )));
	return value;
	}
	}(0,canvasHeight*2);

	var values = [];

	// create some sample data
	var value = 0;
	var maxValue = canvasHeight * 2;
	for ( var i = 0; i < barsTotalCount; i++ ) {
	values.push(v());
	}

	var barColors = [
	"#4c9ec9", // < -height
	"#abcddf", // < 0
	"#53b96a", // < height
	"#a5dea8"
	];

	var horizon_chart = new HorizonChart( canvas, barWidth, barColors );
	horizon_chart.draw(values);

	window.setInterval(function(){
	horizon_chart.update1(v());
	}, 100);

	</script>
	</body>
	</html>