diff --git a/static/index.html b/static/index.html
index 30c1d4b9..c734eedf 100644
--- a/static/index.html
+++ b/static/index.html
@@ -33,6 +33,7 @@
 			<div id="legend">
 				
 			</div>
+			<canvas id="productionChart" width="400" height="150"></canvas>
 		</div>
 	</div>
 </body>
\ No newline at end of file
diff --git a/static/main.js b/static/main.js
index 8d7cecc1..ed6b580e 100644
--- a/static/main.js
+++ b/static/main.js
@@ -46,10 +46,85 @@ function display(page) {
 
 // Function to redraw charts in case they bug out
 function drawcharts() {
+	// create chart of items in master storage
 	ctx = document.querySelector("#contentGraph").getContext('2d');
     PieChart = new Chart(ctx);
+	
+	// production chart
+	// https://codepen.io/statuswoe/pen/hyldD
+	var count = 20;
+	var data = {
+		labels : ["1","2","3","4","5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20"],
+		datasets : [
+			{
+				fillColor : "rgba(220,220,220,0.5)",
+				strokeColor : "rgba(220,220,220,1)",
+				pointColor : "rgba(220,220,220,1)",
+				pointStrokeColor : "#fff",
+				title:"one",
+				data : [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
+			},
+			{
+				fillColor : "rgba(151,187,205,0.5)",
+				strokeColor : "rgba(151,187,205,1)",
+				pointColor : "rgba(151,187,205,1)",
+				pointStrokeColor : "#fff",
+				title:"two",
+				data : [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
+			}
+		]
+	}
+	// this is ugly, don't judge me
+	var updateData = function(oldData){
+		//console.log(piedata)
+		var labels = oldData["labels"];
+		var dataSetA = oldData["datasets"][0]["data"];
+		var dataSetB = oldData["datasets"][1]["data"];
+		
+		labels.shift();
+		count++;
+		labels.push(count.toString());
+		// this is where we generate new data
+		var newDataA =  piedata[0].value - piedataOld[0].value;
+		var newDataB = piedata[1].value - piedataOld[1].value;
+		dataSetA.push(newDataA);
+		dataSetB.push(newDataB);
+		dataSetA.shift();
+		dataSetB.shift();
+	};
+	
+	// Not sure why the scaleOverride isn't working...
+	var optionsNoAnimation = {
+		animation : false,
+		//Boolean - If we want to override with a hard coded scale
+		scaleOverride : true,
+		//** Required if scaleOverride is true **
+		//Number - The number of steps in a hard coded scale
+		scaleSteps : 20,
+		//Number - The value jump in the hard coded scale
+		scaleStepWidth : 10,
+		//Number - The scale starting value
+		scaleStartValue : 0
+	}
+	
+	//Get the context of the canvas element we want to select
+	var ctx = document.getElementById("productionChart").getContext("2d");
+	var optionsNoAnimation = {animation : false}
+	productionChart = new Chart(ctx);
+	productionChart.Line(data, optionsNoAnimation);	
+	
+	setInterval(function(){
+		updateData(data);
+		productionChart.Line(data, optionsNoAnimation);
+	},1000);
 }
 
+// setTimeout is used to put this processing in the back of the queue, after the HTML canvas is done
+setTimeout(function(){
+	drawcharts();
+},10)
+
+var piedata = false;
 setInterval(function() {
 	var xmlhttp = new XMLHttpRequest();
 	xmlhttp.onreadystatechange = function() {
@@ -57,6 +132,10 @@ setInterval(function() {
 			data = JSON.parse(xmlhttp.responseText);
 			drawcontents(data);
 			// render our piechart with up to date information
+			// items-in-network-chart
+			if(piedata) {
+				piedataOld = piedata;
+			}
 			piedata = [];
 			for(i=0;i<data.length;i++) {
 				piedata[piedata.length] = {
@@ -83,8 +162,3 @@ setInterval(function() {
 	xmlhttp.send();
 }, 500)
 
-// create chart of items in master storage
-// setTimeout is used to put this processing in the back of the queue, after the HTML canvas is done
-setTimeout(function(){
-	drawcharts();
-},10)
\ No newline at end of file