File: /var/www/html/pmw24/app/public/customer_assets/js/flot-data.js
// Real Time chart
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,
y = prev + Math.random() * 10 - 5;
if (y < 0) {
y = 0;
} else 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;
}
// Set up the 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;
} else if (updateInterval > 3000) {
updateInterval = 3000;
}
$(this).val("" + updateInterval);
}
});
var plot = $.plot("#placeholder", [ getRandomData() ], {
series: {
shadowSize: 0 // Drawing is faster without shadows
},
yaxis: {
min: 0,
max: 100
},
xaxis: {
show: false
},
colors: ["#f75b36"],
grid: {
color: "#AFAFAF",
hoverable: true,
borderWidth: 0,
backgroundColor: '#FFF'
},
tooltip: true,
tooltipOpts: {
content: "Y: %y",
defaultTheme: false
}
});
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();
//Flot Line Chart
$(document).ready(function() {
console.log("document ready");
var offset = 0;
plot();
function plot() {
var sin = [],
cos = [];
for (var i = 0; i < 12; i += 0.2) {
sin.push([i, Math.sin(i + offset)]);
cos.push([i, Math.cos(i + offset)]);
}
var options = {
series: {
lines: {
show: true
},
points: {
show: true
}
},
grid: {
hoverable: true //IMPORTANT! this is needed for tooltip to work
},
yaxis: {
min: -1.2,
max: 1.2
},
colors: ["#f75b36", "#00b5c2"],
grid: {
color: "#AFAFAF",
hoverable: true,
borderWidth: 0,
backgroundColor: '#FFF'
},
tooltip: true,
tooltipOpts: {
content: "'%s' of %x.1 is %y.4",
shifts: {
x: -60,
y: 25
}
}
};
var plotObj = $.plot($("#flot-line-chart"), [{
data: sin,
label: "sin(x)",
}, {
data: cos,
label: "cos(x)"
}],
options);
}
});
//Flot Pie Chart
$(function() {
var data = [{
label: "Series 0",
data: 10,
color: "#4f5467",
}, {
label: "Series 1",
data: 1,
color: "#00c292",
}, {
label: "Series 2",
data: 3,
color:"#00b5c2",
}, {
label: "Series 3",
data: 1,
color:"#f75b36",
}];
var plotObj = $.plot($("#flot-pie-chart"), data, {
series: {
pie: {
innerRadius: 0.5,
show: true
}
},
grid: {
hoverable: true
},
color: null,
tooltip: true,
tooltipOpts: {
content: "%p.0%, %s", // show percentages, rounding to 2 decimal places
shifts: {
x: 20,
y: 0
},
defaultTheme: false
}
});
});
//Flot Moving Line Chart
$(function() {
var container = $("#flot-line-chart-moving");
// Determine how many data points to keep based on the placeholder's initial size;
// this gives us a nice high-res plot while avoiding more than one point per pixel.
var maximum = container.outerWidth() / 2 || 300;
//
var data = [];
function getRandomData() {
if (data.length) {
data = data.slice(1);
}
while (data.length < maximum) {
var previous = data.length ? data[data.length - 1] : 50;
var y = previous + Math.random() * 10 - 5;
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 < data.length; ++i) {
res.push([i, data[i]])
}
return res;
}
//
series = [{
data: getRandomData(),
lines: {
fill: true
}
}];
//
var plot = $.plot(container, series, {
colors: ["#00b5c2"],
grid: {
borderWidth: 0,
minBorderMargin: 20,
labelMargin: 10,
backgroundColor: {
colors: ["#fff", "#fff"]
},
margin: {
top: 8,
bottom: 20,
left: 20
},
markings: function(axes) {
var markings = [];
var xaxis = axes.xaxis;
for (var x = Math.floor(xaxis.min); x < xaxis.max; x += xaxis.tickSize * 1) {
markings.push({
xaxis: {
from: x,
to: x + xaxis.tickSize
},
color: "#fff"
});
}
return markings;
}
},
xaxis: {
tickFormatter: function() {
return "";
}
},
yaxis: {
min: 0,
max: 110
},
legend: {
show: true
}
});
// Update the random dataset at 25FPS for a smoothly-animating chart
setInterval(function updateRandom() {
series[0].data = getRandomData();
plot.setData(series);
plot.draw();
}, 40);
});
//Flot Bar Chart
$(function() {
var barOptions = {
series: {
bars: {
show: true,
barWidth: 43200000
}
},
xaxis: {
mode: "time",
timeformat: "%m/%d",
minTickSize: [2, "day"]
},
grid: {
hoverable: true
},
legend: {
show: false
},
grid: {
color: "#AFAFAF",
hoverable: true,
borderWidth: 0,
backgroundColor: '#FFF'
},
tooltip: true,
tooltipOpts: {
content: "x: %x, y: %y"
}
};
var barData = {
label: "bar",
color: "#f75b36",
data: [
[1354521600000, 1000],
[1355040000000, 2000],
[1355223600000, 3000],
[1355306400000, 4000],
[1355487300000, 5000],
[1355571900000, 6000]
]
};
$.plot($("#flot-bar-chart"), [barData], barOptions);
});
// sales bar chart
$(function() {
//some data
var d1 = [];
for (var i = 0; i <= 10; i += 1)
d1.push([i, parseInt(Math.random() * 60)]);
var d2 = [];
for (var i = 0; i <= 10; i += 1)
d2.push([i, parseInt(Math.random() * 40)]);
var d3 = [];
for (var i = 0; i <= 10; i += 1)
d3.push([i, parseInt(Math.random() * 25)]);
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 = true,
lines = true,
steps = true;
var options = {
bars : {
show : true,
barWidth : 0.2,
fill : 1
},
grid : {
show : true,
aboveData : false,
labelMargin : 5,
axisMargin : 0,
borderWidth : 1,
minBorderMargin : 5,
clickable : true,
hoverable : true,
autoHighlight : false,
mouseActiveRadius : 20,
borderColor : '#f5f5f5'
},
series : {
stack : stack
},
legend : {
position : "ne",
margin : [0, 0],
noColumns : 0,
labelBoxBorderColor : null,
labelFormatter : function(label, series) {
// just add some space to labes
return '' + label + ' ';
},
width : 30,
height : 5
},
yaxis : {
tickColor : '#f5f5f5',
font : {
color : '#bdbdbd'
}
},
xaxis : {
tickColor : '#f5f5f5',
font : {
color : '#bdbdbd'
}
},
colors : ["#4F5467", "#00b5c2", "#f75b36"],
tooltip : true, //activate tooltip
tooltipOpts : {
content : "%s : %y.0",
shifts : {
x : -30,
y : -50
}
}
};
$.plot($(".sales-bars-chart"), ds, options);
});