Added graph

app.js

@@ -1,3 +1,74 @@
+const graph = new Vue({
+  el: "#graph",
+  data: {
+    candles: [],
+    latest:  undefined
+  },
+  methods: {
+    addCandle: (candle) => {
+      graph.candles.push({
+        date:  candle[0],
+        value: candle[2]
+      });
+      graph.latest = new Date(candle[0]);
+    }
+  },
+  watch: {
+    candles: (values) => {
+      sorted = values.slice();
+      sorted.sort((a, b) => {
+        if (a.date < b.date) return -1;
+        if (a.date > b.date) return  1;
+        return 0;
+      });
+      dates = sorted.map((d) => d.date);
+      for (let i=0; i<30; i++) {
+        last = dates[dates.length - 1];
+        dates.push(last + 60000);
+      }
+
+      d3.select("#data").select("g").remove();
+
+      element = document.querySelector("#chart-space");
+      margin  = {
+        top:    10,
+        right:  30,
+        bottom: 100,
+        left:   60
+      }
+      height  = element.clientHeight - margin.top  - margin.bottom;
+      width   = element.clientWidth  - margin.left - margin.right;
+
+      svg = d3.select("#data")
+        .append("g")
+        .attr("transform", `translate(${margin.left}, ${margin.top})`);
+      x = d3.scaleTime()
+        .domain(d3.extent(dates, (d) => { return d }))
+        .range([ 0, width ]);
+      svg.append("g")
+        .attr("transform", `translate(0, ${height})`)
+        .call(d3.axisBottom(x));
+      y = d3.scaleLinear()
+        .domain([0, d3.max(sorted, (d) => { return +d.value })])
+        .range([ height, 0 ]);
+      svg.append("g")
+        .call(d3.axisLeft(y));
+
+      svg.append("path")
+        .datum(sorted)
+        .attr("fill", "none")
+        .attr("stroke", "black")
+        .attr("stroke-width", 2)
+        .attr("d", d3.line().x((d) => {
+          return x(d.date);
+        }).y((d) => {
+          return y(d.value);
+        }));
+
+    }
+  }
+});
+
 const websocket = new Vue({
   el: "#websocket",
   created: () => {
@@ -22,7 +93,7 @@ const websocket = new Vue({
   },
   methods: {
     processCandle: (candle) => {
-      console.log(candle);
+      graph.addCandle(candle);
     },
     processValues: (json) => {
       if (Array.isArray(json[1][0])) {