Negative Area - Fill Region (w/ Calculations) - Add Series
HTML
<script src="http://highcharts.com/js/testing.js"></script>
<script src="http://documentcloud.github.com/underscore/underscore.js"></script>
<div id="container" style="height: 400px; width: 500px"></div>
JavaScript
/*
Given two lines with the same number of points and the same x values
When I chart the two lines
Then I should see a shaded region in orange where series1 is greater than series2
And I should see a shaded region in grey where series2 is greater than series1
I aim to create a graph similar to http://jsfiddle.net/mKABN/24/
Code is for demo purposes and is not written with performance in mind.
- Add additional stacked series to handle the shaded regions.
- Find where the two lines intersect and add additional data points to the stacked series.
- Preprocess data to calculate values for stacked series.
http://stackoverflow.com/questions/9982924/javascript-charting-library-to-handle-shading-area-between-two-lines
*/
var Intersection = function (d1, d2) {
var self = this;
this.init = function () {
this.d1 = this.sortLine(d1);
this.d2 = this.sortLine(d2);
if (this.d1.length != this.d2.length) {
throw 'd1 and d2 expected to be same size';
}
this.dps = _.zip(d1, d2);
hasUnmatchedIndex = _.any(this.dps, function(dp_pair) {
return dp_pair[0][0] != dp_pair[1][0];
});
if (hasUnmatchedIndex)
throw 'd1 and d2 do not have same indices';
};
this.sortLine = function(line) {
return _.sortBy(line, function(dp) { return dp[0]; });
};
this.transitions = function() {
return _.map(this.dps, function(dp_pair) {
a = dp_pair[0];
b = dp_pair[1];
result = null;
if (a[1] < b[1])
result = -1;
else if (a[1] > b[1])
result = 1;
else
result = 0;
return [a[0], result];
});
};
this.dropTransitions = function() {
prev = null;
drops = [];
_.each(this.transitions(), function(curr) {
if (prev && prev[1] != curr[1] && prev[1] != 0 && curr[1] != 0)
drops.push([prev, curr])
prev = curr;
});
return drops;
};
this.data = function() {
//self = this;
_d1 =...