diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..6bba7a6
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,25 @@
+{
+  "files.associations": {
+    "*.ipp": "cpp",
+    "array": "cpp",
+    "atomic": "cpp",
+    "complex": "cpp",
+    "deque": "cpp",
+    "list": "cpp",
+    "string": "cpp",
+    "unordered_map": "cpp",
+    "unordered_set": "cpp",
+    "vector": "cpp",
+    "iterator": "cpp",
+    "memory_resource": "cpp",
+    "optional": "cpp",
+    "string_view": "cpp",
+    "rope": "cpp",
+    "slist": "cpp",
+    "initializer_list": "cpp",
+    "stop_token": "cpp",
+    "type_traits": "cpp",
+    "utility": "cpp",
+    "valarray": "cpp"
+  }
+}
\ No newline at end of file
diff --git a/cpp/lib/telegraph/local/dummy_device.cpp b/cpp/lib/telegraph/local/dummy_device.cpp
index ebfd461..830a57d 100644
--- a/cpp/lib/telegraph/local/dummy_device.cpp
+++ b/cpp/lib/telegraph/local/dummy_device.cpp
@@ -55,6 +55,9 @@ namespace telegraph {
         std::vector<std::string> labels{"On", "Off"};
         auto status_type = value_type("Status", std::move(labels));
         auto childC = new variable(4, "c", "C", "", status_type);
+        
+        auto childD = new variable(5, "d", "D", "", value_type::Bool);
+
 
         std::vector<std::string> test_labels = {"option1", "option2", "option3"};
         value_type test_enum = value_type("test_enum", test_labels);
@@ -67,17 +70,21 @@ namespace telegraph {
         auto action4 = new action(4, "action4", "action4", "", test_enum, test_enum);
         auto action5 = new action(5, "action5", "action5", "", short_enum, short_enum);
 
-        std::vector<node*> children{childA, childB, childC, action1, action2, action3, action4, action5};
+        std::vector<node*> children{childA, childB, childC, childD, action1, action2, action3, action4, action5};
         auto root = std::make_unique<group>(1, "foo", "Foo", "", "", 1, std::move(children));
         auto dev = std::make_shared<dummy_device>(ioc, name, std::move(root));
 
         auto a_publisher = std::make_shared<publisher>(ioc, value_type::Float);
         auto b_publisher = std::make_shared<publisher>(ioc, value_type::Int32);
         auto c_publisher= std::make_shared<publisher>(ioc, status_type);
+        auto d_publisher= std::make_shared<publisher>(ioc, value_type::Bool);
+
 
         dev->add_publisher(childA, a_publisher);
         dev->add_publisher(childB, b_publisher);
         dev->add_publisher(childC, c_publisher);
+        dev->add_publisher(childD, d_publisher);
+
 
         // add action
         dev->add_handler(action1, [] (io::yield_ctx& yield, value val) -> value {
@@ -133,6 +140,19 @@ namespace telegraph {
                 val++;
             }
         });
+
+        io::spawn(ioc, [&ioc, w, d_publisher](io::yield_context yield) {
+            // create a timer
+            io::deadline_timer timer{ioc};
+            bool val= false;
+            while (true) {
+                timer.expires_from_now(boost::posix_time::seconds(2));
+                timer.async_wait(yield);
+                { auto dev = w.lock(); if (!dev) break; }
+                (*d_publisher) << value{val};
+                val = !val;
+            }
+        });
         return dev;
     }
 }
\ No newline at end of file
diff --git a/gui/src/dashboard/Control.vue b/gui/src/dashboard/Control.vue
index 87983f1..1ee788d 100644
--- a/gui/src/dashboard/Control.vue
+++ b/gui/src/dashboard/Control.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="control-display" :class="{ horizontal: horizontal }">
-		<div v-if="this.node.isVariable()" class="node-value">{{ stateLabel }}</div>
+		<div v-if="this.node.isVariable()" class="node-value" v-bind:style="{ background: backgroundColor}">{{ stateLabel }}</div>
 		<ActionControl v-if="this.node.isAction()" :node="this.node" />
 		<div class="node-label">
 			{{ node.getPretty() }}
