gistfile1.js

$(function(){
	
	var PointCollection = Backbone.Collection.extend();
	
	/**
	 * Graph Canvas
	 */
	var Graph = Backbone.View.extend({
		el: '#viewport-graph',
		
		initialize: function(){
      this.collection.bind('refresh', this.render);
		},
		
		render: function(){
			
			var canvas = document.getElementById('graph'),
						 ctx = canvas.getContext('2d');

			// Create gradients
			var background = ctx.createLinearGradient(0, 0, 0, canvas.height);
			background.addColorStop(0, '#2c2c2c');
			background.addColorStop(1, '#1c1c1c');

			// assign gradients to fill and stroke styles
			ctx.fillStyle = background;

			// draw shapes
			ctx.fillRect(0, 0, canvas.width, canvas.height);


			ctx.beginPath();
	    ctx.moveTo(0, (canvas.height - 50));
	
			this.collection.each(function(item, index){
				ctx.shadowBlur = 10;
				ctx.shadowColor = '#6594c3';
				ctx.lineTo(item.get('x'), item.get('y'));
			});

			ctx.strokeStyle = '#6594c3';
			ctx.lineWidth = 2;
	    ctx.stroke();
		}
	});
	
	var collection = new PointCollection([
		{ x : 20, y : 295},
		{ x : 37, y : 61},
		{ x : 54, y : 76},
		{ x : 70, y : 219},
		{ x : 88, y : 302},
		{ x : 104, y : 268},
		{ x : 121, y : 212},
		{ x : 138, y : 294},
		{ x : 156, y : 285},
		{ x : 189, y : 45},
		{ x : 206, y : 78},
		{ x : 222, y : 298},
		{ x : 240, y : 192},
		{ x : 257, y : 161},
		{ x : 273, y : 228},
		{ x : 291, y : 213},
		{ x : 308, y : 93},
		{ x : 326, y : 60},
		{ x : 343, y : 73},
		{ x : 359, y : 227},
		{ x : 375, y : 125},
		{ x : 394, y : 251},
		{ x : 410, y : 254},
		{ x : 425, y : 250},
		{ x : 444, y : 182},
		{ x : 460, y : 195},
		{ x : 478, y : 194},
		{ x : 495, y : 222},
		{ x : 529, y : 110},
		{ x : 545, y : 95},
		{ x : 561, y : 239},
		{ x : 579, y : 192},
		{ x : 596, y : 191},
		{ x : 614, y : 226},
		{ x : 631, y : 56},
		{ x : 647, y : 189},
		{ x : 665, y : 207},
		{ x : 680, y : 92},
		{ x : 699, y : 77},
		{ x : 715, y : 36},
		{ x : 732, y : 111},
		{ x : 749, y : 128},
		{ x : 767, y : 42},
		{ x : 798, y : 302},
		{ x : 818, y : 229},
		{ x : 835, y : 133},
		{ x : 851, y : 251},
		{ x : 860, y : 202},
	]);
	
	var graph = new Graph({collection: collection}).render();
	
	setTimeout(function(){
		collection.refresh([
			{ x : 291, y : 213},
			{ x : 308, y : 93},
			{ x : 326, y : 60},
			{ x : 343, y : 73},
			{ x : 359, y : 227},
			{ x : 375, y : 125},
			{ x : 394, y : 251},
			{ x : 410, y : 254},
			{ x : 425, y : 250},
			{ x : 444, y : 182},
			{ x : 460, y : 195},
			{ x : 478, y : 194},
			{ x : 495, y : 222},
		]);
		
	}, 2000)
});