title: Real Time Chart Generation using epoch.js
body: <p>I am trying to create a simple real time chart using <strong>epoch.js</strong> which updates itself on a click event. </p>
  
  <p>My code posted below has a total of 3 functions. They are:<br>
  1) generate a random value <br>
  2) generate the current date and time in milliseconds. <br>
  3) onclick event that updates chart datapoints.<br></p>
  
  <p>Though I have datapoints in the right format as required for the chart. I am unable to update it .</p>
  
  <p>Appreciate any help on find out as to why the graph is not working as it should.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>///////////////this function generates the date and time in milliseconds//////////
  function getTimeValue() {
    var dateBuffer = new Date();
    var Time = dateBuffer.getTime();
    return Time;
  }
  
  ////////////// this function generates a random value ////////////////////////////
  function getRandomValue() {
    var randomValue = Math.random() * 100;
    return randomValue;
  }
  
  ////////////// this function is used to update the chart values /////////////// 
  function updateGraph() {
    var newBarChartData = [{
      label: "Series 1",
      values: [{
        time: getTimeValue(),
        y: getRandomValue()
      }]
    }, ];
    barChartInstance.push(newBarChartData);
  }
  
  ////////////// real time graph generation////////////////////////////////////////   
  var barChartData = [{
    label: "Series 1",
    values: [{
      time: getTimeValue(),
      y: getRandomValue()
    }]
  }, ];
  
  var barChartInstance = $('#barChart').epoch({
    type: 'time.bar',
    axes: ['right', 'bottom', 'left'],
    data: barChartData
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;head&gt;
    &lt;script src="https://code.jquery.com/jquery-1.11.3.js"&gt;
    &lt;/script&gt;
    &lt;script src="http://www.goldhillcoldtouch.co.uk/wp-content/uploads/d3.min.js"&gt;
    &lt;/script&gt;
    &lt;script src="http://www.goldhillcoldtouch.co.uk/wp-content/uploads/epoch.min.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" type="text/css" href="http://www.goldhillcoldtouch.co.uk/wp-content/uploads/epoch.min.css"&gt;
  &lt;/head&gt;
  
  &lt;div id="barChart" class="epoch category10" style="width:320px; height: 240px;"&gt;&lt;/div&gt;
  &lt;p id="updateMessage" onclick="updateGraph()"&gt;click me to update chart&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>