Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

added sparkline functionality

  • Loading branch information...
commit 0f89ac19f9bb9eabbd2418783410b3aac217fa58 1 parent 529ac9f
@deanmalmgren deanmalmgren authored
View
2  example_project/templates/base.html
@@ -26,5 +26,7 @@
{% endblock content %}
<!-- removed a bunch of js from html5bp -->
+ {% block js %}
+ {% endblock js %}
</body>
</html>
View
18 flux/static/flux/css/flux_timeseries.css
@@ -33,7 +33,6 @@
}
// styling for the flux_timeseries block
-
.flux_timeseries .timeseries {
width: 100px;
height: 50px;
@@ -43,8 +42,8 @@
.bin_outer {
float: left;
height: 26px;
- margin-top: 13px;
- margin-bottom: 13px;
+ margin-top: 12px;
+ margin-bottom: 12px;
position: relative;
}
.bin_inner {
@@ -56,9 +55,22 @@
.flux_timeseries {
width: 100px;
+ height: 50px;
float: left;
}
+.flux_timeseries svg.timeseries.sparkline {
+ width: 100px;
+ height: 26px;
+ margin-top: 12px;
+ margin-bottom: 12px;
+}
+.sparkline path {
+ stroke: #bbb;
+ stroke-width: 2;
+ fill: none;
+}
+
.flux_timeseries_container .clear {
clear: both;
padding: 0;
View
70 flux/static/flux/js/sparklines.js
@@ -0,0 +1,70 @@
+// convert the bar charts into sparklines
+$(document).ready(function () {
+
+ // TODO: only run this functionality when the browser is svg
+ // compliant. Use modernizr?
+
+
+ // get the counts from all of the data-count attributes on
+ // .bin_inner and store them in a data array
+ var data = [];
+ d3.selectAll(".flux_timeseries_container .flux_timeseries .timeseries")
+ .each(function (d, i){
+ data.push([]);
+ d3.select(this).selectAll(".bin_inner").datum(function () {
+ data[data.length-1].push(Number(this.dataset["count"]));
+ });
+ });
+
+ // remove all of the existing timeseries data
+ d3.selectAll(".flux_timeseries_container .flux_timeseries .timeseries")
+ .remove();
+
+ // add the timeseries spark line to the data. inspiration from
+ // http://bl.ocks.org/1133472
+ d3.selectAll(".flux_timeseries_container .flux_timeseries")
+ .append("svg")
+ .attr("class", "timeseries sparkline").each(function (d, k) {
+
+ // map the index of the element in the data array to the
+ // width of the svg
+ var x = d3.scale.linear()
+ .domain([0, data[k].length])
+ .range([0, $(this).width()]);
+
+ // map the value of the element in the data array to the
+ // height of the svg
+ var y = d3.scale.linear()
+ .domain([d3.max(data[k]), 0])
+ .range([0, $(this).height()]);
+
+ // create a line path from the data
+ var line = d3.svg.line().x(function (d, i) {
+ return x(i+0.5);
+ }).y(function (d, i) {
+ return y(d);
+ });
+
+ d3.select(this).append("svg:path").attr("d", line(data[k]));
+
+ });
+ // .data(
+
+ // .append("rect")
+ // .attr("height", function (d, j){
+ // return d.count;
+ // })
+
+ // .each(function (d, i){
+ // d3.select(this).append("svg")
+ // .attr("class", "sparkline")
+ // .data(data[i])
+ // .enter()
+ // .append("rect")
+ // .attr("height", function (d, j){
+ // return d.count;
+ // })
+ // })
+
+
+});
View
6 flux/templates/flux/account_index.html
@@ -6,6 +6,12 @@
<link rel="stylesheet" href="{{STATIC_URL}}flux/css/flux_timeseries.css" />
{% endblock css %}
+{% block js %}
+<script src="//d3js.org/d3.v2.js"></script>
+<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
+<script src="{{STATIC_URL}}flux/js/sparklines.js"></script>
+{% endblock js %}
+
{% block content %}
<ul>
{% load flux %}
View
6 flux/templates/flux/timeseries.html
@@ -25,7 +25,11 @@
<div class="timeseries">
{% for bin in timeseries %}
<div class="bin_outer" style="{{bin.outer_style}}">
- <div class="bin_inner" style="{{bin.inner_style}}">
+ <div class="bin_inner"
+ data-count="{{bin.count}}"
+ data-beg="{{bin.beg}}"
+ data-end="{{bin.end}}"
+ style="{{bin.inner_style}}">
</div>
</div>
{% endfor %}
Please sign in to comment.
Something went wrong with that request. Please try again.