137 lines
4.0 KiB
JavaScript
137 lines
4.0 KiB
JavaScript
|
|
$(document).ready(function() {
|
|
|
|
// Realtime Rickshaw Chart
|
|
if ($('#rickshaw-realtime').length != 0) {
|
|
|
|
(function() {
|
|
|
|
var container = '#rickshaw-realtime';
|
|
|
|
var seriesData = [
|
|
[],
|
|
[],
|
|
[]
|
|
];
|
|
var random = new Rickshaw.Fixtures.RandomData(50);
|
|
for (var i = 0; i < 50; i++) {
|
|
random.addData(seriesData);
|
|
}
|
|
var graph = new Rickshaw.Graph({
|
|
element: document.querySelector(container),
|
|
height: 338,
|
|
renderer: 'area',
|
|
padding: {
|
|
top: 0.4
|
|
},
|
|
series: [{
|
|
data: seriesData[0],
|
|
color: '#00A2FF', // change contextual color rgba(98, 84, 154, 0.3)
|
|
name: 'Server 1'
|
|
}, {
|
|
data: seriesData[1],
|
|
color: 'rgba(0, 162, 255, .1)', // change contextual color
|
|
name: 'Server 2'
|
|
}]
|
|
});
|
|
|
|
var y_axis = new Rickshaw.Graph.Axis.Y({
|
|
graph: graph,
|
|
orientation: 'right',
|
|
tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
|
|
element: document.getElementById('rickshaw-realtime_y_axis'),
|
|
});
|
|
|
|
var hoverDetail = new Rickshaw.Graph.HoverDetail({
|
|
graph: graph
|
|
});
|
|
|
|
// Update the graph with realtime data
|
|
setInterval(function() {
|
|
random.removeData(seriesData);
|
|
random.addData(seriesData);
|
|
graph.update();
|
|
}, 1000);
|
|
|
|
d3.selectAll('#rickshaw-realtime_y_axis .tick.major line').attr('x2', '9');
|
|
d3.selectAll('#rickshaw-realtime_y_axis .tick.major text').attr('x', '14');
|
|
|
|
$(window).resize(function() {
|
|
graph.configure({
|
|
width: $(container).width(),
|
|
height: 338
|
|
});
|
|
graph.render()
|
|
});
|
|
|
|
$(container).data('chart', graph);
|
|
|
|
})();
|
|
|
|
}
|
|
|
|
// Stacked bar chart using Rickshaw
|
|
if ($('#rickshaw-stacked-bars').length != 0) {
|
|
|
|
(function() {
|
|
var container = '#rickshaw-stacked-bars';
|
|
|
|
var seriesData = [
|
|
[],
|
|
[]
|
|
];
|
|
var random = new Rickshaw.Fixtures.RandomData(50);
|
|
for (var i = 0; i < 50; i++) {
|
|
random.addData(seriesData);
|
|
}
|
|
|
|
var graph = new Rickshaw.Graph({
|
|
renderer: 'bar',
|
|
element: document.querySelector(container),
|
|
height: 400,
|
|
padding: {
|
|
top: 0.4
|
|
},
|
|
series: [{
|
|
data: seriesData[0],
|
|
color: '#00A2FF', // Change contextual color
|
|
name: "New users"
|
|
}, {
|
|
data: seriesData[1],
|
|
color: 'rgba(0, 162, 255, .2)', // Change contextual color
|
|
name: "Returning users"
|
|
|
|
}]
|
|
|
|
});
|
|
|
|
var hoverDetail = new Rickshaw.Graph.HoverDetail({
|
|
graph: graph,
|
|
formatter: function(series, x, y) {
|
|
var date = '<span class="date">' + new Date(x * 1000).toUTCString() + '</span>';
|
|
var swatch = '<span class="detail_swatch" style="background-color: ' + series.color + '"></span>';
|
|
var content = swatch + series.name + ": " + parseInt(y) + '<br>' + date;
|
|
return content;
|
|
}
|
|
});
|
|
|
|
graph.render();
|
|
|
|
|
|
$(window).resize(function() {
|
|
graph.configure({
|
|
width: $(container).width(),
|
|
height: 400
|
|
});
|
|
graph.render()
|
|
});
|
|
|
|
$(container).data('chart', graph);
|
|
|
|
})();
|
|
|
|
}
|
|
|
|
|
|
});
|