mirror of
https://github.com/cwinfo/powerdns-admin.git
synced 2024-11-14 01:20:27 +00:00
899 lines
31 KiB
JavaScript
899 lines
31 KiB
JavaScript
|
var ChartsFlotcharts = function() {
|
||
|
|
|
||
|
|
return {
|
||
|
|
//main function to initiate the module
|
||
|
|
|
||
|
|
init: function() {
|
||
|
|
|
||
|
|
Metronic.addResizeHandler(function() {
|
||
|
|
Charts.initPieCharts();
|
||
|
|
});
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
initCharts: function() {
|
||
|
|
|
||
|
|
if (!jQuery.plot) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
var data = [];
|
||
|
|
var totalPoints = 250;
|
||
|
|
|
||
|
|
// random data generator for plot charts
|
||
|
|
|
||
|
|
function getRandomData() {
|
||
|
|
if (data.length > 0) data = data.slice(1);
|
||
|
|
// do a random walk
|
||
|
|
while (data.length < totalPoints) {
|
||
|
|
var prev = data.length > 0 ? data[data.length - 1] : 50;
|
||
|
|
var y = prev + Math.random() * 10 - 5;
|
||
|
|
if (y < 0) y = 0;
|
||
|
|
if (y > 100) y = 100;
|
||
|
|
data.push(y);
|
||
|
|
}
|
||
|
|
// zip the generated y values with the x values
|
||
|
|
var res = [];
|
||
|
|
for (var i = 0; i < data.length; ++i) {
|
||
|
|
res.push([i, data[i]]);
|
||
|
|
}
|
||
|
|
|
||
|
|
return res;
|
||
|
|
}
|
||
|
|
|
||
|
|
//Basic Chart
|
||
|
|
|
||
|
|
function chart1() {
|
||
|
|
if ($('#chart_1').size() != 1) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
var d1 = [];
|
||
|
|
for (var i = 0; i < Math.PI * 2; i += 0.25)
|
||
|
|
d1.push([i, Math.sin(i)]);
|
||
|
|
|
||
|
|
var d2 = [];
|
||
|
|
for (var i = 0; i < Math.PI * 2; i += 0.25)
|
||
|
|
d2.push([i, Math.cos(i)]);
|
||
|
|
|
||
|
|
var d3 = [];
|
||
|
|
for (var i = 0; i < Math.PI * 2; i += 0.1)
|
||
|
|
d3.push([i, Math.tan(i)]);
|
||
|
|
|
||
|
|
$.plot($("#chart_1"), [{
|
||
|
|
label: "sin(x)",
|
||
|
|
data: d1,
|
||
|
|
lines: {
|
||
|
|
lineWidth: 1,
|
||
|
|
},
|
||
|
|
shadowSize: 0
|
||
|
|
}, {
|
||
|
|
label: "cos(x)",
|
||
|
|
data: d2,
|
||
|
|
lines: {
|
||
|
|
lineWidth: 1,
|
||
|
|
},
|
||
|
|
shadowSize: 0
|
||
|
|
}, {
|
||
|
|
label: "tan(x)",
|
||
|
|
data: d3,
|
||
|
|
lines: {
|
||
|
|
lineWidth: 1,
|
||
|
|
},
|
||
|
|
shadowSize: 0
|
||
|
|
}], {
|
||
|
|
series: {
|
||
|
|
lines: {
|
||
|
|
show: true,
|
||
|
|
},
|
||
|
|
points: {
|
||
|
|
show: true,
|
||
|
|
fill: true,
|
||
|
|
radius: 3,
|
||
|
|
lineWidth: 1
|
||
|
|
}
|
||
|
|
},
|
||
|
|
xaxis: {
|
||
|
|
tickColor: "#eee",
|
||
|
|
ticks: [0, [Math.PI / 2, "\u03c0/2"],
|
||
|
|
[Math.PI, "\u03c0"],
|
||
|
|
[Math.PI * 3 / 2, "3\u03c0/2"],
|
||
|
|
[Math.PI * 2, "2\u03c0"]
|
||
|
|
]
|
||
|
|
},
|
||
|
|
yaxis: {
|
||
|
|
tickColor: "#eee",
|
||
|
|
ticks: 10,
|
||
|
|
min: -2,
|
||
|
|
max: 2
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
borderColor: "#eee",
|
||
|
|
borderWidth: 1
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
//Interactive Chart
|
||
|
|
|
||
|
|
function chart2() {
|
||
|
|
if ($('#chart_2').size() != 1) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
function randValue() {
|
||
|
|
return (Math.floor(Math.random() * (1 + 40 - 20))) + 20;
|
||
|
|
}
|
||
|
|
var pageviews = [
|
||
|
|
[1, randValue()],
|
||
|
|
[2, randValue()],
|
||
|
|
[3, 2 + randValue()],
|
||
|
|
[4, 3 + randValue()],
|
||
|
|
[5, 5 + randValue()],
|
||
|
|
[6, 10 + randValue()],
|
||
|
|
[7, 15 + randValue()],
|
||
|
|
[8, 20 + randValue()],
|
||
|
|
[9, 25 + randValue()],
|
||
|
|
[10, 30 + randValue()],
|
||
|
|
[11, 35 + randValue()],
|
||
|
|
[12, 25 + randValue()],
|
||
|
|
[13, 15 + randValue()],
|
||
|
|
[14, 20 + randValue()],
|
||
|
|
[15, 45 + randValue()],
|
||
|
|
[16, 50 + randValue()],
|
||
|
|
[17, 65 + randValue()],
|
||
|
|
[18, 70 + randValue()],
|
||
|
|
[19, 85 + randValue()],
|
||
|
|
[20, 80 + randValue()],
|
||
|
|
[21, 75 + randValue()],
|
||
|
|
[22, 80 + randValue()],
|
||
|
|
[23, 75 + randValue()],
|
||
|
|
[24, 70 + randValue()],
|
||
|
|
[25, 65 + randValue()],
|
||
|
|
[26, 75 + randValue()],
|
||
|
|
[27, 80 + randValue()],
|
||
|
|
[28, 85 + randValue()],
|
||
|
|
[29, 90 + randValue()],
|
||
|
|
[30, 95 + randValue()]
|
||
|
|
];
|
||
|
|
var visitors = [
|
||
|
|
[1, randValue() - 5],
|
||
|
|
[2, randValue() - 5],
|
||
|
|
[3, randValue() - 5],
|
||
|
|
[4, 6 + randValue()],
|
||
|
|
[5, 5 + randValue()],
|
||
|
|
[6, 20 + randValue()],
|
||
|
|
[7, 25 + randValue()],
|
||
|
|
[8, 36 + randValue()],
|
||
|
|
[9, 26 + randValue()],
|
||
|
|
[10, 38 + randValue()],
|
||
|
|
[11, 39 + randValue()],
|
||
|
|
[12, 50 + randValue()],
|
||
|
|
[13, 51 + randValue()],
|
||
|
|
[14, 12 + randValue()],
|
||
|
|
[15, 13 + randValue()],
|
||
|
|
[16, 14 + randValue()],
|
||
|
|
[17, 15 + randValue()],
|
||
|
|
[18, 15 + randValue()],
|
||
|
|
[19, 16 + randValue()],
|
||
|
|
[20, 17 + randValue()],
|
||
|
|
[21, 18 + randValue()],
|
||
|
|
[22, 19 + randValue()],
|
||
|
|
[23, 20 + randValue()],
|
||
|
|
[24, 21 + randValue()],
|
||
|
|
[25, 14 + randValue()],
|
||
|
|
[26, 24 + randValue()],
|
||
|
|
[27, 25 + randValue()],
|
||
|
|
[28, 26 + randValue()],
|
||
|
|
[29, 27 + randValue()],
|
||
|
|
[30, 31 + randValue()]
|
||
|
|
];
|
||
|
|
|
||
|
|
var plot = $.plot($("#chart_2"), [{
|
||
|
|
data: pageviews,
|
||
|
|
label: "Unique Visits",
|
||
|
|
lines: {
|
||
|
|
lineWidth: 1,
|
||
|
|
},
|
||
|
|
shadowSize: 0
|
||
|
|
|
||
|
|
}, {
|
||
|
|
data: visitors,
|
||
|
|
label: "Page Views",
|
||
|
|
lines: {
|
||
|
|
lineWidth: 1,
|
||
|
|
},
|
||
|
|
shadowSize: 0
|
||
|
|
}], {
|
||
|
|
series: {
|
||
|
|
lines: {
|
||
|
|
show: true,
|
||
|
|
lineWidth: 2,
|
||
|
|
fill: true,
|
||
|
|
fillColor: {
|
||
|
|
colors: [{
|
||
|
|
opacity: 0.05
|
||
|
|
}, {
|
||
|
|
opacity: 0.01
|
||
|
|
}]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
points: {
|
||
|
|
show: true,
|
||
|
|
radius: 3,
|
||
|
|
lineWidth: 1
|
||
|
|
},
|
||
|
|
shadowSize: 2
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
hoverable: true,
|
||
|
|
clickable: true,
|
||
|
|
tickColor: "#eee",
|
||
|
|
borderColor: "#eee",
|
||
|
|
borderWidth: 1
|
||
|
|
},
|
||
|
|
colors: ["#d12610", "#37b7f3", "#52e136"],
|
||
|
|
xaxis: {
|
||
|
|
ticks: 11,
|
||
|
|
tickDecimals: 0,
|
||
|
|
tickColor: "#eee",
|
||
|
|
},
|
||
|
|
yaxis: {
|
||
|
|
ticks: 11,
|
||
|
|
tickDecimals: 0,
|
||
|
|
tickColor: "#eee",
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
function showTooltip(x, y, contents) {
|
||
|
|
$('<div id="tooltip">' + contents + '</div>').css({
|
||
|
|
position: 'absolute',
|
||
|
|
display: 'none',
|
||
|
|
top: y + 5,
|
||
|
|
left: x + 15,
|
||
|
|
border: '1px solid #333',
|
||
|
|
padding: '4px',
|
||
|
|
color: '#fff',
|
||
|
|
'border-radius': '3px',
|
||
|
|
'background-color': '#333',
|
||
|
|
opacity: 0.80
|
||
|
|
}).appendTo("body").fadeIn(200);
|
||
|
|
}
|
||
|
|
|
||
|
|
var previousPoint = null;
|
||
|
|
$("#chart_2").bind("plothover", function(event, pos, item) {
|
||
|
|
$("#x").text(pos.x.toFixed(2));
|
||
|
|
$("#y").text(pos.y.toFixed(2));
|
||
|
|
|
||
|
|
if (item) {
|
||
|
|
if (previousPoint != item.dataIndex) {
|
||
|
|
previousPoint = item.dataIndex;
|
||
|
|
|
||
|
|
$("#tooltip").remove();
|
||
|
|
var x = item.datapoint[0].toFixed(2),
|
||
|
|
y = item.datapoint[1].toFixed(2);
|
||
|
|
|
||
|
|
showTooltip(item.pageX, item.pageY, item.series.label + " of " + x + " = " + y);
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
$("#tooltip").remove();
|
||
|
|
previousPoint = null;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
//Tracking Curves
|
||
|
|
|
||
|
|
function chart3() {
|
||
|
|
if ($('#chart_3').size() != 1) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
//tracking curves:
|
||
|
|
|
||
|
|
var sin = [],
|
||
|
|
cos = [];
|
||
|
|
for (var i = 0; i < 14; i += 0.1) {
|
||
|
|
sin.push([i, Math.sin(i)]);
|
||
|
|
cos.push([i, Math.cos(i)]);
|
||
|
|
}
|
||
|
|
|
||
|
|
plot = $.plot($("#chart_3"), [{
|
||
|
|
data: sin,
|
||
|
|
label: "sin(x) = -0.00",
|
||
|
|
lines: {
|
||
|
|
lineWidth: 1,
|
||
|
|
},
|
||
|
|
shadowSize: 0
|
||
|
|
}, {
|
||
|
|
data: cos,
|
||
|
|
label: "cos(x) = -0.00",
|
||
|
|
lines: {
|
||
|
|
lineWidth: 1,
|
||
|
|
},
|
||
|
|
shadowSize: 0
|
||
|
|
}], {
|
||
|
|
series: {
|
||
|
|
lines: {
|
||
|
|
show: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
crosshair: {
|
||
|
|
mode: "x"
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
hoverable: true,
|
||
|
|
autoHighlight: false,
|
||
|
|
tickColor: "#eee",
|
||
|
|
borderColor: "#eee",
|
||
|
|
borderWidth: 1
|
||
|
|
},
|
||
|
|
yaxis: {
|
||
|
|
min: -1.2,
|
||
|
|
max: 1.2
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
var legends = $("#chart_3 .legendLabel");
|
||
|
|
legends.each(function() {
|
||
|
|
// fix the widths so they don't jump around
|
||
|
|
$(this).css('width', $(this).width());
|
||
|
|
});
|
||
|
|
|
||
|
|
var updateLegendTimeout = null;
|
||
|
|
var latestPosition = null;
|
||
|
|
|
||
|
|
function updateLegend() {
|
||
|
|
updateLegendTimeout = null;
|
||
|
|
|
||
|
|
var pos = latestPosition;
|
||
|
|
|
||
|
|
var axes = plot.getAxes();
|
||
|
|
if (pos.x < axes.xaxis.min || pos.x > axes.xaxis.max || pos.y < axes.yaxis.min || pos.y > axes.yaxis.max) return;
|
||
|
|
|
||
|
|
var i, j, dataset = plot.getData();
|
||
|
|
for (i = 0; i < dataset.length; ++i) {
|
||
|
|
var series = dataset[i];
|
||
|
|
|
||
|
|
// find the nearest points, x-wise
|
||
|
|
for (j = 0; j < series.data.length; ++j)
|
||
|
|
if (series.data[j][0] > pos.x) break;
|
||
|
|
|
||
|
|
// now interpolate
|
||
|
|
var y, p1 = series.data[j - 1],
|
||
|
|
p2 = series.data[j];
|
||
|
|
|
||
|
|
if (p1 == null) y = p2[1];
|
||
|
|
else if (p2 == null) y = p1[1];
|
||
|
|
else y = p1[1] + (p2[1] - p1[1]) * (pos.x - p1[0]) / (p2[0] - p1[0]);
|
||
|
|
|
||
|
|
legends.eq(i).text(series.label.replace(/=.*/, "= " + y.toFixed(2)));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
$("#chart_3").bind("plothover", function(event, pos, item) {
|
||
|
|
latestPosition = pos;
|
||
|
|
if (!updateLegendTimeout) updateLegendTimeout = setTimeout(updateLegend, 50);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
//Dynamic Chart
|
||
|
|
|
||
|
|
function chart4() {
|
||
|
|
if ($('#chart_4').size() != 1) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
//server load
|
||
|
|
var options = {
|
||
|
|
series: {
|
||
|
|
shadowSize: 1
|
||
|
|
},
|
||
|
|
lines: {
|
||
|
|
show: true,
|
||
|
|
lineWidth: 0.5,
|
||
|
|
fill: true,
|
||
|
|
fillColor: {
|
||
|
|
colors: [{
|
||
|
|
opacity: 0.1
|
||
|
|
}, {
|
||
|
|
opacity: 1
|
||
|
|
}]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
yaxis: {
|
||
|
|
min: 0,
|
||
|
|
max: 100,
|
||
|
|
tickColor: "#eee",
|
||
|
|
tickFormatter: function(v) {
|
||
|
|
return v + "%";
|
||
|
|
}
|
||
|
|
},
|
||
|
|
xaxis: {
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
colors: ["#6ef146"],
|
||
|
|
grid: {
|
||
|
|
tickColor: "#eee",
|
||
|
|
borderWidth: 0,
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
var updateInterval = 30;
|
||
|
|
var plot = $.plot($("#chart_4"), [getRandomData()], options);
|
||
|
|
|
||
|
|
function update() {
|
||
|
|
plot.setData([getRandomData()]);
|
||
|
|
plot.draw();
|
||
|
|
setTimeout(update, updateInterval);
|
||
|
|
}
|
||
|
|
update();
|
||
|
|
}
|
||
|
|
|
||
|
|
//bars with controls
|
||
|
|
|
||
|
|
function chart5() {
|
||
|
|
if ($('#chart_5').size() != 1) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
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 stack = 0,
|
||
|
|
bars = true,
|
||
|
|
lines = false,
|
||
|
|
steps = false;
|
||
|
|
|
||
|
|
function plotWithOptions() {
|
||
|
|
$.plot($("#chart_5"),
|
||
|
|
|
||
|
|
[{
|
||
|
|
label: "sales",
|
||
|
|
data: d1,
|
||
|
|
lines: {
|
||
|
|
lineWidth: 1,
|
||
|
|
},
|
||
|
|
shadowSize: 0
|
||
|
|
}, {
|
||
|
|
label: "tax",
|
||
|
|
data: d2,
|
||
|
|
lines: {
|
||
|
|
lineWidth: 1,
|
||
|
|
},
|
||
|
|
shadowSize: 0
|
||
|
|
}, {
|
||
|
|
label: "profit",
|
||
|
|
data: d3,
|
||
|
|
lines: {
|
||
|
|
lineWidth: 1,
|
||
|
|
},
|
||
|
|
shadowSize: 0
|
||
|
|
}]
|
||
|
|
|
||
|
|
, {
|
||
|
|
series: {
|
||
|
|
stack: stack,
|
||
|
|
lines: {
|
||
|
|
show: lines,
|
||
|
|
fill: true,
|
||
|
|
steps: steps,
|
||
|
|
lineWidth: 0, // in pixels
|
||
|
|
},
|
||
|
|
bars: {
|
||
|
|
show: bars,
|
||
|
|
barWidth: 0.5,
|
||
|
|
lineWidth: 0, // in pixels
|
||
|
|
shadowSize: 0,
|
||
|
|
align: 'center'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
tickColor: "#eee",
|
||
|
|
borderColor: "#eee",
|
||
|
|
borderWidth: 1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
$(".stackControls input").click(function(e) {
|
||
|
|
e.preventDefault();
|
||
|
|
stack = $(this).val() == "With stacking" ? true : null;
|
||
|
|
plotWithOptions();
|
||
|
|
});
|
||
|
|
|
||
|
|
$(".graphControls input").click(function(e) {
|
||
|
|
e.preventDefault();
|
||
|
|
bars = $(this).val().indexOf("Bars") != -1;
|
||
|
|
lines = $(this).val().indexOf("Lines") != -1;
|
||
|
|
steps = $(this).val().indexOf("steps") != -1;
|
||
|
|
plotWithOptions();
|
||
|
|
});
|
||
|
|
|
||
|
|
plotWithOptions();
|
||
|
|
}
|
||
|
|
|
||
|
|
//graph
|
||
|
|
chart1();
|
||
|
|
chart2();
|
||
|
|
chart3();
|
||
|
|
chart4();
|
||
|
|
chart5();
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
initBarCharts: function() {
|
||
|
|
|
||
|
|
// bar chart:
|
||
|
|
var data = GenerateSeries(0);
|
||
|
|
|
||
|
|
function GenerateSeries(added) {
|
||
|
|
var data = [];
|
||
|
|
var start = 100 + added;
|
||
|
|
var end = 200 + added;
|
||
|
|
|
||
|
|
for (i = 1; i <= 20; i++) {
|
||
|
|
var d = Math.floor(Math.random() * (end - start + 1) + start);
|
||
|
|
data.push([i, d]);
|
||
|
|
start++;
|
||
|
|
end++;
|
||
|
|
}
|
||
|
|
|
||
|
|
return data;
|
||
|
|
}
|
||
|
|
|
||
|
|
var options = {
|
||
|
|
series: {
|
||
|
|
bars: {
|
||
|
|
show: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
bars: {
|
||
|
|
barWidth: 0.8,
|
||
|
|
lineWidth: 0, // in pixels
|
||
|
|
shadowSize: 0,
|
||
|
|
align: 'left'
|
||
|
|
},
|
||
|
|
|
||
|
|
grid: {
|
||
|
|
tickColor: "#eee",
|
||
|
|
borderColor: "#eee",
|
||
|
|
borderWidth: 1
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
if ($('#chart_1_1').size() !== 0) {
|
||
|
|
$.plot($("#chart_1_1"), [{
|
||
|
|
data: data,
|
||
|
|
lines: {
|
||
|
|
lineWidth: 1,
|
||
|
|
},
|
||
|
|
shadowSize: 0
|
||
|
|
}], options);
|
||
|
|
}
|
||
|
|
|
||
|
|
// horizontal bar chart:
|
||
|
|
|
||
|
|
var data1 = [
|
||
|
|
[10, 10],
|
||
|
|
[20, 20],
|
||
|
|
[30, 30],
|
||
|
|
[40, 40],
|
||
|
|
[50, 50]
|
||
|
|
];
|
||
|
|
|
||
|
|
var options = {
|
||
|
|
series: {
|
||
|
|
bars: {
|
||
|
|
show: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
bars: {
|
||
|
|
horizontal: true,
|
||
|
|
barWidth: 6,
|
||
|
|
lineWidth: 0, // in pixels
|
||
|
|
shadowSize: 0,
|
||
|
|
align: 'left'
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
tickColor: "#eee",
|
||
|
|
borderColor: "#eee",
|
||
|
|
borderWidth: 1
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
if ($('#chart_1_2').size() !== 0) {
|
||
|
|
$.plot($("#chart_1_2"), [data1], options);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
initPieCharts: function() {
|
||
|
|
|
||
|
|
var data = [];
|
||
|
|
var series = Math.floor(Math.random() * 10) + 1;
|
||
|
|
series = series < 5 ? 5 : series;
|
||
|
|
|
||
|
|
for (var i = 0; i < series; i++) {
|
||
|
|
data[i] = {
|
||
|
|
label: "Series" + (i + 1),
|
||
|
|
data: Math.floor(Math.random() * 100) + 1
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
// DEFAULT
|
||
|
|
if ($('#pie_chart').size() !== 0) {
|
||
|
|
$.plot($("#pie_chart"), data, {
|
||
|
|
series: {
|
||
|
|
pie: {
|
||
|
|
show: true
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// GRAPH 1
|
||
|
|
if ($('#pie_chart_1').size() !== 0) {
|
||
|
|
$.plot($("#pie_chart_1"), data, {
|
||
|
|
series: {
|
||
|
|
pie: {
|
||
|
|
show: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
show: false
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// GRAPH 2
|
||
|
|
if ($('#pie_chart_2').size() !== 0) {
|
||
|
|
$.plot($("#pie_chart_2"), data, {
|
||
|
|
series: {
|
||
|
|
pie: {
|
||
|
|
show: true,
|
||
|
|
radius: 1,
|
||
|
|
label: {
|
||
|
|
show: true,
|
||
|
|
radius: 1,
|
||
|
|
formatter: function(label, series) {
|
||
|
|
return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">' + label + '<br/>' + Math.round(series.percent) + '%</div>';
|
||
|
|
},
|
||
|
|
background: {
|
||
|
|
opacity: 0.8
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
show: false
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// GRAPH 3
|
||
|
|
if ($('#pie_chart_3').size() !== 0) {
|
||
|
|
$.plot($("#pie_chart_3"), data, {
|
||
|
|
series: {
|
||
|
|
pie: {
|
||
|
|
show: true,
|
||
|
|
radius: 1,
|
||
|
|
label: {
|
||
|
|
show: true,
|
||
|
|
radius: 3 / 4,
|
||
|
|
formatter: function(label, series) {
|
||
|
|
return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">' + label + '<br/>' + Math.round(series.percent) + '%</div>';
|
||
|
|
},
|
||
|
|
background: {
|
||
|
|
opacity: 0.5
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
show: false
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// GRAPH 4
|
||
|
|
if ($('#pie_chart_4').size() !== 0) {
|
||
|
|
$.plot($("#pie_chart_4"), data, {
|
||
|
|
series: {
|
||
|
|
pie: {
|
||
|
|
show: true,
|
||
|
|
radius: 1,
|
||
|
|
label: {
|
||
|
|
show: true,
|
||
|
|
radius: 3 / 4,
|
||
|
|
formatter: function(label, series) {
|
||
|
|
return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">' + label + '<br/>' + Math.round(series.percent) + '%</div>';
|
||
|
|
},
|
||
|
|
background: {
|
||
|
|
opacity: 0.5,
|
||
|
|
color: '#000'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
show: false
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// GRAPH 5
|
||
|
|
if ($('#pie_chart_5').size() !== 0) {
|
||
|
|
$.plot($("#pie_chart_5"), data, {
|
||
|
|
series: {
|
||
|
|
pie: {
|
||
|
|
show: true,
|
||
|
|
radius: 3 / 4,
|
||
|
|
label: {
|
||
|
|
show: true,
|
||
|
|
radius: 3 / 4,
|
||
|
|
formatter: function(label, series) {
|
||
|
|
return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">' + label + '<br/>' + Math.round(series.percent) + '%</div>';
|
||
|
|
},
|
||
|
|
background: {
|
||
|
|
opacity: 0.5,
|
||
|
|
color: '#000'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
show: false
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// GRAPH 6
|
||
|
|
if ($('#pie_chart_6').size() !== 0) {
|
||
|
|
$.plot($("#pie_chart_6"), data, {
|
||
|
|
series: {
|
||
|
|
pie: {
|
||
|
|
show: true,
|
||
|
|
radius: 1,
|
||
|
|
label: {
|
||
|
|
show: true,
|
||
|
|
radius: 2 / 3,
|
||
|
|
formatter: function(label, series) {
|
||
|
|
return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">' + label + '<br/>' + Math.round(series.percent) + '%</div>';
|
||
|
|
},
|
||
|
|
threshold: 0.1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
show: false
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// GRAPH 7
|
||
|
|
if ($('#pie_chart_7').size() !== 0) {
|
||
|
|
$.plot($("#pie_chart_7"), data, {
|
||
|
|
series: {
|
||
|
|
pie: {
|
||
|
|
show: true,
|
||
|
|
combine: {
|
||
|
|
color: '#999',
|
||
|
|
threshold: 0.1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
show: false
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// GRAPH 8
|
||
|
|
if ($('#pie_chart_8').size() !== 0) {
|
||
|
|
$.plot($("#pie_chart_8"), data, {
|
||
|
|
series: {
|
||
|
|
pie: {
|
||
|
|
show: true,
|
||
|
|
radius: 300,
|
||
|
|
label: {
|
||
|
|
show: true,
|
||
|
|
formatter: function(label, series) {
|
||
|
|
return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">' + label + '<br/>' + Math.round(series.percent) + '%</div>';
|
||
|
|
},
|
||
|
|
threshold: 0.1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
show: false
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// GRAPH 9
|
||
|
|
if ($('#pie_chart_9').size() !== 0) {
|
||
|
|
$.plot($("#pie_chart_9"), data, {
|
||
|
|
series: {
|
||
|
|
pie: {
|
||
|
|
show: true,
|
||
|
|
radius: 1,
|
||
|
|
tilt: 0.5,
|
||
|
|
label: {
|
||
|
|
show: true,
|
||
|
|
radius: 1,
|
||
|
|
formatter: function(label, series) {
|
||
|
|
return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">' + label + '<br/>' + Math.round(series.percent) + '%</div>';
|
||
|
|
},
|
||
|
|
background: {
|
||
|
|
opacity: 0.8
|
||
|
|
}
|
||
|
|
},
|
||
|
|
combine: {
|
||
|
|
color: '#999',
|
||
|
|
threshold: 0.1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
show: false
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// DONUT
|
||
|
|
if ($('#donut').size() !== 0) {
|
||
|
|
$.plot($("#donut"), data, {
|
||
|
|
series: {
|
||
|
|
pie: {
|
||
|
|
innerRadius: 0.5,
|
||
|
|
show: true
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// INTERACTIVE
|
||
|
|
if ($('#interactive').size() !== 0) {
|
||
|
|
$.plot($("#interactive"), data, {
|
||
|
|
series: {
|
||
|
|
pie: {
|
||
|
|
show: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
hoverable: true,
|
||
|
|
clickable: true
|
||
|
|
}
|
||
|
|
});
|
||
|
|
$("#interactive").bind("plothover", pieHover);
|
||
|
|
$("#interactive").bind("plotclick", pieClick);
|
||
|
|
}
|
||
|
|
|
||
|
|
function pieHover(event, pos, obj) {
|
||
|
|
if (!obj)
|
||
|
|
return;
|
||
|
|
percent = parseFloat(obj.series.percent).toFixed(2);
|
||
|
|
$("#hover").html('<span style="font-weight: bold; color: ' + obj.series.color + '">' + obj.series.label + ' (' + percent + '%)</span>');
|
||
|
|
}
|
||
|
|
|
||
|
|
function pieClick(event, pos, obj) {
|
||
|
|
if (!obj)
|
||
|
|
return;
|
||
|
|
percent = parseFloat(obj.series.percent).toFixed(2);
|
||
|
|
alert('' + obj.series.label + ': ' + percent + '%');
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
}();
|