templates/test.html

<head>
  <link href="/static/css/c3.min.css" rel="stylesheet">
  <link href="/static/css/bootstrap.min.css" rel="stylesheet">
  <script type="text/javascript" src="/static/js/jquery.min.js"></script>
  <script type="text/javascript" src="/static/js/d3.min.js"></script>
  <script type="text/javascript" src="/static/js/c3.min.js"></script>
</head>

<body>
  <div class="container">
    <h1>Keras - Total Visualization Project</h1>
    <h2>Initial tests</h2>

    <hr>
    <div id="visualization"></div>
  </div>

</body>

<script type="text/javascript">
  $(document).ready(function(){
    var monitored = {};
    var source = new EventSource('/subscribe/epoch/end/');
    var chart = null;

    source.addEventListener('message', function(e) {
      console.log(e.data);
      var data = JSON.parse(e.data);
      console.log(data);
      if (chart === null) {
        for (key in data) {
          monitored[key] = [key, data[key]];
        }
        var columns = [];
        for (key in monitored) {
          columns.push(monitored[key]);
        }
        chart = c3.generate({
            bindto:'#visualization',
            data: {
                x: 'epoch',
                columns: columns
            }
        });
      }
      else {
        for (key in data) {
          if (key in monitored) {
            monitored[key].push(data[key]);
          }
          var columns = [];
          for (key in monitored) {
            columns.push(monitored[key]);
          }
          chart.load({
            columns: columns
          });
        }
      }
    }, false);
  });

</script>