fistcommit
This commit is contained in:
Kicap
281
assets/scripts/chart.flot.init.js
Normal file
281
assets/scripts/chart.flot.init.js
Normal file
@ -0,0 +1,281 @@
|
||||
/**
|
||||
* Theme: Ninja Admin Template
|
||||
* Author: NinjaTeam
|
||||
* Module/App: Flot-Chart
|
||||
*/
|
||||
|
||||
(function($) {
|
||||
"use strict";
|
||||
|
||||
var FlotChart = {};
|
||||
|
||||
$(document).ready(function(){
|
||||
if ($("#real-time-flot-chart").length) FlotChart.module.realtime.init();
|
||||
if ($("#categories-flot-chart").length) FlotChart.module.categories.init();
|
||||
if ($("#pile-flot-chart").length) FlotChart.module.pile.init();
|
||||
if ($("#donut-flot-chart").length) FlotChart.module.donut.init();
|
||||
if ($("#lines-flot-chart").length) FlotChart.module.lines.init();
|
||||
return false;
|
||||
});
|
||||
|
||||
$(window).resize(function(){
|
||||
if ($("#real-time-flot-chart").length) FlotChart.module.realtime.init();
|
||||
if ($("#categories-flot-chart").length) FlotChart.module.categories.init();
|
||||
if ($("#pile-flot-chart").length) FlotChart.module.pile.init();
|
||||
if ($("#donut-flot-chart").length) FlotChart.module.donut.init();
|
||||
if ($("#lines-flot-chart").length) FlotChart.module.lines.init();
|
||||
return false;
|
||||
});
|
||||
|
||||
FlotChart.module = {
|
||||
categories : {
|
||||
container : "#categories-flot-chart",
|
||||
data : [ ["January", 10], ["February", 8], ["March", 4], ["April", 13], ["May", 17], ["June", 9] ],
|
||||
init: function(){
|
||||
$.plot(FlotChart.module.categories.container, [FlotChart.module.categories.data], {
|
||||
colors : ['#f9c851'],
|
||||
series: {
|
||||
bars: {
|
||||
show: true,
|
||||
barWidth: 0.6,
|
||||
align: "center"
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
mode: "categories",
|
||||
tickLength: 0
|
||||
}
|
||||
});
|
||||
return false;
|
||||
}
|
||||
},
|
||||
donut : {
|
||||
container : "#donut-flot-chart",
|
||||
data : [
|
||||
{ label: "Series 1", data: 50},
|
||||
{ label: "Series 2", data: 60},
|
||||
{ label: "Series 3", data: 90},
|
||||
{ label: "Series 4", data: 70},
|
||||
{ label: "Series 5", data: 80},
|
||||
],
|
||||
init: function(){
|
||||
$.plot(FlotChart.module.donut.container, FlotChart.module.donut.data, {
|
||||
tooltip : true,
|
||||
tooltipOpts : {
|
||||
content : "%s, %p.0%"
|
||||
},
|
||||
series: {
|
||||
pie: {
|
||||
show: true,
|
||||
innerRadius: 0.5
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
hoverable: true,
|
||||
},
|
||||
colors: ["#03a9f4", "#01ba9a", "#dcdcdc", "#6c85bd", "#f8ca4e"],
|
||||
legend : {
|
||||
show : true,
|
||||
labelFormatter : function(label, series) {
|
||||
return '<div style="font-size:14px;"> ' + label + '</div>'
|
||||
},
|
||||
labelBoxBorderColor : null,
|
||||
margin : 20,
|
||||
width : 20,
|
||||
padding : 1
|
||||
},
|
||||
});
|
||||
return false;
|
||||
}
|
||||
},
|
||||
lines : {
|
||||
container : "#lines-flot-chart",
|
||||
data : [
|
||||
[[0,14],[1,20],[2,23],[3,20],[4,24],[5,18],[6,27],[7,24],[8,16],[9,26],[10,25]],
|
||||
[[0,4],[1,10],[2,2],[3,17],[4,25],[5,17],[6,22],[7,22],[8,18],[9,11],[10,20]]
|
||||
],
|
||||
init: function(){
|
||||
$.plot(FlotChart.module.lines.container, FlotChart.module.lines.data, {
|
||||
colors : ['#6e8cd7', '#03a9f4'],
|
||||
series: {
|
||||
lines: {
|
||||
show: !0,
|
||||
fill: !0,
|
||||
lineWidth: 1,
|
||||
fillColor: {
|
||||
colors: [{
|
||||
opacity: .5
|
||||
}, {
|
||||
opacity: .5
|
||||
}]
|
||||
}
|
||||
},
|
||||
points: {
|
||||
show: !0
|
||||
},
|
||||
shadowSize: 0
|
||||
},
|
||||
legend: {
|
||||
position: "nw"
|
||||
},
|
||||
grid: {
|
||||
hoverable: !0,
|
||||
clickable: !0,
|
||||
borderColor: "#efefef",
|
||||
borderWidth: 1,
|
||||
labelMargin: 10,
|
||||
backgroundColor: "#fff"
|
||||
},
|
||||
yaxis: {
|
||||
min: 0,
|
||||
max: 40,
|
||||
color: "rgba(0,0,0,0.1)"
|
||||
},
|
||||
xaxis: {
|
||||
color: "rgba(0,0,0,0.1)"
|
||||
},
|
||||
tooltip: !0,
|
||||
tooltipOpts: {
|
||||
content: "%s: Value of %x is %y",
|
||||
shifts: {
|
||||
x: -60,
|
||||
y: 25
|
||||
},
|
||||
defaultTheme: !1
|
||||
}
|
||||
});
|
||||
return false;
|
||||
}
|
||||
},
|
||||
pile : {
|
||||
container : "#pile-flot-chart",
|
||||
data : [
|
||||
{ label: "Series 1", data: 30},
|
||||
{ label: "Series 2", data: 30},
|
||||
{ label: "Series 3", data: 90},
|
||||
{ label: "Series 4", data: 70},
|
||||
],
|
||||
init: function(){
|
||||
$.plot(FlotChart.module.pile.container, FlotChart.module.pile.data, {
|
||||
series: {
|
||||
pie: {
|
||||
show: true,
|
||||
radius: 1,
|
||||
label: {
|
||||
show: true,
|
||||
radius: 3/4,
|
||||
formatter: labelFormatter,
|
||||
background: {
|
||||
opacity: 0.5
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
hoverable: true
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
colors: ["#03a9f4", "#01ba9a", "#dcdcdc", "#6c85bd"]
|
||||
});
|
||||
return false;
|
||||
}
|
||||
},
|
||||
realtime : {
|
||||
container : $("#real-time-flot-chart"),
|
||||
maximum : 0,
|
||||
data : [],
|
||||
series : [],
|
||||
plot : {},
|
||||
init : function(){
|
||||
FlotChart.module.realtime.maximum = FlotChart.module.realtime.container.outerWidth() / 2 || 300;
|
||||
FlotChart.module.realtime.series = [{
|
||||
data: FlotChart.func.getRandomData(),
|
||||
lines: {
|
||||
fill: true,
|
||||
lineWidth: 1,
|
||||
fillColor: {
|
||||
colors: [{
|
||||
opacity: .45
|
||||
}, {
|
||||
opacity: .45
|
||||
}]
|
||||
}
|
||||
},
|
||||
points: {
|
||||
show: !1
|
||||
},
|
||||
shadowSize: 0
|
||||
}];
|
||||
|
||||
FlotChart.module.realtime.plot = $.plot(FlotChart.module.realtime.container, FlotChart.module.realtime.series, {
|
||||
colors : ['#03a9f4'],
|
||||
grid: {
|
||||
show: !0,
|
||||
aboveData: !1,
|
||||
color: "#dcdcdc",
|
||||
labelMargin: 15,
|
||||
axisMargin: 0,
|
||||
borderWidth: 0,
|
||||
borderColor: null,
|
||||
minBorderMargin: 5,
|
||||
clickable: !0,
|
||||
hoverable: !0,
|
||||
autoHighlight: !1,
|
||||
mouseActiveRadius: 20
|
||||
},
|
||||
yaxis: {
|
||||
min: 0,
|
||||
max: 150,
|
||||
color: "rgba(0,0,0,0.1)"
|
||||
},
|
||||
xaxis: {
|
||||
show: !1
|
||||
},
|
||||
legend: {
|
||||
show: true
|
||||
}
|
||||
});
|
||||
|
||||
// Update the random dataset at 25FPS for a smoothly-animating chart
|
||||
|
||||
setInterval(function updateRandom() {
|
||||
FlotChart.module.realtime.series[0].data = FlotChart.func.getRandomData();
|
||||
FlotChart.module.realtime.plot.setData(FlotChart.module.realtime.series);
|
||||
FlotChart.module.realtime.plot.draw();
|
||||
}, 40);
|
||||
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
FlotChart.func = {
|
||||
getRandomData : function(){
|
||||
if (FlotChart.module.realtime.data.length) {
|
||||
FlotChart.module.realtime.data = FlotChart.module.realtime.data.slice(1);
|
||||
}
|
||||
|
||||
while (FlotChart.module.realtime.data.length < FlotChart.module.realtime.maximum) {
|
||||
var previous = FlotChart.module.realtime.data.length ? FlotChart.module.realtime.data[FlotChart.module.realtime.data.length - 1] : 50;
|
||||
var y = previous + Math.random() * 10 - 5;
|
||||
FlotChart.module.realtime.data.push(y < 0 ? 0 : y > 100 ? 100 : y);
|
||||
}
|
||||
|
||||
// zip the generated y values with the x values
|
||||
|
||||
var res = [];
|
||||
for (var i = 0; i < FlotChart.module.realtime.data.length; ++i) {
|
||||
res.push([i, FlotChart.module.realtime.data[i]])
|
||||
}
|
||||
|
||||
return res;
|
||||
}
|
||||
}
|
||||
|
||||
function labelFormatter(label, series) {
|
||||
return "<div style='font-size:8pt; text-align:center; padding:2px; color:white;'>" + label + "<br/>" + Math.round(series.percent) + "%</div>";
|
||||
}
|
||||
|
||||
})(jQuery);
|
||||
Reference in New Issue
Block a user