Skip to content

Instantly share code, notes, and snippets.

@domadev812

domadev812/1.html

Forked from ToeJamson/1.html
Last active November 15, 2017 21:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save domadev812/e7e703eb956660ceeeddb34d22e20d9f to your computer and use it in GitHub Desktop.
Save domadev812/e7e703eb956660ceeeddb34d22e20d9f 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="//pubnub.github.io/eon/v/eon/1.0.0/eon.js"></script>
<link type="text/css" rel="stylesheet" href="//pubnub.github.io/eon/v/eon/1.0.0/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({
pubnub: pubnub,
channels: [channel],
generate: {
bindto: '#chart',
data: {
labels: true,
type: 'gauge'
},
bar: {
width: {
ratio: 0.5
}
},
tooltip: {
show: false
}
}
});
</script>
<script>
var pubnub = new PubNub({
publishKey: 'demo',
subscribeKey: 'demo'
});
setInterval(function(){
pubnub.publish({
channel: channel,
message: {
eon: {
'Austin': Math.floor(Math.random() * 99),
'New York': Math.floor(Math.random() * 99),
'San Francisco': Math.floor(Math.random() * 99),
'Portland': Math.floor(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="//pubnub.github.io/eon/v/eon/1.0.0/eon.js"></script>
<link type="text/css" rel="stylesheet" href="//pubnub.github.io/eon/v/eon/1.0.0/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({
pubnub: pubnub,
channels: [channel],
id: 'html-id',
mbToken: '...',
mbId: 'ianjennings.l896mh2e'
});
function connect() {
var pubnub = new PubNub({
publishKey: 'demo',
subscribeKey: 'demo'
});
setInterval(function(){
pubnub.publish({
channel: 'eon-map-multiple',
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="//pubnub.github.io/eon/v/eon/1.0.0/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="//pubnub.github.io/eon/v/eon/1.0.0/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="//pubnub.github.io/eon/v/eon/1.0.0/eon.css"/>
<script>
Raw
7.js
eon.map({
pubnub: pubnub,
channels: ['map-channel'],
id: 'map',
mbToken: '...',
mbId: 'ianjennings.l896mh2e'
});
</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