Skip to content

Instantly share code, notes, and snippets.

@ergo
Last active December 11, 2015 05:49
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save ergo/4555089 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TEST</title>
<script src="http://d3js.org/d3.v3.js"></script>
<script
src="http://ajax.googleapis.com/ajax/libs/dojo/1.8.2/dojo/dojo.js">
</script>
<script src="https://errormator.com/static/scripts/rickshaw.js"></script>
<link type="text/css" rel="stylesheet"
href="http://code.shutterstock.com/rickshaw/src/css/graph.css">
<link type="text/css" rel="stylesheet"
href="http://code.shutterstock.com/rickshaw/src/css/detail.css">
<link type="text/css" rel="stylesheet"
href="http://code.shutterstock.com/rickshaw/src/css/legend.css">
<link type="text/css" rel="stylesheet"
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<style type="text/css">
@import
"http://ajax.googleapis.com/ajax/libs/dojo/1.8.2/dojo/resources/dojo.css"
;
@import
"http://ajax.googleapis.com/ajax/libs/dojo/1.8.2/dijit/themes/claro/document.css"
;
@import
"http://ajax.googleapis.com/ajax/libs/dojo/1.8.2/dijit/themes/claro/claro.css"
;
@import
"http://ajax.googleapis.com/ajax/libs/dojo/1.8.2/dijit/tests/css/dijitTests.css"
;
@import
"http://ajax.googleapis.com/ajax/libs/dojo/1.8.2/dojox/form/resources/RangeSlider.css"
;
</style>
</head>
<body class="claro">
<div id="chart_container">
<div id="chart"></div>
<div id="slider"></div>
<div id="legend"></div>
<div id="smoother"></div>
</div>
<style type="text/css">
#chart_container {
width: 80%;
height: 500px;
}
</style>
<script type="text/javascript">
dojo.require("dojox.form.RangeSlider");
dojo.require("dijit.form.Slider");
dojo
.addOnLoad(function() {
var palette = new Rickshaw.Color.Palette({
scheme : 'classic9'
});
var data = [ {
"data" : [ {
x : 354734000000,
y : 0
}, {
x : 354734300000,
y : 7
}, {
x : 354734600000,
y : 4
}, {
x : 354734900000,
y : 1
}, {
x : 354735200000,
y : 4
}, {
x : 354735500000,
y : 8
}, {
x : 354735800000,
y : 0
} ],
"name" : "Key1",
color : palette.color(),
}, {
"data" : [ {
x : 354734000000,
y : 3
}, {
x : 354734300000,
y : 2
}, {
x : 354734600000,
y : 7
}, {
x : 354734900000,
y : 1
}, {
x : 354735200000,
y : 2.3
}, {
x : 354735500000,
y : 6.4
}, {
x : 354735800000,
y : 0.5
} ],
"name" : "Key2",
color : palette.color(),
},
{
"data" : [ {
x : 354734000000,
y : 0
}, {
x : 354734300000,
y : 0
}, {
x : 354734600000,
y : 0
}, {
x : 354734900000,
y : 0
}, {
x : 354735200000,
y : 0
}, {
x : 354735500000,
y : 0
}, {
x : 354735800000,
y : 0
} ],
"name" : "Key3",
color : palette.color(),
}, ];
var seriesData = [ [], [], [], [], [], [], [], [], [] ];
var random = new Rickshaw.Fixtures.RandomData(150);
for ( var i = 0; i < 150; i++) {
random.addData(seriesData);
}
var palette = new Rickshaw.Color.Palette({
scheme : 'colorwheel'
});
var test_data = [ {
color : palette.color(),
data : seriesData[0],
name : 'Moscow'
}, {
color : palette.color(),
data : seriesData[1],
name : 'Shanghai'
}, {
color : palette.color(),
data : seriesData[2],
name : 'Amsterdam'
}, {
color : palette.color(),
data : seriesData[3],
name : 'Paris'
} ];
var palette = new Rickshaw.Color.Palette({
scheme : 'classic9'
});
var graph = new Rickshaw.Graph({
element : document.querySelector("#chart"),
series : test_data,
renderer : 'area'
});
graph.interpolation = false;
graph.render();
var ticksTreatment = 'glow';
var hoverDetail = new Rickshaw.Graph.HoverDetail({
graph : graph
});
var legend = new Rickshaw.Graph.Legend({
graph : graph,
element : document.getElementById('legend')
});
var shelving = new Rickshaw.Graph.Behavior.Series.Toggle({
graph : graph,
legend : legend,
sortable : false
});
var xAxis = new Rickshaw.Graph.Axis.Time({
graph : graph,
ticksTreatment : ticksTreatment
});
xAxis.render();
var yAxis = new Rickshaw.Graph.Axis.Y({
graph : graph,
tickFormat : Rickshaw.Fixtures.Number.formatKMBT,
ticksTreatment : ticksTreatment
});
yAxis.render();
function sliderController() {
this.sliderCreate = function(element, graph) {
var self = this;
self.graph = graph;
var rangeSlider = new dojox.form.HorizontalRangeSlider(
{
name : "rangeSlider",
value : [ graph.dataDomain()[0], graph.dataDomain()[1] ],
minimum : graph.dataDomain()[0],
maximum : graph.dataDomain()[1],
intermediateChanges : true,
onChange : function(value) {
self.graph.window.xMin = this.value[0];
self.graph.window.xMax = this.value[1];
// if we're at an extreme, stick there
if (self.graph.dataDomain()[0] == this.value[0]) {
self.graph.window.xMin = undefined;
}
if (self.graph.dataDomain()[1] == this.value[1]) {
self.graph.window.xMax = undefined;
}
console.log(this.__redraw__);
if (this.__redraw__) {
self.graph.update();
} else {
this.__redraw__ = true;
}
}
}, element);
this.slider = rangeSlider;
this.slider.__redraw__ = true;
}
this.sliderUpdate = function() {
var value = this.slider.get('value');
console.log('sliderUpdate')
this.slider.set('minimum', this.graph.dataDomain()[0]);
this.slider.set('maximum', this.graph.dataDomain()[1]);
if (this.graph.window.xMin == undefined) {
value[0] = this.graph.dataDomain()[0];
}
if (this.graph.window.xMax == undefined) {
value[1] = this.graph.dataDomain()[1];
}
// chart was updated - do not force redraw on slider change
this.slider.__redraw__ = false;
this.slider.set('value', value);
}
}
var slider = new Rickshaw.Graph.RangeSlider({
graph : graph,
element : document.getElementById('slider'),
controller : new sliderController(document
.getElementById('slider'), graph)
});
var smoother_controller = {
smootherCreate : function(element, graph, extension) {
var slider = new dijit.form.HorizontalSlider({
minimum : 1,
maximum : 100,
intermediateChanges : true,
onChange : function(value) {
extension.setScale(value);
graph.update();
}
}, element);
}
}
var smoother = new Rickshaw.Graph.Smoother({
graph : graph,
element : document.getElementById('smoother'),
controller : smoother_controller
});
setInterval(function() {
random.addData(seriesData);
graph.update();
}, 1000);
setInterval(function() {
graph.configure({series:data});
graph.update();
}, 10000);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment