tween.js/examples/js/createGraph.js

function createGraph(t, f, c) {
	var div = document.createElement('div')
	div.style.display = 'inline-block'
	div.style.width = '200px'
	div.style.height = '120px'

	var canvas = document.createElement('canvas')
	canvas.width = 180
	canvas.height = 100

	var context = canvas.getContext('2d')
	context.fillStyle = 'rgb(250,250,250)'
	context.fillRect(0, 0, 180, 100)

	context.lineWidth = 0.5
	context.strokeStyle = 'rgb(230,230,230)'

	context.beginPath()
	context.moveTo(0, 20)
	context.lineTo(180, 20)
	context.moveTo(0, 80)
	context.lineTo(180, 80)
	context.closePath()
	context.stroke()

	context.lineWidth = 2
	context.strokeStyle = 'rgb(255,127,127)'

	var position = {x: 5, y: 80}
	var position_old = {x: 5, y: 80}

	new TWEEN.Tween(position)
		.to({x: 175}, 2000)
		.easing(TWEEN.Easing.Linear.None)
		.start()
	new TWEEN.Tween(position)
		.to({y: 20}, 2000)
		.easing(f)
		.onUpdate(function() {
			context.beginPath()
			context.moveTo(position_old.x, position_old.y)
			context.lineTo(position.x, position.y)
			context.closePath()
			context.stroke()

			position_old.x = position.x
			position_old.y = position.y
		})
		.start()

	div.appendChild(document.createTextNode(t))
	div.appendChild(document.createElement('br'))
	div.appendChild(canvas)

	return div
}