This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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