Interactive Line Graph (D3)

forked from benjchristensen's block: Interactive Line Graph (D3)

<html>
	<head>
		<title>Interactive Line Graph</title>
		<script src="https://d3js.org/d3.v2.js"></script>
		
		<script src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
		<script src="sample_data.js"></script>
		<script src="line-graph.js"></script>
		<link rel="stylesheet" href="style.css" type="text/css">
		<style>
			body {
				font-family: "Helvetica Neue", Helvetica;
			}
					
			p {
				clear:both;
				top: 20px;
			}		
					
			div.aGraph {
				margin-bottom: 30px;
			}
		</style>
	</head>
	<body>
	<div id="graph1" class="aGraph" style="position:relative;width:100%;height:400px"></div>
	
	<div id="graph2" class="aGraph" style="float:left;position:relative;width:49%;height:200px"></div>
	<div id="graph3" class="aGraph" style="float:left;position:relative;width:49%;height:200px"></div>

// create graph now that we've added presentation config
		var l1 = new LineGraph({containerId: 'graph1', data: data});
		var l2 = new LineGraph({containerId: 'graph2', data: data2});
		var l3 = new LineGraph({containerId: 'graph3', data: data3});
		
	setInterval(function() {
		/*
		* The following will simulate live updating of the data (see dataA, dataB, dataC etc in data.js which are real examples)
		* This is being simulated so this example functions standalone without a backend server which generates data such as data.js contains.
		*/
		// for each data series ...
		var newData = [];
		data.values.forEach(function(dataSeries, index) {
			// take the first value and move it to the end
			// and capture the value we're moving so we can send it to the graph as an update
			var v = dataSeries.shift();
			dataSeries.push(v);
			// put this value in newData as an array with 1 value
			newData[index] = [v];
		})
		
		// we will reuse dataA each time
		dataA.values = newData;
		// increment time 1 step
		dataA.start = dataA.start + dataA.step;
		dataA.end = dataA.end + dataA.step; 
					
		l1.slideData(dataA);
	}, 2000);

</script>

</body>
</html>

Modified http://d3js.org/d3.v2.js to a secure url

Modified http://code.jquery.com/jquery-1.7.2.min.js to a secure url

https://d3js.org/d3.v2.js

https://code.jquery.com/jquery-1.7.2.min.js