@@ -22,6 +22,7 @@
 			return {
 				sub: null,
 				state: null,
+				backgroundColor: null,
 			};
 		},
 		computed: {
@@ -30,6 +31,9 @@
 				if (typeof this.state == "number" && this.state % 1 !== 0) {
 					str = this.state.toFixed(2);
 				}
+				if (typeof this.state == "boolean") {
+					this.backgroundColor = this.state? "#008000" : "#B22222"
+				}
 				return this.state == null ? "..." : "" + str;
 			},
 		},
diff --git a/gui/src/dashboard/Dashboard.vue b/gui/src/dashboard/Dashboard.vue
index db6ac4f..deb55a5 100644
--- a/gui/src/dashboard/Dashboard.vue
+++ b/gui/src/dashboard/Dashboard.vue
@@ -46,6 +46,7 @@ import uuidv4 from "uuid";
 
 // the valid types
 import Graph from "./Graph.vue";
+import GraphMinMax from "./GraphMinMax.vue";
 import ControlPanel from "./ControlPanel.vue";
 import Placeholder from "./Placeholder.vue";
 
@@ -54,6 +55,7 @@ export default {
 	components: {
 		ControlPanel,
 		Graph,
+		GraphMinMax,
 		Placeholder,
 		GridLayout: VueGridLayout.GridLayout,
 		GridItem: VueGridLayout.GridItem,
@@ -115,6 +117,8 @@ export default {
 				this.dragOver = false;
 			})
 			.on("drop", (event) => {
+				// if (event.target.type)
+				console.log(event.target);
 				var x = parseFloat(event.relatedTarget.getAttribute("data-x"));
 				var y = parseFloat(event.relatedTarget.getAttribute("data-y"));
 
diff --git a/gui/src/dashboard/Graph.vue b/gui/src/dashboard/Graph.vue
index 19e6a6f..6ebe3d0 100644
--- a/gui/src/dashboard/Graph.vue
+++ b/gui/src/dashboard/Graph.vue
@@ -7,11 +7,13 @@
 					icon="clock"
 					:class="{ controlActive: useTimespan }"
 					@click="useTimespan = !useTimespan"
+					title="Use Timespan"
 				/>
 				<FlatButton
 					icon="play"
 					:class="{ controlActive: live }"
-					@click="live = !live"
+					@click="toggleLive"
+					title="Play/Pause"
 				/>
 			</div>
 		</template>
@@ -31,6 +33,7 @@ import FlatButton from "../components/FlatButton.vue";
 import NumberField from "../components/NumberField.vue";
 import { NamespaceQuery, Variable } from "telegraph";
 import TimeChart from 'timechart'
+import interact from "interactjs";
 
 
 export default {
@@ -44,8 +47,10 @@ export default {
 	data() {
 		return {
 			variables: [],
-			history: [],
+			history: [[]],
 			chart: null,
+			srs: [],
+			currColor: 'blue',
 
 			timespan: 20,
 			useTimespan: true,
@@ -64,7 +69,7 @@ export default {
 		},
 		nodeQuery() {
 			return this.nsQuery.contexts
-				.extract((x) => x.name == this.history.ctx)
+				.extract((x) => x.name == this.history[0].ctx)
 				.fetch()
 				.fromPath(this.data.node);
 		},
@@ -80,12 +85,29 @@ export default {
 		this.width = this.$refs["chart-container"].offsetWidth;
 		this.height = this.$refs["chart-container"].offsetHeight;
 		this.setup();
+		interact(this.$refs["chart-container"])
+			.dropzone({
+				overlap: "pointer",
+				accept: ".node-bubble",
+			})
+			.on("dragenter", (event) => {
+				this.dragOver = true;
+			})
+			.on("dragleave", (event) => {
+				this.dragOver = false;
+			})
+			.on("drop", (event) => {
+				this.drop(event.interaction.data);
+			});
 	},
 	unmounted() {},
 	methods: {
 		setup() {
+			this.srs.push({ name : 'Series 1', data: this.history[0], color: 'blue' });
 			this.chart = new TimeChart(this.$refs["chart"], {
-				series: [{ name : 'Series 1', data: this.history, color: 'blue' }],
+				// series: [
+				// 	{ name : 'Series 1', data: this.history[0], color: 'blue' }],
+				series: this.srs,
 				realTime: true,
 				baseTime: Date.now() - performance.now(),
 				xRange: { min: 0, max: 20 * 1000 },
@@ -95,6 +117,7 @@ export default {
 			this.chart.model.resize(this.width, this.height);
 		},
 		toggleLive() {
+			this.live = !this.live;
 		},
 		updateTimespan() {
 		},
@@ -102,6 +125,43 @@ export default {
 		},
 		updateVariable(v) {
 		},
+		drop(data) {
+			this.chart.dispose();
+			this.history.push([]);
+			// console.log(this.history.length);
+			this.nextColor();
+
+			this.srs.push({
+				name : ('Series '+(this.history.length)), 
+				data: this.history[this.history.length-1], 
+				color: this.currColor});
+			
+
+			this.chart = new TimeChart(this.$refs["chart"], {
+				series: this.srs,
+				realTime: true,
+				baseTime: Date.now() - performance.now(),
+				xRange: { min: 0, max: 20 * 1000 },
+			});
+
+			this.chart.update();
+		},
+		nextColor() {
+			switch (this.currColor) {
+				case 'blue':
+					this.currColor = 'red';
+					break;
+				case 'red':
+					this.currColor = 'yellow';
+					break;
+				case 'yellow':
+					this.currColor = 'blue';
+					break;
+				default:
+					this.currColor = 'red';
+			}
+		}
+
 	},
 	watch: {
 		nodeQuery(n, o) {
@@ -113,7 +173,13 @@ export default {
 		// callback for adding data
 		setInterval(() => {
 			const time = performance.now();
-			this.history.push({x: time, y: Math.sin(time * 0.002)});
+			var yVal = Math.sin(time * 0.002);
+			// this.history[0].push({x: time, y: yVal});
+			if (this.live) {
+				for (let i = 0; i < this.history.length; i++) {
+					this.history[i].push({x : time, y : (yVal + i)});
+				}
+			}
 			this.chart.update();
 		}, 100);
 		this.nodeQuery.register(this.updateVariable);
diff --git a/gui/src/dashboard/GraphMinMax.vue b/gui/src/dashboard/GraphMinMax.vue
new file mode 100644
index 0000000..52d2367
--- /dev/null
+++ b/gui/src/dashboard/GraphMinMax.vue
@@ -0,0 +1,332 @@
+<template>
+	<Panel @close="$emit('close')" :header="header" :noMargin="true">
+		<template v-slot:header>
+			<div class="graph-controls">
+				<NumberField v-model="timespan" @input="updateTimespan" />
+				<FlatButton
+					icon="clock"
+					:class="{ controlActive: useTimespan }"
+					@click="useTimespan = !useTimespan"
+					title="Use Timespan"
+				/>
+				<FlatButton
+					icon="play"
+					:class="{ controlActive: live }"
+					@click="toggleLive"
+					title="Play"
+				/>
+				<FlatButton
+					icon="arrow-alt-circle-up"
+					:class="{ controlActive: live }"
+					@click="toggleMax"
+					title="Reset Max Line"
+				/>
+				<FlatButton
+					icon="arrow-alt-circle-down"
+					:class="{ controlActive: live }"
+					@click="toggleMin"
+					title="Reset Min Line"
+				/>
+			</div>
+		</template>
+		<div ref="chart-container" class="chart-container">
+			<div
+				ref="chart"
+				class="chart"
+				:style="{ width: this.width + 'px', height: this.height + 'px' }"
+			></div>
+		</div>
+	</Panel>
+</template>
+
+<script>
+import Panel from "../components/Panel.vue";
+import FlatButton from "../components/FlatButton.vue";
+import NumberField from "../components/NumberField.vue";
+import { NamespaceQuery, Variable } from "telegraph";
+import TimeChart from 'timechart'
+
+
+export default {
+	name: "GraphMinMax",
+	components: { Panel, FlatButton, NumberField },
+	props: {
+		id: String,
+		nsQuery: NamespaceQuery,
+		data: Object,
+	},
+	data() {
+		return {
+			variables: [],
+			history: [],
+			maxVals: [],
+			maxVal: 0,
+			maxVisible: true,
+			minVals: [],
+			minVal: 0,
+			minVisible: true,
+			chart: null,
+
+			timespan: 20,
+			useTimespan: true,
+			live: true,
+
+			width: 0,
+			height: 0,
+			sub: null,
+		};
+	},
+	computed: {
+		header() {
+			return (
+				"GraphMinMax: " + (this.variables[0] ? this.variables[0].getPretty() : "")
+			);
+		},
+		nodeQuery() {
+			return this.nsQuery.contexts
+				.extract((x) => x.name == this.history.ctx)
+				.fetch()
+				.fromPath(this.data.node);
+		},
+	},
+	mounted() {
+		new ResizeObserver(() => {
+			if (this.$refs["chart-container"]) {
+				this.width = this.$refs["chart-container"].offsetWidth;
+				this.height = this.$refs["chart-container"].offsetHeight;
+				this.$nextTick(this.relayout());
+			}
+		}).observe(this.$refs["chart-container"]);
+		this.width = this.$refs["chart-container"].offsetWidth;
+		this.height = this.$refs["chart-container"].offsetHeight;
+		this.setup();
+	},
+	unmounted() {},
+	methods: {
+		setup() {
+			this.chart = new TimeChart(this.$refs["chart"], {
+				series: [
+					{ name : 'Series 1', data: this.history, color: 'blue' },
+					{ name : 'Max', data: this.maxVals, color: 'red', visible: this.maxVisible},
+					{ name : 'Min', data: this.minVals, color: 'green', visible: this.minVisible },
+				],
+				realTime: true,
+				baseTime: Date.now() - performance.now(),
+				xRange: { min: 0, max: 20 * 1000 },
+				legend: false,
+			});
+		},
+		relayout() {
+			this.chart.model.resize(this.width, this.height);
+		},
+		toggleLive() {
+			this.live = !this.live;
+		},
+		updateTimespan() {
+		},
+		updateScale() {
+		},
+		updateVariable(v) {
+		},
+		toggleMax(){
+			// the choice of reset to 0 is arbitrary
+			// should change this to current y value
+			this.maxVal = 0;
+			this.chart.update();
+		},
+		toggleMin(){
+			this.minVal = 0;
+			this.chart.update();
+		},
+	},
+	watch: {
+		nodeQuery(n, o) {
+			// if (o) o.unregister(this.updateVariable);
+			// n.updated.register(this.updateVariable);
+		},
+	},
+	created() {
+		// callback for adding data
+		setInterval(() => {
+			const time = performance.now();
+			var yVal = Math.sin(time * 0.002);
+			this.history.push({x: time, y: yVal});
+			if (this.maxVisible && this.maxVal < yVal) {
+				this.maxVal = yVal;
+			}
+			if (this.minVisible && this.minVal > yVal) {
+				this.minVal = yVal;
+			}
+			this.maxVals.push({x: time, y: this.maxVal});
+			this.minVals.push({x: time, y: this.minVal});
+
+			this.chart.update();
+		}, 100);
+		this.nodeQuery.register(this.updateVariable);
+	},
+	destroyed() {
+		if (this.sub) this.sub.cancel();
+	},
+};
+</script>
+
+<style scoped>
+.chart-container {
+	width: 100%;
+	height: 100%;
+}
+.graph-controls > input {
+	text-align: right;
+}
+.graph-controls {
+	display: flex;
+	flex-direction: row;
+	color: var(--main-text-color);
+}
+
+.controlActive {
+	color: var(--contrast-color);
+}
+
+.chart {
+	display: block;
+}
+</style>
+
+<style>
+uplot,
+.uplot *,
+.uplot *::before,
+.uplot *::after {
+	box-sizing: border-box;
+}
+
+.uplot {
+	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
+		Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+		"Segoe UI Symbol", "Noto Color Emoji";
+	line-height: 1.5;
+	width: max-content;
+}
+
+.u-title {
+	text-align: center;
+	font-size: 18px;
+	font-weight: bold;
+}
+
+.u-wrap {
+	position: relative;
+	user-select: none;
+}
+
+.u-over,
+.u-under {
+	position: absolute;
+	overflow: hidden;
+}
+
+.uplot canvas {
+	display: block;
+	position: relative;
+	width: 100%;
+	height: 100%;
+}
+
+.u-legend {
+	font-size: 14px;
+	margin: auto;
+	text-align: center;
+}
+
+.u-inline {
+	display: block;
+}
+
+.u-inline * {
+	display: inline-block;
+}
+
+.u-inline tr {
+	margin-right: 16px;
+}
+
+.u-legend th {
+	font-weight: 600;
+}
+
+.u-legend th > * {
+	vertical-align: middle;
+	display: inline-block;
+}
+
+.u-legend .u-marker {
+	width: 1em;
+	height: 1em;
+	margin-right: 4px;
+	border: 2px solid transparent;
+}
+
+.u-inline.u-live th::after {
+	content: ":";
+	vertical-align: middle;
+}
+
+.u-inline:not(.u-live) .u-value {
+	display: none;
+}
+
+.u-series > * {
+	padding: 4px;
+}
+
+.u-series th {
+	cursor: pointer;
+}
+
+.u-legend .u-off > * {
+	opacity: 0.3;
+}
+
+.u-select {
+	background: var(--contrast-color);
+	opacity: 0.1;
+	position: absolute;
+	pointer-events: none;
+}
+
+.u-select.u-off {
+	display: none;
+}
+
+.u-cursor-x,
+.u-cursor-y {
+	position: absolute;
+	left: 0;
+	top: 0;
+	pointer-events: none;
+	will-change: transform;
+	z-index: 100;
+}
+
+.u-cursor-x {
+	height: 100%;
+	border-right: 1px dashed var(--graph-border-color);
+}
+
+.u-cursor-y {
+	width: 100%;
+	border-bottom: 1px dashed var(--graph-border-color);
+}
+
+.u-cursor-pt {
+	position: absolute;
+	top: 0;
+	left: 0;
+	border-radius: 50%;
+	filter: brightness(85%);
+	pointer-events: none;
+	will-change: transform;
+	z-index: 100;
+}
+</style>
diff --git a/gui/src/dashboard/Placeholder.vue b/gui/src/dashboard/Placeholder.vue
index b658804..c7f4de6 100644
--- a/gui/src/dashboard/Placeholder.vue
+++ b/gui/src/dashboard/Placeholder.vue
@@ -3,12 +3,14 @@
 		<div
 			class="placeholder-option"
 			v-for="opt in options"
+			:key="opt.id"
 			:style="{ height: optionSize + 'px', width: optionSize + 'px' }"
 		>
 			<div class="icon-container noDrag" @click="select(opt.type)">
 				<font-awesome-icon
 					:icon="opt.icon"
 					:style="{ width: '100%', height: '100%' }"
+					:title="opt.title"
 				/>
 			</div>
 		</div>
@@ -28,8 +30,9 @@ export default {
 			height: null,
 			// TODO: Make a registry
 			options: [
-				{ type: "ControlPanel", icon: "sliders-h" },
-				{ type: "Graph", icon: "chart-bar" },
+				{ type: "ControlPanel", icon: "sliders-h", title: "Control Panel"},
+				{ type: "Graph", icon: "chart-bar", title: "Graph"},
+				{ type: "GraphMinMax", icon: "chart-line", title: "Min/Max Graph"},
 			],
 		};
 	},
diff --git a/gui/src/main.js b/gui/src/main.js
index 14e3d4c..28fd5bb 100644
--- a/gui/src/main.js
+++ b/gui/src/main.js
@@ -28,6 +28,7 @@ import {
 	faSatelliteDish,
 	faCircle,
 	faSquare,
+	fas,
 } from "@fortawesome/free-solid-svg-icons";
 import { faTrashAlt } from "@fortawesome/free-regular-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
@@ -56,7 +57,8 @@ library.add(
 	faCircle,
 	faSquare,
 	faPlay,
-	faClock
+	faClock,
+	fas
 );
 
 Vue.component("font-awesome-icon", FontAwesomeIcon);