uRADMonitor API Charts

An example on how to use the uRADMonitor API calls

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dygraph/1.1.1/dygraph-combined.js"></script>
<body style="padding:10px;">

<!-- DEFINE SOME SIMPLE HTML CODE -->
<h3>uRADMonitor API example</h3>
<hr>
<div style="width:800px; padding: 10px;">
Status: <span id="status">Idle</span>
</div>
<br>
<div style='width:800px;height:400px;border-style: solid; border-width: 2px;' id="area"><span id="title"></span><div id="graphdiv" style='width:100%;height:350px;'></div>
</body>
</html>

JavaScript

// HELPER FUNCTIONS FOR URADMONITOR API
	downloadData(86400, "11000003", "cpm", "204", "8cc846e55e322e4dc69aaa36522e188f" );
	function downloadData(time, id, sensor, u, k) {
		$("#status").html('loading').css('color', 'magenta');
		$.ajax({
		    	type: 'GET',
		    	url: "https://data.uradmonitor.com/api/v1/devices/" + id + "/" + sensor + "/" + time,
		    	dataType: 'json',
			headers: { 'Content-Type' : 'text/plain', 'X-User-id': u, 'X-User-hash': k },
		    	success: function(data, status) { 
				if (status != 'success') {
					$("#status").html('error').css('color', 'red');
				} else {
					if (Object.keys(data)[0] == 'error')
						$("#status").html(data['error']).css('color', 'red');
					else {
						var stringified = JSON.stringify(data);
						$("#status").html('ok ' + (data.length?(data.length+' row(s) '):' ') + (stringified.length/1000) + ' KB').css('color', 'green');
						
						drawChart(id, data, sensor);
					}
				}
		    	},
		    	async: true
		});
	}
	
	function drawChart(id, data, sensor) {
		var plot = [];
		for(var index in data) {
			if(!data.hasOwnProperty(index)) continue;
			var unit = data[index];
			var value = parseFloat(unit[sensor]);
			plot[index] = [new Date(unit.time * 1000), value];
		}
        sensor = "dose";
		chart.updateOptions({ 
		    	colors: ['#0d0dff', '0dff0d'],
	            labels: ['Time', sensor],
		        'file': plot,
		        ylabel: "CPM",
		    }
		);
	}
	
	// START EXECUTION
        var chart = new Dygraph(
		'graphdiv', [], {
			axisLabelColor: '#555',
			legend: 'always',
            labelsDivStyles: { 'textAlign': 'right' },
            connectSeparatedPoints: true,
            colors: [],
	        labels: []
		}
	);
        downloadData(86400, "11000003", "cpm", "204", "8cc846e55e322e4dc69aaa36522e188f" );