setInterval to update at random time, within the second half of the minute. e.g. to help spread server load
If FAIL, set time-out to ensure PASS If PASS, set interval to reload every 60 seconds
*View browser console for feedback
| (function() { | |
| 'use strict'; | |
| var time = function() { | |
| return moment().format('h:mm:ss a'); | |
| }; | |
| function updateChart() { | |
| d3.select('#current-seconds') | |
| .append('li') | |
| .style('width', function() { return _.random(300, 800) + 'px'; }) | |
| .html('<i class="fa fa-bar-chart"></i> chart updated: ' + time()); | |
| } | |
| // have a reference of the current seconds | |
| console.log('current time in seconds'); | |
| console.log(moment().format('ss')); | |
| // update chart every minute (from random start) | |
| // base source: http://stackoverflow.com/a/14644729/1711570 | |
| function setChartInterval() { | |
| // have a reference of the current seconds | |
| var currentDateSeconds = moment().format('ss'); | |
| console.log('current time in seconds: ' + '\n' + currentDateSeconds); | |
| // PASS if initial page load is within the second half of minute | |
| if (currentDateSeconds > 30 && currentDateSeconds <= 55) { | |
| // update chart every 60 seconds | |
| setInterval(updateChart, 60000); | |
| console.log('PASSED: so refresh every 60 seconds'); | |
| console.log(moment().format('h:mm:ss a')); | |
| } | |
| else { | |
| setTimeout(function () { | |
| setChartInterval(); | |
| }, ((_.random(30, 40)) - currentDateSeconds) * 1000); | |
| console.log('FAIL: so set setTimeout (with some randomness)'); | |
| console.log(moment().format('h:mm:ss a')); | |
| } | |
| } | |
| updateChart(); | |
| setChartInterval(); | |
| })(); |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>d3 | update chart</title> | |
| <meta name="author" content="Sundar Singh | eesur.com"> | |
| <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
| <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script> | |
| <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.9.3/lodash.min.js"></script> | |
| <style type="text/css"> | |
| @import url(http://fonts.googleapis.com/css?family=Source+Code+Pro:400,600); | |
| body { | |
| font-family: "Source Code Pro", Consolas, monaco, monospace; | |
| line-height: 1.5; | |
| font-weight: 400; | |
| background-color: #130C0E; | |
| padding: 20px; | |
| } | |
| #current-seconds { | |
| list-style: none; | |
| margin: 0; | |
| padding: 0; | |
| margin-top: 30px; | |
| } | |
| #current-seconds li { | |
| padding: 4px 8px; | |
| margin-bottom: 8px; | |
| background: #00B0DD; | |
| letter-spacing: 1px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <ul id="current-seconds"></ul> | |
| <script src="d3_code_updatechart.js" charset="utf-8"></script> | |
| </body> | |
| </html> |
