Skip to content

Instantly share code, notes, and snippets.

@maslick

maslick/index.html

Last active February 16, 2017 07:36
Show Gist options
  • Save maslick/13e6a2fb854a1582285b44155ab7b18a to your computer and use it in GitHub Desktop.
Save maslick/13e6a2fb854a1582285b44155ab7b18a to your computer and use it in GitHub Desktop.
Download ZIP
Pingo-pongo
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Pingo-pongo</title>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
</head>
<body>
<div class="logo">
<img src="http://tiger.co.uk/images/icons/other/blackbox.png" alt="" />
</div>
<h1>
Pingo/pongo<br>
<span class="room">[room #33a]</span>
</h1>
<div id="buts">
<button id="10min">last 10 min</button>
<button id="30min">last 30 min</button>
<button id="1h">last 1h</button>
<button id="2h">last 2h</button>
<button id="8h">last 8h</button>
<button id="24h">last 24hs</button>
</div>
<div id="chartdiv"></div>
<script src="pingo.js"></script>
</body>
Raw
pingo.js
var chartData = generateChartData(2);
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"legend": {
"useGraphSettings": true,
"align": "center"
},
"marginRight": 80,
"autoMarginOffset": 20,
"marginTop": 7,
"dataProvider": chartData,
"valueAxes": [
{
"id": "temperature",
"minimum": 0,
"maximum": 30,
"axisColor": "#FF0000",
"axisThickness": 2,
"axisAlpha": 1,
"position": "left"
},
{
"id": "light",
"axisColor": "#FCD202",
"axisThickness": 2,
"axisAlpha": 1,
"position": "right"
},
{
"id": "pressure",
"minimum": 920,
"maximum": 1020,
"axisColor": "#000000",
"axisThickness": 2,
"gridAlpha": 0,
"offset": 50,
"axisAlpha": 1,
"position": "left"
},
{
"id": "humidity",
"minimum": 10,
"maximum": 100,
"axisColor": "#0000FF",
"axisThickness": 2,
"axisAlpha": 1,
"offset": 50,
"dashLength": 1,
"position": "right"
}
],
"mouseWheelZoomEnabled": false,
"graphs": [
{
"valueAxis": "temperature",
"lineColor": "#FF0000",
"bullet": "round",
"bulletBorderThickness": 1,
"hideBulletsCount": 50,
"title": "Temperature, °C",
"valueField": "temperature",
"fillAlphas": 0,
"type": "smoothedLine"
},
{
"valueAxis": "light",
"lineColor": "#FCD202",
"bullet": "square",
"bulletBorderThickness": 1,
"hideBulletsCount": 50,
"title": "Light, lux",
"valueField": "light",
"type": "smoothedLine",
"fillAlphas": 0
},
{
"valueAxis": "pressure",
"bullet": "triangleUp",
"lineColor": "#000000",
"bulletBorderThickness": 1,
"hideBulletsCount": 50,
"title": "Pressure, hPa",
"valueField": "pressure",
"type": "smoothedLine",
"fillAlphas": 0
},
{
"valueAxis": "humidity",
"bullet": "round",
"lineColor": "#0000FF",
"bulletBorderAlpha": 1,
"hideBulletsCount": 50,
"title": "Humidity, %",
"valueField": "humidity",
"type": "smoothedLine",
"useLineColorForBulletBorder": true
},
{
"valueAxis": "humidity",
"bullet": "round",
"lineColor": "#00DDFF",
"bulletBorderAlpha": 1,
"hideBulletsCount": 50,
"title": "Air quality, %",
"valueField": "airquality",
"type": "smoothedLine",
"useLineColorForBulletBorder": true
},
{
"valueAxis": "temperature",
"lineColor": "#ff9a9a",
"bullet": "triangleDown",
"bulletBorderThickness": 2,
"hideBulletsCount": 50,
"title": "Sound, dB",
"valueField": "sound",
"fillAlphas": 0,
"type": "smoothedLine"
}
],
"chartScrollbar": {
"autoGridCount": true,
"graph": "g1",
"scrollbarHeight": 40
},
"chartCursor": {
"limitToGraph": "g1"
},
"categoryField": "timestamp",
"categoryAxis": {
"parseDates": true,
"axisColor": "#DADADA",
"dashLength": 1,
"minorGridEnabled": true
},
"chartCursor": {
"categoryBalloonDateFormat": "JJ:NN, DD MMMM",
"cursorPosition": "mouse"
},
"export": {
"enabled": true
}
});
chart.addListener("rendered", zoomChart);
zoomChart();
// this method is called when chart is first inited as we listen for "rendered" event
function zoomChart() {
// different zoom methods can be used - zoomToIndexes, zoomToDates, zoomToCategoryValues
chart.zoomToIndexes(chartData.length - 3000, chartData.length - 1);
}
var categoryAxis = chart.categoryAxis;
categoryAxis.parseDates = true;
categoryAxis.equalSpacing = true;
categoryAxis.minPeriod = "HH";
categoryAxis.boldPeriodBeginning = false;
chart.connect = true;
chart.dataDateFormat = "YYYY-MM-DD HH:MM:SS";
function generateChartData(minutes) {
var base_url = "http://activeclouder.ijs.si:8081/shkatlica/search/";
var times = calculateStartEnd(minutes);
var data;
var timenow = Date.now();
$.ajax({
url: base_url + "findAllByTimestampBetweenOrderByTimestampAsc?start=" + times.start + "&end=" + times.end,
async: false
})
.done(function(d) {
data = d._embedded.datas;
});
console.log("Loading json: " + (Date.now() - timenow) + " ms");
timenow = Date.now();
if (data.length == 0) return [];
var dataset = new Array(data.length);
_.each(data, function(x, i) {
var date = new Date(x["timestamp"]);
dataset[i] = {
timestamp: date,
temperature: x["temperature_h"],
light: x["light"],
humidity: x["humidity"],
pressure: x["pressure"],
airquality: x["airq"],
sound: x["sound"]
};
});
console.log("Parsing data: " + (Date.now() - timenow) + " ms");
console.log("Data size: " + dataset.length + " rows");
return dataset;
}
$("#10min").click(function(){
var timenow = Date.now();
draw(generateChartData(10));
chart.validateData();
console.log("Drawing data: " + (Date.now() - timenow) + " ms");
});
$("#30min").click(function(){
var timenow = Date.now();
draw(generateChartData(30));
chart.validateData();
console.log("Drawing data: " + (Date.now() - timenow) + " ms");
});
$("#1h").click(function(){
var timenow = Date.now();
draw(generateChartData(60));
chart.validateData();
console.log("Drawing data: " + (Date.now() - timenow) + " ms");
});
$("#2h").click(function(){
var timenow = Date.now();
draw(generateChartData(60*2));
chart.validateData();
console.log("Drawing data: " + (Date.now() - timenow) + " ms");
});
$("#8h").click(function(){
var timenow = Date.now();
draw(generateChartData(60*8));
chart.validateData();
console.log("Drawing data: " + (Date.now() - timenow) + " ms");
});
$("#24h").click(function(){
var timenow = Date.now();
draw(generateChartData(60*24));
chart.validateData();
console.log("Drawing data: " + (Date.now() - timenow) + " ms");
});
function draw(data) {
if(!chart) return;
chart.dataProvider = data;
}
function calculateStartEnd(min) {
var curr_time = new Date().getTime();
var timeA = curr_time - min*60*1000;
return {start: timeA, end: curr_time }
}
Raw
style.css
#chartdiv {
width: 100%;
height: 500px;
}
button {
width: 100px;
height: 30px;
border: 0px;
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
background-color: #4CAF50;
padding: 5px;
margin: 1px 0;
outline: none;
font-family: courier;
font-weight: 200;
}
button:hover {
background-color: green;
}
button:active {
/* text-indent: -9999px; */
}
h1 {
text-align: center;
padding: 15px;
margin: 0px;
font-family: courier;
font-weight: 200;
}
#buts {
text-align: center;
padding: 25px;
padding-bottom: 15px;
}
.room {
font-size: 15px;
}
.logo {
text-align: center;
}
.logo img {
width: 200px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment