Timeline Chart w/ Trendline (working)
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script>
/**
* Code for regression extracted from jqplot.trendline.js
*
* Version: 1.0.0a_r701
*
* Copyright (c) 2009-2011 Chris Leonello
* jqPlot is currently available for use in all personal or commercial projects
* under both the MIT (http://www.opensource.org/licenses/mit-license.php) and GPL
* version 2.0 (http://www.gnu.org/licenses/gpl-2.0.html) licenses. This means that you can
* choose the license that best suits your project and use it accordingly.
*
**/
function regression(x, y, typ) {
var type = (typ == null) ? 'linear' : typ;
var N = x.length;
var slope;
var intercept;
var SX = 0;
var SY = 0;
var SXX = 0;
var SXY = 0;
var SYY = 0;
var Y = [];
var X = [];
if (type == 'linear') {
X = x;
Y = y;
} else if (type == 'exp' || type == 'exponential') {
for (var i = 0; i < y.length; i++) {
// ignore points <= 0, log undefined.
if (y[i] <= 0) {
N--;
} else {
X.push(x[i]);
Y.push(Math.log(y[i]));
}
}
}
for (var i = 0; i < N; i++) {
SX = SX + X[i];
SY = SY + Y[i];
SXY = SXY + X[i] * Y[i];
SXX = SXX + X[i] * X[i];
SYY = SYY + Y[i] * Y[i];
}
slope = (N * SXY - SX * SY) / (N * SXX - SX * SX);
intercept = (SY - slope * SX) / N;
return [slope, intercept];
}
function linearRegression(X, Y) {
var ret;
ret = regression(X, Y, 'linear');
return [ret[0], ret[1]];
}
function expRegression(X, Y) {
var ret;
var x = X;
var y = Y;
...
JavaScript
var getScatterLabels = function () {
return {
enabled: true,
align: 'center',
style: {
fontWeight: 'normal',
color: 'white',
fontSize: '8px'
},
x: 0,
verticalAlign: 'middle',
overflow: true,
crop: false,
formatter: function () {
return '' + (Number(this.point.id) + 1);
}
}
};
var series1 = [{
type: 'scatter',
color: '#0e5ae6', // Exposed (Blue)
yAxis: 0,
marker: {
radius: 8
},
data: [{
name: 'Point 1',
x: Date.UTC(2013, 07, 10),
y: 9,
id: 0,
dataLabels: getScatterLabels()
}, {
name: 'Point 2',
x: Date.UTC(2013, 07, 11),
y: 56,
id: 1,
dataLabels: getScatterLabels()
}, {
name: 'Point 3',
x: Date.UTC(2013, 07, 24),
y: 91,
id: 3,
dataLabels: getScatterLabels()
}, {
name: 'Point 4',
x: Date.UTC(2013, 07, 29),
y: 72,
id: 4,
dataLabels: getScatterLabels()
}, {
name: 'Point 5',
x: Date.UTC(2013, 07, 31),
y: 37,
id: 15,
dataLabels: getScatterLabels()
}]
}];
var data = [{
name: 'Point 1',
x: Date.UTC(2013, 07, 10),
y: 9,
id: 0,
dataLabels: getScatterLabels()
}, {
name: 'Point 2',
x: Date.UTC(2013, 07, 11),
y: 56,
id: 1,
dataLabels: getScatterLabels()
}, {
name: 'Point 3',
x: Date.UTC(2013, 07, 24),
y: 91,
id: 3,
dataLabels: getScatterLabels()
}, {
name: 'Point 4',
x: Date.UTC(2013, 07, 29),
y: 72,
id: 4,
dataLabels: getScatterLabels()
}, {
name: 'Point 5',
x: Date.UTC(2013, 07, 31),
y: 37,
id: 15,
dataLabels: getScatterLabels()
}]
var chart = new Highcharts.Chart({
chart: {
renderTo: 'highchart',
},
title: {
text: 'Brand Lift Metrics Timeline'
},
xAxis: {
...