Skip to content

Instantly share code, notes, and snippets.

@ToeJamson

ToeJamson/1.html

Created August 27, 2015 22:14
Show Gist options
  • Save ToeJamson/224360212f9f4b05eacc to your computer and use it in GitHub Desktop.
Save ToeJamson/224360212f9f4b05eacc to your computer and use it in GitHub Desktop.
Download ZIP
Getting Started with JavaScript Realtime Dashboards
Raw
1.html
<script type="text/javascript" src="http://pubnub.com/developers/eon/lib/eon.js"></script>
<link type="text/css" rel="stylesheet" href="http://pubnub.com/developers/eon/lib/eon.css" />
Raw
10.html
<html>
<head>
<script type="text/javascript" src="http://pubnub.com/developers/eon/lib/eon-chart.js"></script>
<link type="text/css" rel="stylesheet" href="http://pubnub.com/developers/eon/lib/eon.css" />
</head>
<body>
<div id="chart"></div>
<script>
var channel = "c3-gauge" + Math.random();
eon.chart({
channel: channel,
generate: {
bindto: '#chart',
data: {
type: 'gauge',
},
gauge: {
min: 0,
max: 100
},
color: {
pattern: ['#FF0000', '#F6C600', '#60B044'],
threshold: {
values: [30, 60, 90]
}
}
}
});
</script>
<script>
var pubnub = PUBNUB.init({
publish_key: 'demo',
subscribe_key: 'demo'
});
setInterval(function(){
pubnub.publish({
channel: channel,
message: {
columns: [['data', Math.random() * 99]]
}
})
}, 1000);
</script>
</body>
</html>
Raw
11.js
[
{
latlng: [37.370375, -97.756138]
},
{},
{}
//...
]
Raw
12.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Taco Transport</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<style>
body {
margin: 0;
padding: 0;
}
#map {
position:absolute;
top:0;
bottom:0;
width:100%;
}
</style>
<script type="text/javascript" src="../../lib/eon.js"></script>
<link type="text/css" rel="stylesheet" href="../../lib/eon.css" />
</head>
<body>
<div id='map'></div>
<script>
function getNonZeroRandomNumber(){
var random = Math.floor(Math.random()*199) - 99;
if(random==0) return getNonZeroRandomNumber();
return random;
}
</script>
<script>
eon.map({
id: 'map',
mb_token: 'pk.eyJ1IjoiaWFuamVubmluZ3MiLCJhIjoiZExwb0p5WSJ9.XLi48h-NOyJOCJuu1-h-Jg',
mb_id: 'ianjennings.l896mh2e',
channel: channel,
connect: connect
});
function connect() {
var pubnub = PUBNUB.init({
publish_key: 'demo',
subscribe_key: 'demo'
});
setInterval(function(){
PUBNUB.publish({
channel: 'eon-map',
message:
[
{"latlng":[31,-99]},
{"latlng":[32,-100]},
{"latlng":[33,-101]},
{"latlng":[35,-102]}
]
});
}, 1000);
};
</script>
</body>
</html>
Raw
2
bower install eon-chart
bower install eon-map
Raw
3.html
<script type="text/javascript" src="http://pubnub.com/developers/eon/lib/eon-map.js"></script>
<script type="text/javascript" src="http://pubnub.com/developers/eon/lib/eon-chart.js"></script>
<link type="text/css" rel="stylesheet" href="http://pubnub.com/developers/eon/lib/eon.css" />
Raw
4.html
<script type="text/javascript" src="http://pubnub.com/developers/eon/lib/eon-chart.js"></script>
<link type="text/css" rel="stylesheet" href="http://pubnub.com/developers/eon/lib/eon.css" />
<div id="chart"></div>
Raw
5.html
<script>
eon.chart({
channel: 'chart-channel', // the pubnub channel for real time data
flow: true, // animate new points in
generate: { // c3 chart object
bindto: '#chart'
},
limit: 10 // the number of graph points
});
</script>
Raw
6.html
<script type="text/javascript" src="http://pubnub.com/developers/eon/lib/eon-map.js"></script>
<link type="text/css" rel="stylesheet" href="http://pubnub.com/developers/eon/lib/eon.css" />
<script>
Raw
7.js
eon.map({
channel: 'map-channel' // pubnub channel for data
id: 'map', // element id to bind to (#map)
mb_token: 'pk.eyJ1IjoiaWFuamVubmluZ3MiLCJhIjoiZExwb0p5WSJ9.XLi48h-NOyJOCJuu1-h-Jg', // mapbox token
mb_id: 'ianjennings.l896mh2e', // mapbox map id
});
</script>
Raw
8.js
[key, value]
Raw
9.js
{
columns: [
['data', Math.random() * 99],
[],
[]
//...
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment