title: How do I refresh data from json-file with charts.js?
body: <p>I'm attempting to make a live graph with data from my sensors, and currently that's working, but I'm not sure how to get it to update by itself. 
  I'm using node/express/pug, and I have a backend which listens for MQTT messages and appends them to a json file, keeping the latest 30 values or so. 
  The frontend's routing index.js parses the JSON and structures it in arrays, which are passed to the pug template, which the javascript inside it can then access.</p>
  
  <p>My question is, in order for this to dynamically reload, can I still do it like this, through index.js, or do I need to do it another way? Ideally some sort of notification when the file is updated from the backend to front end, but a timer will be perfectly adequate. The updates will be at about 1000ms. 
  I am quite a beginner in javascript/web development.</p>
  
  <p>My index.js file, the last part is the relevant part:</p>
  
  <pre><code>var router = express.Router();
  var db;
  var fs = require('fs');
  var moment = require('moment');
  
  /* GET home page. */
  router.get('/', function(req, res, next) {
    res.render('index', { title: 'Sematek StrainMonitor' });
    next();
  });
  
  //when rawdata is loaded, load client
  router.get('/rawdata', function(req, res) {
  
    var dateFrom = req.query.from;
    var dateTo = req.query.to;
    var dateFromEpoch = moment(dateFrom).unix();
    var dateToEpoch = moment(dateTo).unix();
  
    let searchQuery;
    if ((dateFromEpoch) &amp;&amp; (dateToEpoch)) {
      searchQuery = "{epoch : { $gt :  " + dateFromEpoch + ", $lt : " + dateToEpoch + "}}";
    };
  
    req.conn.then(client=&gt; client.db('test').collection('sensor0').find({searchQuery}).toArray(function(err, docs) {
      if(err) { console.error(err) }
      if (!docs) {
        console.log("oops.. didn't retrieve any docs from the mongodb serv");
      }
      const dataPairsDB = docs.map(e =&gt; ({x: e.epoch, y: e.data}) );
      let datasetDB = [];
      let labelsetDB = [];
      dataPairsDB.forEach((num,index) =&gt; {
        labelsetDB.push(moment.unix(dataPairsDB[index].x).format('HH:mm:ss'));
        datasetDB.push(dataPairsDB[index].y);
      });
  
      console.log(req.query)
  
      //gets CloudMQTT values from JSON file and converts it into two arrays for Chart.js display
        let data = JSON.parse(fs.readFileSync("./json/latest-value.json"));
  
        const dataPairs = data.readings.map(e =&gt; ({x: e.epoch, y: e.data}) );
        let dataset = [];
        let labelset = [];
        dataPairs.forEach((num,index) =&gt; {
          labelset.push(moment.unix(dataPairs[index].x).format('HH:mm:ss'));
          dataset.push(dataPairs[index].y);
        });
  
      if (req.cookies.isLoggedIn == 'true') {
        res.render('rawdata', {
          docs : docs,
          datasetDB : JSON.stringify(datasetDB),
          labelsetDB : JSON.stringify(labelsetDB),
          dataset : JSON.stringify(dataset),
          labelset : JSON.stringify(labelset)
        });
      } else {
        res.redirect(401,'/');
      }
    }))
  });
  
  </code></pre>
  
  <p>From my rawdata.pug file:</p>
  
  <pre><code>        canvas(id="line-chart" )
          script(src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js')
          script(type='text/javascript').
              var dataset = JSON.parse('!{dataset}');
              var labelset = JSON.parse('!{labelset}');
          script(src='/scripts/charter.js') 
  </code></pre>