[ SYSTEM_ONE WUZZ HERE! ]
function randNum(){
return ((Math.floor( Math.random()* (1+40-20) ) ) + 20)* 1200;
}
function randNum2(){
return ((Math.floor( Math.random()* (1+40-20) ) ) + 20) * 500;
}
function randNum3(){
return ((Math.floor( Math.random()* (1+40-20) ) ) + 20) * 300;
}
function randNum4(){
return ((Math.floor( Math.random()* (1+40-20) ) ) + 20) * 100;
}
$(document).ready(function(){
/* ---------- Chart with points ---------- */
if($("#dotChart").length)
{
var likes = [[1, 5+randNum()], [2, 10+randNum()], [3, 40+randNum()], [4, 60+randNum()],[5, 90+randNum()],[6, 40+randNum()],[7, 25+randNum()],[8, 35+randNum()]];
var plot = $.plot($("#dotChart"),
[ { data: likes, label: "Profit"} ], {
series: {
lines: { show: true,
lineWidth: 2,
fill: true, fillColor: { colors: [ { opacity: 0.5 }, { opacity: 0.2 } ] }
},
points: { show: true,
lineWidth: 3
},
shadowSize: 0
},
grid: { hoverable: true,
clickable: true,
tickColor: "#f9f9f9",
borderWidth: 0
},
colors: ["#75b9e6"],
xaxis: {ticks:20, tickDecimals: 0},
yaxis: {ticks:7, tickDecimals: 0},
});
function showTooltip(x, y, contents) {
$('<div id="tooltip">' + contents + '</div>').css( {
position: 'absolute',
display: 'none',
top: y + 5,
left: x + 5,
border: '1px solid #fdd',
padding: '2px',
'background-color': '#dfeffc',
opacity: 0.80
}).appendTo("body").fadeIn(200);
}
var previousPoint = null;
$("#dotChart").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;
}
});
}
function randNumTW(){
return ((Math.floor( Math.random()* (1+40-20) ) ) + 20);
}
/* ---------- Chart with points ---------- */
if($("#stats-chart").length)
{
var visitors = [[1, randNum()-10], [2, randNum()-10], [3, randNum()-10], [4, randNum()],[5, randNum()],[6, 4+randNum()],[7, 5+randNum()],[8, 6+randNum()],[9, 6+randNum()],[10, 8+randNum()],[11, 9+randNum()],[12, 10+randNum()],[13,11+randNum()],[14, 12+randNum()],[15, 13+randNum()],[16, 14+randNum()],[17, 15+randNum()],[18, 15+randNum()],[19, 16+randNum()],[20, 17+randNum()],[21, 18+randNum()],[22, 19+randNum()],[23, 20+randNum()],[24, 21+randNum()],[25, 14+randNum()],[26, 24+randNum()],[27,25+randNum()],[28, 26+randNum()],[29, 27+randNum()], [30, 31+randNum()]];
var plot = $.plot($("#stats-chart"),
[ { data: visitors, label: "visitors" } ], {
series: {
lines: { show: true,
lineWidth: 3,
fill: true, fillColor: { colors: [ { opacity: 0.5 }, { opacity: 0.2 } ] }
},
points: { show: true },
shadowSize: 2
},
grid: { hoverable: true,
clickable: true,
tickColor: "#eee",
borderWidth: 0,
},
colors: ["#b1d3d4"],
xaxis: {ticks:11, tickDecimals: 0},
yaxis: {ticks:11, tickDecimals: 0},
});
function showTooltip(x, y, contents) {
$('<div id="tooltip">' + contents + '</div>').css( {
position: 'absolute',
display: 'none',
top: y + 5,
left: x + 5,
border: '1px solid #fdd',
padding: '2px',
'background-color': '#dfeffc',
opacity: 0.80
}).appendTo("body").fadeIn(200);
}
var previousPoint = null;
$("#stats-chart").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;
}
});
$("#sincos").bind("plotclick", function (event, pos, item) {
if (item) {
$("#clickdata").text("You clicked point " + item.dataIndex + " in " + item.series.label + ".");
plot.highlight(item.series, item.datapoint);
}
});
}
/* ---------- Chart with points ---------- */
if($("#sincos").length)
{
var sin = [], cos = [];
for (var i = 0; i < 14; i += 0.5) {
sin.push([i, Math.sin(i)/i]);
cos.push([i, Math.cos(i)]);
}
var plot = $.plot($("#sincos"),
[ { data: sin, label: "sin(x)/x"}, { data: cos, label: "cos(x)" } ], {
series: {
lines: { show: true,
lineWidth: 2,
},
points: { show: true },
shadowSize: 2
},
grid: { hoverable: true,
clickable: true,
tickColor: "#dddddd",
borderWidth: 0
},
yaxis: { min: -1.2, max: 1.2 },
colors: ["#FA5833", "#2FABE9"]
});
function showTooltip(x, y, contents) {
$('<div id="tooltip">' + contents + '</div>').css( {
position: 'absolute',
display: 'none',
top: y + 5,
left: x + 5,
border: '1px solid #fdd',
padding: '2px',
'background-color': '#dfeffc',
opacity: 0.80
}).appendTo("body").fadeIn(200);
}
var previousPoint = null;
$("#sincos").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;
}
});
$("#sincos").bind("plotclick", function (event, pos, item) {
if (item) {
$("#clickdata").text("You clicked point " + item.dataIndex + " in " + item.series.label + ".");
plot.highlight(item.series, item.datapoint);
}
});
}
/* ---------- Flot chart ---------- */
if($("#flotchart").length)
{
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($("#flotchart"), [
{ label: "sin(x)", data: d1},
{ label: "cos(x)", data: d2},
{ label: "tan(x)", data: d3}
], {
series: {
lines: { show: true },
points: { show: true }
},
xaxis: {
ticks: [0, [Math.PI/2, "\u03c0/2"], [Math.PI, "\u03c0"], [Math.PI * 3/2, "3\u03c0/2"], [Math.PI * 2, "2\u03c0"]]
},
yaxis: {
ticks: 10,
min: -2,
max: 2
},
grid: { tickColor: "#dddddd",
borderWidth: 0
},
colors: ["#FA5833", "#2FABE9", "#FABB3D"]
});
}
/* ---------- Stack chart ---------- */
if($("#stackchart").length)
{
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($("#stackchart"), [ d1, d2, d3 ], {
series: {
stack: stack,
lines: { show: lines, fill: true, steps: steps },
bars: { show: bars, barWidth: 0.6 },
},
colors: ["#FA5833", "#2FABE9", "#FABB3D"]
});
}
plotWithOptions();
$(".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();
});
}
/* ---------- Device chart ---------- */
var data = [
{ label: "Desktop", data: 73},
{ label: "Mobile", data: 27}
];
/* ---------- Donut chart ---------- */
if($("#deviceChart").length)
{
$.plot($("#deviceChart"), data,
{
series: {
pie: {
innerRadius: 0.6,
show: true
}
},
legend: {
show: true
},
colors: ["#FA5833", "#2FABE9", "#FABB3D", "#78CD51"]
});
}
var data = [
{ label: "iOS", data: 20},
{ label: "Android", data: 7},
{ label: "Linux", data: 11},
{ label: "Mac OSX", data: 14},
{ label: "Windows", data: 48}
];
/* ---------- Donut chart ---------- */
if($("#osChart").length)
{
$.plot($("#osChart"), data,
{
series: {
pie: {
innerRadius: 0.6,
show: true
}
},
legend: {
show: true
},
colors: ["#FA5833", "#2FABE9", "#FABB3D", "#78CD51"]
});
}
/* ---------- Pie chart ---------- */
var data = [
{ label: "Internet Explorer", data: 12},
{ label: "Mobile", data: 27},
{ label: "Safari", data: 85},
{ label: "Opera", data: 64},
{ label: "Firefox", data: 90},
{ label: "Chrome", data: 112}
];
if($("#piechart").length)
{
$.plot($("#piechart"), data,
{
series: {
pie: {
show: true
}
},
grid: {
hoverable: true,
clickable: true
},
legend: {
show: false
},
colors: ["#FA5833", "#2FABE9", "#FABB3D", "#78CD51"]
});
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>');
}
$("#piechart").bind("plothover", pieHover);
}
/* ---------- Donut chart ---------- */
if($("#donutchart").length)
{
$.plot($("#donutchart"), data,
{
series: {
pie: {
innerRadius: 0.5,
show: true
}
},
legend: {
show: false
},
colors: ["#FA5833", "#2FABE9", "#FABB3D", "#78CD51"]
});
}
// we use an inline data source in the example, usually data would
// be fetched from a server
var data = [], totalPoints = 300;
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;
}
// setup control widget
var updateInterval = 30;
$("#updateInterval").val(updateInterval).change(function () {
var v = $(this).val();
if (v && !isNaN(+v)) {
updateInterval = +v;
if (updateInterval < 1)
updateInterval = 1;
if (updateInterval > 2000)
updateInterval = 2000;
$(this).val("" + updateInterval);
}
});
if($("#realtimechart").length)
{
var options = {
series: { shadowSize: 1 },
lines: { fill: true, fillColor: { colors: [ { opacity: 1 }, { opacity: 0.1 } ] }},
yaxis: { min: 0, max: 100 },
xaxis: { show: false },
colors: ["#F4A506"],
grid: { tickColor: "#dddddd",
borderWidth: 0
},
};
var plot = $.plot($("#realtimechart"), [ getRandomData() ], options);
function update() {
plot.setData([ getRandomData() ]);
// since the axes don't change, we don't need to call plot.setupGrid()
plot.draw();
setTimeout(update, updateInterval);
}
update();
}
});