Skip to content

Instantly share code, notes, and snippets.

@pauldix

pauldix/example_data.json Secret

Last active January 4, 2016 17:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pauldix/2d3bcb1eb4b70532f6f1 to your computer and use it in GitHub Desktop.
Save pauldix/2d3bcb1eb4b70532f6f1 to your computer and use it in GitHub Desktop.
Download ZIP
Examples files from Building Custom Analytics with InfluxDB and D3
Raw
example_data.json
[
{
"name": "events",
"columns": ["type", "email"],
"points": [
["signup", "paul@influxdb.com"],
["paid", "foo@asdf.com"]
]
}
]
[
{
"name": "cpu",
"columns": ["time", "value", "host"],
"points": [
[1395168540, 56.7, "foo.influxdb.com"]
]
}
]
Raw
graph.coffee
renderDetail = (series, x) =>
startTime = x
endTime = startTime + 3600
q = "select * from events3 where time > " + startTime +
"s and time < " + endTime +
"s and type = '" + series + "'"
parent.influxdb.query(q, (points) =>
console.log(points)
ul = "<ul>"
points.forEach (point) =>
li = "<li>"
li += point.email
li += "</li>"
ul += li
ul += "</ul>"
$("#events_detail").html(ul)
)
parent.influxdb.query("SELECT COUNT(type) FROM events3 GROUP BY time(1h), type fill(0);", (points) =>
typeToSeries = {}
points.forEach((point) =>
series = typeToSeries[point.type]
if !series
typeToSeries[point.type] = [];
series = typeToSeries[point.type];
series.push({x: point.time / 1000, y: point.count})
)
lastColorUsed = -1
colors = d3.scale.category10()
data = for type, series of typeToSeries
lastColorUsed += 1
data: series.reverse(), color: colors(lastColorUsed)
#console.log(data)
graph = new Rickshaw.Graph(
height: 200,
element: document.querySelector("#events_graph"),
renderer: 'area',
stroke: true,
series: data
)
hoverDetail = new Rickshaw.Graph.HoverDetail(
graph: graph,
formatter: (series, x, y) ->
date = '<span class="date">' + new Date(x * 1000).toUTCString() + '</span>'
swatch = '<span class="detail_swatch" style="background-color: ' + series.color + '"></span>'
content = swatch + series.name + ": " + parseInt(y) + '<br>' + date
renderDetail(series.name, x)
content
)
graph.render()
)
Raw
index1.html
<html>
<head>
<title>Paul's Custom Dash</title>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" media="screen" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Paul's Custom Dash</h1>
</div>
</div>
<div class="row">
<div class="col-md-6" id="events_graph"></div>
</div>
<div class="row">
<h3>Detail</h3>
<div class="col-md-6" id="events_detail"></div>
</div>
</div>
</body>
</html>
Raw
initial_setup.sh
# make the dir in the local admin interface dir so it shows up on the drop down
mkdir /usr/local/opt/influxdb/share/admin/interfaces/paul_owns
# make the dir and file in the influxdb-admin repo
mkdir source/interfaces/paul_owns
touch source/interfaces/paul_owns/index.html # or slim, etc.
Raw
scripts_and_style.html
<script src="http://code.jquery.com/jquery-2.0.3.min.js" type="text/javascript"></script>
<script src="http://d3js.org/d3.v3.min.js" type="text/javascript"></script>
<script src="http://influxdb.org/javascripts/vendor/rickshaw.js" type="text/javascript"></script>
<script src="/javascripts/interfaces/paul_owns.js" type="text/javascript"></script>
<link href="http://influxdb.org/stylesheets/vendor/rickshaw.css" media="screen" rel="stylesheet" type="text/css">
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment