LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
#container {
  height: 400px;
  margin: 10px auto;
  width: 600px;
}
JS
(function(window, document, undefined) {
	let reqURL = 'http://www.json-generator.com/api/json/get/bUMDKSZmUO',
		toggle,
		loadData = true,
		timerID,
		chart,
		loadInterval = 3000;
	
	let viz = {
		load: function() {
			if (document.attachEvent ? document.readyState === 'complete' : document.readyState !== 'loading') {
				this.init.bind(this);
			} else {
				document.addEventListener('DOMContentLoaded', this.init.bind(this));
			}
		},
		
		init: function() {
			toggle = document.getElementById('toggle');
			toggle.onclick = this.toggleDataRequest.bind(this);
			
			this.initChart();
		},
		
		initChart: function() {
			let series;
			
			series = [{
				type: 'line',
				data: []
			}];
			
			chart = Highcharts.chart('container', {
				title: {
					text: 'Animation issues POC'
				},
				series: series
			});
			
			this.startPolling();
		},
		
		requestData: function() {
			let req;
			return new Promise((resolve, reject) => {
				req = new XMLHttpRequest();
				req.responseType = 'json'
				req.open('GET', reqURL);
				req.onload = () => {
					if (req.status >= 200 && req.status <= 300) {
						resolve(req.response);
					} else {
						console.log('rejected - req', req);
						reject({
							status: req.status,
							statusText: req.statusText
						});
					}
				};
				
				req.onerror = () => {
					console.log('onError - req', req);
					reject({
						status: req.status,
						statusText: req.statusText
					});
				};
				// req.open('GET', reqURL);
				req.send();
			});
		},
		
		startPolling: function() {
			timerID = setInterval(() => {
				console.log('Polling data');
				this.requestData()
					.then(res => {
						let category, lastSoldPrice;
						Object.keys(res).forEach(cv => {
							category = res[cv]['category'];
							lastSoldPrice = res[cv]['lastSoldPrice'] * 1;
							console.log('Add points to viz: ', category, lastSoldPrice);
							chart.series[0].addPoint([category, lastSoldPrice], false, false);
						});

						chart.redraw();
					})
					.catch(e => {
						console.log('ohh snap:', e);
					});
				}, loadInterval);
		},
		
		toggleDataRequest: function(e) {
			e.preventDefault();
			let txt;
			
			loadData = !loadData;
			
			if (loadData) {
				txt = 'Stop data';
				console.log('Starting data polling...');
				this.startPolling();
			} else {
				txt = 'Start data';
				console.log('Stopping data polling...');
				clearInterval(timerID);
			}
			
			toggle.textContent = txt;
		}
	};
	
	viz.load();
})(window, window.document);
Term
Wed, 12/27/2017 - 06:58

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv