503 lines
16 KiB
JavaScript
503 lines
16 KiB
JavaScript
|
/**
|
||
|
|
* Theme: Ubold Admin Template
|
||
|
|
* Author: Coderthemes
|
||
|
|
* Module/App: Flot-Chart
|
||
|
|
*/
|
||
|
|
|
||
|
|
! function($) {
|
||
|
|
"use strict";
|
||
|
|
|
||
|
|
var FlotChart = function() {
|
||
|
|
this.$body = $("body")
|
||
|
|
this.$realData = []
|
||
|
|
};
|
||
|
|
|
||
|
|
//creates plot graph
|
||
|
|
FlotChart.prototype.createPlotGraph = function(selector, data1, data2, labels, colors, borderColor) {
|
||
|
|
//shows tooltip
|
||
|
|
function showTooltip(x, y, contents) {
|
||
|
|
$('<div id="tooltip" class="tooltipflot">' + contents + '</div>').css({
|
||
|
|
position : 'absolute',
|
||
|
|
top : y + 5,
|
||
|
|
left : x + 5
|
||
|
|
}).appendTo("body").fadeIn(200);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
$.plot($(selector), [{
|
||
|
|
data : data1,
|
||
|
|
label : labels[0],
|
||
|
|
color : colors[0]
|
||
|
|
}, {
|
||
|
|
data : data2,
|
||
|
|
label : labels[1],
|
||
|
|
color : colors[1]
|
||
|
|
}], {
|
||
|
|
series : {
|
||
|
|
lines : {
|
||
|
|
show : true,
|
||
|
|
fill : true,
|
||
|
|
lineWidth : 1,
|
||
|
|
fillColor : {
|
||
|
|
colors : [{
|
||
|
|
opacity : 0.5
|
||
|
|
}, {
|
||
|
|
opacity : 0.5
|
||
|
|
}]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
points : {
|
||
|
|
show : false
|
||
|
|
},
|
||
|
|
shadowSize : 0
|
||
|
|
},
|
||
|
|
|
||
|
|
grid : {
|
||
|
|
hoverable : true,
|
||
|
|
clickable : true,
|
||
|
|
borderColor : borderColor,
|
||
|
|
borderWidth : 0,
|
||
|
|
labelMargin : 10
|
||
|
|
},
|
||
|
|
legend : {
|
||
|
|
position : "ne",
|
||
|
|
margin : [0, -24],
|
||
|
|
noColumns : 0,
|
||
|
|
labelBoxBorderColor : null,
|
||
|
|
labelFormatter : function(label, series) {
|
||
|
|
// just add some space to labes
|
||
|
|
return '' + label + ' ';
|
||
|
|
},
|
||
|
|
width : 30,
|
||
|
|
height : 2
|
||
|
|
},
|
||
|
|
yaxis : {
|
||
|
|
tickColor : 'transparent',
|
||
|
|
tickLength: 0,
|
||
|
|
font : {
|
||
|
|
color : '#bdbdbd'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
xaxis : {
|
||
|
|
tickColor : '#transparent',
|
||
|
|
tickLength: 0,
|
||
|
|
font : {
|
||
|
|
color : '#bdbdbd'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
tooltip : true,
|
||
|
|
tooltipOpts : {
|
||
|
|
content : '%s: Value of %x is %y',
|
||
|
|
shifts : {
|
||
|
|
x : -60,
|
||
|
|
y : 25
|
||
|
|
},
|
||
|
|
defaultTheme : false
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
//end plot graph
|
||
|
|
|
||
|
|
//creates Pie Chart
|
||
|
|
FlotChart.prototype.createPieGraph = function(selector, labels, datas, colors) {
|
||
|
|
var data = [{
|
||
|
|
label : labels[0],
|
||
|
|
data : datas[0]
|
||
|
|
}, {
|
||
|
|
label : labels[1],
|
||
|
|
data : datas[1]
|
||
|
|
}, {
|
||
|
|
label : labels[2],
|
||
|
|
data : datas[2]
|
||
|
|
}];
|
||
|
|
var options = {
|
||
|
|
series : {
|
||
|
|
pie : {
|
||
|
|
show : true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
legend : {
|
||
|
|
show : false
|
||
|
|
},
|
||
|
|
grid : {
|
||
|
|
hoverable : true,
|
||
|
|
clickable : true
|
||
|
|
},
|
||
|
|
colors : colors,
|
||
|
|
tooltip : true,
|
||
|
|
tooltipOpts : {
|
||
|
|
content : "%s, %p.0%"
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
$.plot($(selector), data, options);
|
||
|
|
},
|
||
|
|
|
||
|
|
//returns some random data
|
||
|
|
FlotChart.prototype.randomData = function() {
|
||
|
|
var totalPoints = 300;
|
||
|
|
if (this.$realData.length > 0)
|
||
|
|
this.$realData = this.$realData.slice(1);
|
||
|
|
|
||
|
|
// Do a random walk
|
||
|
|
while (this.$realData.length < totalPoints) {
|
||
|
|
|
||
|
|
var prev = this.$realData.length > 0 ? this.$realData[this.$realData.length - 1] : 50,
|
||
|
|
y = prev + Math.random() * 10 - 5;
|
||
|
|
|
||
|
|
if (y < 0) {
|
||
|
|
y = 0;
|
||
|
|
} else if (y > 100) {
|
||
|
|
y = 100;
|
||
|
|
}
|
||
|
|
|
||
|
|
this.$realData.push(y);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Zip the generated y values with the x values
|
||
|
|
var res = [];
|
||
|
|
for (var i = 0; i < this.$realData.length; ++i) {
|
||
|
|
res.push([i, this.$realData[i]])
|
||
|
|
}
|
||
|
|
|
||
|
|
return res;
|
||
|
|
}, FlotChart.prototype.createRealTimeGraph = function(selector, data, colors) {
|
||
|
|
var plot = $.plot(selector, [data], {
|
||
|
|
colors : colors,
|
||
|
|
series : {
|
||
|
|
grow : {
|
||
|
|
active : false
|
||
|
|
}, //disable auto grow
|
||
|
|
shadowSize : 0, // drawing is faster without shadows
|
||
|
|
lines : {
|
||
|
|
show : true,
|
||
|
|
fill : true,
|
||
|
|
lineWidth : 2,
|
||
|
|
steps : false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
grid : {
|
||
|
|
show : true,
|
||
|
|
aboveData : false,
|
||
|
|
color : '#36404a',
|
||
|
|
labelMargin : 15,
|
||
|
|
axisMargin : 0,
|
||
|
|
borderWidth : 0,
|
||
|
|
borderColor : null,
|
||
|
|
minBorderMargin : 5,
|
||
|
|
clickable : true,
|
||
|
|
hoverable : true,
|
||
|
|
autoHighlight : false,
|
||
|
|
mouseActiveRadius : 20
|
||
|
|
},
|
||
|
|
tooltip : true, //activate tooltip
|
||
|
|
tooltipOpts : {
|
||
|
|
content : "Value is : %y.0" + "%",
|
||
|
|
shifts : {
|
||
|
|
x : -30,
|
||
|
|
y : -50
|
||
|
|
}
|
||
|
|
},
|
||
|
|
yaxis : {
|
||
|
|
min : 0,
|
||
|
|
max : 100,
|
||
|
|
tickColor : '#transparent',
|
||
|
|
tickLength: 0
|
||
|
|
},
|
||
|
|
xaxis : {
|
||
|
|
show : false
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
return plot;
|
||
|
|
},
|
||
|
|
//creates Pie Chart
|
||
|
|
FlotChart.prototype.createDonutGraph = function(selector, labels, datas, colors) {
|
||
|
|
var data = [{
|
||
|
|
label : labels[0],
|
||
|
|
data : datas[0]
|
||
|
|
}, {
|
||
|
|
label : labels[1],
|
||
|
|
data : datas[1]
|
||
|
|
}, {
|
||
|
|
label : labels[2],
|
||
|
|
data : datas[2]
|
||
|
|
}, {
|
||
|
|
label : labels[3],
|
||
|
|
data : datas[3]
|
||
|
|
}];
|
||
|
|
var options = {
|
||
|
|
series : {
|
||
|
|
pie : {
|
||
|
|
show : true,
|
||
|
|
innerRadius : 0.5
|
||
|
|
}
|
||
|
|
},
|
||
|
|
legend : {
|
||
|
|
show : true,
|
||
|
|
labelFormatter : function(label, series) {
|
||
|
|
return '<div style="font-size:14px;"> ' + label + '</div>'
|
||
|
|
},
|
||
|
|
labelBoxBorderColor : null,
|
||
|
|
margin : 50,
|
||
|
|
width : 20,
|
||
|
|
padding : 1
|
||
|
|
},
|
||
|
|
grid : {
|
||
|
|
hoverable : true,
|
||
|
|
clickable : true
|
||
|
|
},
|
||
|
|
colors : colors,
|
||
|
|
tooltip : true,
|
||
|
|
tooltipOpts : {
|
||
|
|
content : "%s, %p.0%"
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
$.plot($(selector), data, options);
|
||
|
|
},
|
||
|
|
//creates Combine Chart
|
||
|
|
FlotChart.prototype.createCombineGraph = function(selector, ticks, labels, datas) {
|
||
|
|
|
||
|
|
var data = [{
|
||
|
|
label : labels[0],
|
||
|
|
data : datas[0],
|
||
|
|
lines : {
|
||
|
|
show : true,
|
||
|
|
fill : true
|
||
|
|
},
|
||
|
|
points : {
|
||
|
|
show : true
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
label : labels[1],
|
||
|
|
data : datas[1],
|
||
|
|
lines : {
|
||
|
|
show : true
|
||
|
|
},
|
||
|
|
points : {
|
||
|
|
show : true
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
label : labels[2],
|
||
|
|
data : datas[2],
|
||
|
|
bars : {
|
||
|
|
show : true
|
||
|
|
}
|
||
|
|
}];
|
||
|
|
var options = {
|
||
|
|
series : {
|
||
|
|
shadowSize : 0
|
||
|
|
},
|
||
|
|
grid : {
|
||
|
|
hoverable : true,
|
||
|
|
clickable : true,
|
||
|
|
tickColor : "transparent",
|
||
|
|
borderWidth : 0
|
||
|
|
},
|
||
|
|
colors : ["#6e8cd7", "#34d3eb", "#5fbeaa"],
|
||
|
|
tooltip : true,
|
||
|
|
tooltipOpts : {
|
||
|
|
defaultTheme : false
|
||
|
|
},
|
||
|
|
legend : {
|
||
|
|
position : "ne",
|
||
|
|
margin : [0, -24],
|
||
|
|
noColumns : 0,
|
||
|
|
labelBoxBorderColor : null,
|
||
|
|
labelFormatter : function(label, series) {
|
||
|
|
// just add some space to labes
|
||
|
|
return '' + label + ' ';
|
||
|
|
},
|
||
|
|
width : 30,
|
||
|
|
height : 2
|
||
|
|
},
|
||
|
|
yaxis : {
|
||
|
|
tickColor : '#f5f5f5',
|
||
|
|
tickLength: 0,
|
||
|
|
font : {
|
||
|
|
color : '#bdbdbd'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
xaxis : {
|
||
|
|
ticks: ticks,
|
||
|
|
tickColor : '#f5f5f5',
|
||
|
|
tickLength: 0,
|
||
|
|
font : {
|
||
|
|
color : '#bdbdbd'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
$.plot($(selector), data, options);
|
||
|
|
},
|
||
|
|
|
||
|
|
//initializing various charts and components
|
||
|
|
FlotChart.prototype.init = function() {
|
||
|
|
//plot graph data
|
||
|
|
var uploads = [[0, 9], [1, 8], [2, 5], [3, 8], [4, 5], [5, 14], [6, 10]];
|
||
|
|
var downloads = [[0, 5], [1, 12], [2, 4], [3, 3], [4, 12], [5, 11], [6, 14]];
|
||
|
|
var plabels = ["Visits", "Pages/Visit"];
|
||
|
|
var pcolors = ['#5fbeaa', '#34d3eb'];
|
||
|
|
var borderColor = 'transparent';
|
||
|
|
this.createPlotGraph("#website-stats", uploads, downloads, plabels, pcolors, borderColor);
|
||
|
|
|
||
|
|
//Pie graph data
|
||
|
|
var pielabels = ["Series 1", "Series 2", "Series 3"];
|
||
|
|
var datas = [20, 30, 15];
|
||
|
|
var colors = ["#5fbeaa", "#6c85bd", "#34d3eb"];
|
||
|
|
this.createPieGraph("#pie-chart #pie-chart-container", pielabels, datas, colors);
|
||
|
|
|
||
|
|
//real time data representation
|
||
|
|
var plot = this.createRealTimeGraph('#flotRealTime', this.randomData(), ['#5fbeaa']);
|
||
|
|
plot.draw();
|
||
|
|
var $this = this;
|
||
|
|
function updatePlot() {
|
||
|
|
plot.setData([$this.randomData()]);
|
||
|
|
// Since the axes don't change, we don't need to call plot.setupGrid()
|
||
|
|
plot.draw();
|
||
|
|
setTimeout(updatePlot, $('html').hasClass('mobile-device') ? 1000 : 1000);
|
||
|
|
}
|
||
|
|
|
||
|
|
updatePlot();
|
||
|
|
|
||
|
|
//Donut pie graph data
|
||
|
|
var donutlabels = ["Series 1", "Series 2", "Series 3", "Series 4"];
|
||
|
|
var donutdatas = [35, 20, 10, 20];
|
||
|
|
var donutcolors = ["#5fbeaa", "#ebeff2", "#34d3eb", "#6e8cd7"];
|
||
|
|
this.createDonutGraph("#donut-chart #donut-chart-container", donutlabels, donutdatas, donutcolors);
|
||
|
|
|
||
|
|
//Combine graph data
|
||
|
|
var data24Hours = [[0, 201], [1, 520], [2, 337], [3, 261], [4, 157], [5, 95], [6, 200], [7, 250], [8, 320], [9, 500], [10, 152], [11, 214], [12, 364], [13, 449], [14, 558], [15, 282], [16, 379], [17, 429], [18, 518], [19, 470], [20, 330], [21, 245], [22, 358], [23, 74]];
|
||
|
|
var data48Hours = [[0, 311], [1, 630], [2, 447], [3, 371], [4, 267], [5, 205], [6, 310], [7, 360], [8, 430], [9, 610], [10, 262], [11, 324], [12, 474], [13, 559], [14, 668], [15, 392], [16, 489], [17, 539], [18, 628], [19, 580], [20, 440], [21, 355], [22, 468], [23, 184]];
|
||
|
|
var dataDifference = [[23, 727], [22, 128], [21, 110], [20, 92], [19, 172], [18, 63], [17, 150], [16, 592], [15, 12], [14, 246], [13, 52], [12, 149], [11, 123], [10, 2], [9, 325], [8, 10], [7, 15], [6, 89], [5, 65], [4, 77], [3, 600], [2, 200], [1, 385], [0, 200]];
|
||
|
|
var ticks = [[0, "22h"], [1, ""], [2, "00h"], [3, ""], [4, "02h"], [5, ""], [6, "04h"], [7, ""], [8, "06h"], [9, ""], [10, "08h"], [11, ""], [12, "10h"], [13, ""], [14, "12h"], [15, ""], [16, "14h"], [17, ""], [18, "16h"], [19, ""], [20, "18h"], [21, ""], [22, "20h"], [23, ""]];
|
||
|
|
var combinelabels = ["Last 24 Hours", "Last 48 Hours", "Difference"];
|
||
|
|
var combinedatas = [data24Hours, data48Hours, dataDifference];
|
||
|
|
|
||
|
|
this.createCombineGraph("#combine-chart #combine-chart-container", ticks, combinelabels, combinedatas);
|
||
|
|
},
|
||
|
|
|
||
|
|
//init flotchart
|
||
|
|
$.FlotChart = new FlotChart, $.FlotChart.Constructor =
|
||
|
|
FlotChart
|
||
|
|
|
||
|
|
}(window.jQuery),
|
||
|
|
|
||
|
|
//initializing flotchart
|
||
|
|
function($) {
|
||
|
|
"use strict";
|
||
|
|
$.FlotChart.init()
|
||
|
|
}(window.jQuery);
|
||
|
|
|
||
|
|
$(document).ready(function() {
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
//------------- Ordered bars chart -------------//
|
||
|
|
$(function() {
|
||
|
|
//some data
|
||
|
|
var d1 = [];
|
||
|
|
for (var i = 0; i <= 10; i += 1)
|
||
|
|
d1.push([i, parseInt(Math.random() * 30)]);
|
||
|
|
|
||
|
|
var d2 = [];
|
||
|
|
for (var i = 0; i <= 10; i += 1)
|
||
|
|
d2.push([i, parseInt(Math.random() * 30)]);
|
||
|
|
|
||
|
|
var d3 = [];
|
||
|
|
for (var i = 0; i <= 10; i += 1)
|
||
|
|
d3.push([i, parseInt(Math.random() * 30)]);
|
||
|
|
|
||
|
|
var ds = new Array();
|
||
|
|
|
||
|
|
ds.push({
|
||
|
|
label : "Data One",
|
||
|
|
data : d1,
|
||
|
|
bars : {
|
||
|
|
order : 1
|
||
|
|
}
|
||
|
|
});
|
||
|
|
ds.push({
|
||
|
|
label : "Data Two",
|
||
|
|
data : d2,
|
||
|
|
bars : {
|
||
|
|
order : 2
|
||
|
|
}
|
||
|
|
});
|
||
|
|
ds.push({
|
||
|
|
label : "Data Three",
|
||
|
|
data : d3,
|
||
|
|
bars : {
|
||
|
|
order : 3
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
var stack = 0,
|
||
|
|
bars = false,
|
||
|
|
lines = false,
|
||
|
|
steps = false;
|
||
|
|
|
||
|
|
var options = {
|
||
|
|
bars : {
|
||
|
|
show : true,
|
||
|
|
barWidth : 0.2,
|
||
|
|
fill : 1
|
||
|
|
},
|
||
|
|
grid : {
|
||
|
|
show : true,
|
||
|
|
aboveData : false,
|
||
|
|
labelMargin : 5,
|
||
|
|
axisMargin : 0,
|
||
|
|
borderWidth : 0,
|
||
|
|
minBorderMargin : 5,
|
||
|
|
clickable : true,
|
||
|
|
hoverable : true,
|
||
|
|
autoHighlight : false,
|
||
|
|
mouseActiveRadius : 20,
|
||
|
|
borderColor : '#f5f5f5'
|
||
|
|
},
|
||
|
|
series : {
|
||
|
|
stack : stack
|
||
|
|
},
|
||
|
|
legend : {
|
||
|
|
position : "ne",
|
||
|
|
margin : [0, -24],
|
||
|
|
noColumns : 0,
|
||
|
|
labelBoxBorderColor : null,
|
||
|
|
labelFormatter : function(label, series) {
|
||
|
|
// just add some space to labes
|
||
|
|
return '' + label + ' ';
|
||
|
|
},
|
||
|
|
width : 30,
|
||
|
|
height : 2
|
||
|
|
},
|
||
|
|
yaxis : {
|
||
|
|
tickColor : '#f5f5f5',
|
||
|
|
tickLength: 0,
|
||
|
|
font : {
|
||
|
|
color : '#bdbdbd'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
xaxis : {
|
||
|
|
tickColor : '#f5f5f5',
|
||
|
|
tickLength: 0,
|
||
|
|
font : {
|
||
|
|
color : '#bdbdbd'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
colors : ["#6e8cd7", "#34d3eb", "#5fbeaa"],
|
||
|
|
tooltip : true, //activate tooltip
|
||
|
|
tooltipOpts : {
|
||
|
|
content : "%s : %y.0",
|
||
|
|
shifts : {
|
||
|
|
x : -30,
|
||
|
|
y : -50
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
$.plot($("#ordered-bars-chart"), ds, options);
|
||
|
|
});
|
||
|
|
});
|