I have figured out how demo.html works. The graph is now animated. NEXT: call web server to fetch the data.

demo/simulation/static/demo.html

@@ -130,13 +130,14 @@
       </div>
     </div>
   </div>
+
   <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
-
   <script type="text/javascript" src="http://bernii.github.io/gauge.js/dist/gauge.min.js"></script>
   <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
   <script src="https://cdn.rawgit.com/novus/nvd3/v1.8.1/build/nv.d3.min.js"></script>
   <script src="cypher/codemirror.js"></script>
   <script src="cypher/cypher.js"></script>
   <script src="demo.js"></script>
+
 </body>

demo/simulation/static/demo.js

@@ -96,8 +96,9 @@
     }
   }
 
+  // counters init
   let value = 0;
-  let maxQps = 5000;
+  let maxQps = 15000;
 
   let card1 = new QueryCard($('#q1')[0], maxQps);
   let card2 = new QueryCard($('#q2')[0], maxQps);
@@ -108,6 +109,7 @@
   let card7 = new QueryCard($('#q7')[0], maxQps);
   let card8 = new QueryCard($('#q8')[0], maxQps);
 
+  // counters update
   function run() {
     setTimeout(() => {
       value += 10;
@@ -127,16 +129,18 @@
       run();
     }, 20);
   }
-
   run();
 
-
+  // graph init
+  var data = [];
+  var chart;
+  var chartData;
   nv.addGraph(function() {
-    var chart = nv.models.lineChart()
-                  .useInteractiveGuideline(true)
-                  .showLegend(true)
-                  .showYAxis(true)
-                  .showXAxis(true);
+    chart = nv.models.lineChart()
+         .useInteractiveGuideline(true)
+         .showLegend(true)
+         .showYAxis(true)
+         .showXAxis(true);
 
     chart.xAxis
          .axisLabel('Time (s)')
@@ -146,41 +150,41 @@
          .axisLabel('QPS')
          .tickFormat(d3.format(',r'));
 
-    var myData = sinAndCos();
-
-    d3.select('#chart svg')
-      .datum(myData)
-      .call(chart);
+    chartData = d3.select('#chart svg')
+      .datum(data);
+    chartData.call(chart);
 
     chart.update();
     nv.utils.windowResize(function() { chart.update(); });
     return chart;
   });
 
-  function sinAndCos() {
-    var sin = [],sin2 = [],
-        cos = [];
-
-    for (var i = 0; i < 100; i++) {
-      sin.push({x: i, y: Math.sin(i/10)});
-      sin2.push({x: i, y: Math.sin(i/10) *0.25 + 0.5});
-      cos.push({x: i, y: 0.5 * Math.cos(i/10)});
-    }
-
-    return [{
-        values: sin,
-        key: 'Sine Wave',
-        color: '#ff7f0e'
+  // graph update
+  let x = 0;
+  function updateGraph() {
+    setTimeout(() => {
+      x += 1;
+      if (x > 100)
+        x = 0
+      var memgraphLine = [];
+      var neo4jLine = [];
+      for (var i = 0; i < x; i++) {
+        memgraphLine.push({x: i, y: 100 * Math.random() + 1000});
+        neo4jLine.push({x: i, y: 100 * Math.random() + 50});
+      }
+      var newData = [{
+        values: memgraphLine,
+        key: 'Memgraph',
+        color: '#ff0000'
       }, {
-        values: cos,
-        key: 'Cosine Wave',
-        color: '#2ca02c'
-      }, {
-        values: sin2,
-        key: 'Another sine wave',
-        color: '#7777ff',
-        area: true
+        values: neo4jLine,
+        key: 'Neo4j',
+        color: '#0000ff'
       }];
+      chartData.datum(newData).transition().duration(500).call(chart);
+      updateGraph();
+    }, 1000);
   }
+  updateGraph();
 
 })();

demo/simulation/web_server.py

@@ -34,6 +34,8 @@ class SimulationWebServer(object):
         Setup all routes.
         '''
         self.add_route('/ping', self.ping, 'GET')
+        self.add_route('/', self.index, 'GET')
+        self.add_route('/<path:path>', self.static, 'GET')
         self.add_route('/tasks', self.tasks_get, 'GET')
         self.add_route('/tasks', self.tasks_set, 'POST')
         self.add_route('/start', self.start, 'POST')
@@ -67,6 +69,19 @@ class SimulationWebServer(object):
         '''
         return ('', 204)
 
+    def index(self):
+        '''
+        Serves demo.html on the index path.
+        '''
+        print('index')
+        return self.server.send_static_file('demo.html')
+
+    def static(self, path):
+        '''
+        Serves other static files.
+        '''
+        return self.server.send_static_file(path)
+
     def tasks_get(self):
         '''
         Retutns all defined tasks.

demo/static/demo.py

@@ -1,6 +0,0 @@
-
-
-class Chromosome(object):
-
-    def __init__(self, k):
-        pass