kevinlynx/smooth.js

## smooth.js
$('#container').highcharts({
    chart: {
        zoomType: 'x'
    },
    title: {
        text: 'service latency sample'
    },
    subtitle: {
        text: document.ontouchstart === undefined ?
        'Click and drag in the plot area to zoom in' :
        'Pinch the chart to zoom in'
    },
    xAxis: {
        type: 'datetime',
        minRange: 10 * 10 * 60 * 1000
    },
    yAxis: {
        title: {
            text: 'Exchange rate'
        }
    },
    legend: {
        enabled: false
    },
    plotOptions: {
        area: {
            fillColor: {
                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
                stops: [
                [0, Highcharts.getOptions().colors[0]],
                [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                ]
            },
            marker: {
                radius: 2
            },
            lineWidth: 1,
            states: {
                hover: {
                    lineWidth: 1
                }
            },
            threshold: null
        }
    },

    series: createData()
});


function createSeries(name, data) {
    return {
        type: 'line',
        name: name,
        pointInterval: 10 * 60 * 1000,
        pointStart: Date.UTC(2006, 10, 10),
        data: data
    };
}

function createData() {
    var realVals = generateUpSamples();
    var forecasts = generateForecast(realVals, 10); // use average as s0
    return [createSeries("AVG", realVals),
        createSeries("ES", forecasts),
        createSeries("SMA", generateForecastSMA(realVals, 20))];
}

function generateUpSamples() {
    return generate2(0.2, 800, 10, 3, 800 / 5, 800 / 5);
    //return generate(0.2, 800, 10, 3, 0.97, 2, 500);
}

// delta: inc/dec value to avg
// drop: smaller/bigger value around avg
// nProb: odds to generate noise value
function generate(delta, cnt, avg, drop, nProb, nMin, nMax) {
    function createVal() {
        if (Math.random() > nProb) {
           return Math.floor(Math.random() * (nMax - nMin) + nMin);
        }
        return Math.floor(Math.random() * drop * (Math.random() > 0.5 ? -1 : 1) + avg);
    }
    var rets = [];
    for (var i = 0; i < cnt; ++i) {
        rets.push(createVal());
        avg += delta;
    }
    return rets;
}

function generate2(delta, cnt, avg, drop, errStart, errCnt) {
    function createVal() {
        var v = errAvg > 0 ? errAvg : avg;
        return Math.floor(Math.random() * drop * (Math.random() > 0.5 ? -1 : 1) + v);
    }
    var rets = [];
    var errAvg = 0;
    for (var i = 0; i < cnt; ++i) {
        rets.push(createVal());
        avg += delta;
        if (i == errStart) {
            errAvg = avg + Math.random() * 300 + 200;
        } else if (i == errStart + errCnt) {
            errAvg = 0;
        }
    }
    return rets;
}

// exponential smoothing
function generateForecast(realVals, s0) {
    var a = 0.05; // close to history value
    var rets = [];
    s0 = s0 ? s0 : realVals[0]; // first value
    for (var i = 0; i < realVals.length; ++i) {
        if (i == 0) rets.push(s0);
        else {
            var r = a * realVals[i] + ( 1 - a) * rets[i - 1];
            rets.push(r);
        }
    }
    return rets;
}

// simple moving average
// we can apply a factor to the real value to make this function be a weighted moving average
function generateForecastSMA(realVals, windowSize) {
    function generateBeforeWindow() { // simple
        var rets = [];
        rets.push(realVals[0]);
        for (var i = 1; i < windowSize; ++i) {
            var r = rets[i - 1] + (realVals[i] - realVals[0]) / windowSize;
            rets.push(r);
        }
        return rets;
    }
    var rets = generateBeforeWindow();
    for (var i = windowSize; i < realVals.length; ++i) {
        var r = rets[i - 1] + (realVals[i] - realVals[i - windowSize]) / windowSize;
        rets.push(r);
    }
    return rets;
}

## test.html
<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Highcharts Example</title>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	</head>
	<body>
		<script src="js/highcharts.js"></script>
		<script src="js/modules/exporting.js"></script>
		<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
		<script type="text/javascript" src="sp.js"></script>
	</body>
</html>
	$('#container').highcharts({
	chart: {
	zoomType: 'x'
	},
	title: {
	text: 'service latency sample'
	},
	subtitle: {
	text: document.ontouchstart === undefined ?
	'Click and drag in the plot area to zoom in' :
	'Pinch the chart to zoom in'
	},
	xAxis: {
	type: 'datetime',
	minRange: 10 * 10 * 60 * 1000
	},
	yAxis: {
	title: {
	text: 'Exchange rate'
	}
	},
	legend: {
	enabled: false
	},
	plotOptions: {
	area: {
	fillColor: {
	linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
	stops: [
	[0, Highcharts.getOptions().colors[0]],
	[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
	]
	},
	marker: {
	radius: 2
	},
	lineWidth: 1,
	states: {
	hover: {
	lineWidth: 1
	}
	},
	threshold: null
	}
	},

	series: createData()
	});


	function createSeries(name, data) {
	return {
	type: 'line',
	name: name,
	pointInterval: 10 * 60 * 1000,
	pointStart: Date.UTC(2006, 10, 10),
	data: data
	};
	}

	function createData() {
	var realVals = generateUpSamples();
	var forecasts = generateForecast(realVals, 10); // use average as s0
	return [createSeries("AVG", realVals),
	createSeries("ES", forecasts),
	createSeries("SMA", generateForecastSMA(realVals, 20))];
	}

	function generateUpSamples() {
	return generate2(0.2, 800, 10, 3, 800 / 5, 800 / 5);
	//return generate(0.2, 800, 10, 3, 0.97, 2, 500);
	}

	// delta: inc/dec value to avg
	// drop: smaller/bigger value around avg
	// nProb: odds to generate noise value
	function generate(delta, cnt, avg, drop, nProb, nMin, nMax) {
	function createVal() {
	if (Math.random() > nProb) {
	return Math.floor(Math.random() * (nMax - nMin) + nMin);
	}
	return Math.floor(Math.random() * drop * (Math.random() > 0.5 ? -1 : 1) + avg);
	}
	var rets = [];
	for (var i = 0; i < cnt; ++i) {
	rets.push(createVal());
	avg += delta;
	}
	return rets;
	}

	function generate2(delta, cnt, avg, drop, errStart, errCnt) {
	function createVal() {
	var v = errAvg > 0 ? errAvg : avg;
	return Math.floor(Math.random() * drop * (Math.random() > 0.5 ? -1 : 1) + v);
	}
	var rets = [];
	var errAvg = 0;
	for (var i = 0; i < cnt; ++i) {
	rets.push(createVal());
	avg += delta;
	if (i == errStart) {
	errAvg = avg + Math.random() * 300 + 200;
	} else if (i == errStart + errCnt) {
	errAvg = 0;
	}
	}
	return rets;
	}

	// exponential smoothing
	function generateForecast(realVals, s0) {
	var a = 0.05; // close to history value
	var rets = [];
	s0 = s0 ? s0 : realVals[0]; // first value
	for (var i = 0; i < realVals.length; ++i) {
	if (i == 0) rets.push(s0);
	else {
	var r = a * realVals[i] + ( 1 - a) * rets[i - 1];
	rets.push(r);
	}
	}
	return rets;
	}

	// simple moving average
	// we can apply a factor to the real value to make this function be a weighted moving average
	function generateForecastSMA(realVals, windowSize) {
	function generateBeforeWindow() { // simple
	var rets = [];
	rets.push(realVals[0]);
	for (var i = 1; i < windowSize; ++i) {
	var r = rets[i - 1] + (realVals[i] - realVals[0]) / windowSize;
	rets.push(r);
	}
	return rets;
	}
	var rets = generateBeforeWindow();
	for (var i = windowSize; i < realVals.length; ++i) {
	var r = rets[i - 1] + (realVals[i] - realVals[i - windowSize]) / windowSize;
	rets.push(r);
	}
	return rets;
	}
	<!DOCTYPE HTML>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Highcharts Example</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	</head>
	<body>
	<script src="js/highcharts.js"></script>
	<script src="js/modules/exporting.js"></script>
	<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
	<script type="text/javascript" src="sp.js"></script>
	</body>
	</html>