897 lines
22 KiB
JavaScript
897 lines
22 KiB
JavaScript
'use strict';
|
|
$(document).ready(function() {
|
|
floatchart()
|
|
$(window).on('resize', function() {
|
|
floatchart();
|
|
});
|
|
$('#mobile-collapse').on('click', function() {
|
|
setTimeout(function() {
|
|
floatchart();
|
|
}, 700);
|
|
});
|
|
});
|
|
|
|
function floatchart() {
|
|
$(function() {
|
|
// [ flot options ]
|
|
var options = {
|
|
legend: {
|
|
show: false
|
|
},
|
|
series: {
|
|
label: "",
|
|
curvedLines: {
|
|
active: true,
|
|
nrSplinePoints: 20
|
|
},
|
|
},
|
|
tooltip: {
|
|
show: true,
|
|
content: "x : %x | y : %y"
|
|
},
|
|
grid: {
|
|
hoverable: true,
|
|
borderWidth: 0,
|
|
labelMargin: 0,
|
|
axisMargin: 0,
|
|
minBorderMargin: 0,
|
|
},
|
|
yaxis: {
|
|
min: 0,
|
|
max: 80,
|
|
color: 'transparent',
|
|
font: {
|
|
size: 0,
|
|
}
|
|
},
|
|
xaxis: {
|
|
color: 'transparent',
|
|
font: {
|
|
size: 0,
|
|
}
|
|
}
|
|
};
|
|
var options_nospace = {
|
|
legend: {
|
|
show: false
|
|
},
|
|
series: {
|
|
label: "",
|
|
curvedLines: {
|
|
active: true,
|
|
nrSplinePoints: 0
|
|
},
|
|
},
|
|
tooltip: {
|
|
show: true,
|
|
content: "x : %x | y : %y"
|
|
},
|
|
grid: {
|
|
hoverable: true,
|
|
borderWidth: 0,
|
|
labelMargin: 0,
|
|
axisMargin: 0,
|
|
minBorderMargin: 20,
|
|
},
|
|
yaxis: {
|
|
min: 0,
|
|
max: 80,
|
|
color: 'transparent',
|
|
font: {
|
|
size: 0,
|
|
}
|
|
},
|
|
xaxis: {
|
|
|
|
}
|
|
};
|
|
|
|
$.plot($("#sale-view"), [{
|
|
data: [
|
|
[0, 10],
|
|
[1, 20],
|
|
[2, 10],
|
|
[3, 27],
|
|
[4, 10],
|
|
[5, 20],
|
|
[6, 15],
|
|
[7, 24],
|
|
[8, 16],
|
|
[9, 20],
|
|
[10, 10],
|
|
[11, 18],
|
|
[12, 20],
|
|
[13, 10],
|
|
[14, 5],
|
|
],
|
|
color: "#04a9f5",
|
|
bars: {
|
|
show: true,
|
|
lineWidth: 0,
|
|
fill: true,
|
|
barWidth: 0.5,
|
|
align: 'center',
|
|
horizontal: false,
|
|
fillColor: {
|
|
colors: [{
|
|
opacity: 1
|
|
}, {
|
|
opacity: 1
|
|
}]
|
|
},
|
|
},
|
|
points: {
|
|
show: false,
|
|
radius: 3,
|
|
fill: true
|
|
},
|
|
curvedLines: {
|
|
apply: false,
|
|
}
|
|
}], {
|
|
series: {
|
|
label: "",
|
|
curvedLines: {
|
|
active: true,
|
|
nrSplinePoints: 0
|
|
},
|
|
},
|
|
tooltip: {
|
|
show: true,
|
|
content: "x : %x | y : %y"
|
|
},
|
|
grid: {
|
|
hoverable: true,
|
|
borderWidth: 0,
|
|
labelMargin: 0,
|
|
axisMargin: 0,
|
|
minBorderMargin: 0,
|
|
},
|
|
yaxis: {
|
|
min: 0,
|
|
max: 30,
|
|
color: 'transparent',
|
|
font: {
|
|
size: 0,
|
|
}
|
|
},
|
|
xaxis: {
|
|
color: 'transparent',
|
|
font: {
|
|
size: 0,
|
|
}
|
|
}
|
|
});
|
|
|
|
$.plot($("#sale-view-second"), [{
|
|
data: [
|
|
[0, 10],
|
|
[1, 20],
|
|
[2, 10],
|
|
[3, 27],
|
|
[4, 10],
|
|
[5, 20],
|
|
[6, 15],
|
|
[7, 24],
|
|
[8, 16],
|
|
[9, 20],
|
|
[10, 10],
|
|
[11, 18],
|
|
[12, 20],
|
|
[13, 10],
|
|
[14, 5],
|
|
|
|
],
|
|
color: "#1de9b6",
|
|
bars: {
|
|
show: true,
|
|
lineWidth: 0,
|
|
fill: true,
|
|
barWidth: 0.5,
|
|
align: 'center',
|
|
horizontal: false,
|
|
fillColor: {
|
|
colors: [{
|
|
opacity: 1
|
|
}, {
|
|
opacity: 1
|
|
}]
|
|
},
|
|
},
|
|
points: {
|
|
show: false,
|
|
radius: 3,
|
|
fill: true
|
|
},
|
|
curvedLines: {
|
|
apply: false,
|
|
}
|
|
}], {
|
|
series: {
|
|
label: "",
|
|
curvedLines: {
|
|
active: true,
|
|
nrSplinePoints: 0
|
|
},
|
|
},
|
|
tooltip: {
|
|
show: true,
|
|
content: "x : %x | y : %y"
|
|
},
|
|
grid: {
|
|
hoverable: true,
|
|
borderWidth: 0,
|
|
labelMargin: 0,
|
|
axisMargin: 0,
|
|
minBorderMargin: 0,
|
|
},
|
|
yaxis: {
|
|
min: 0,
|
|
max: 30,
|
|
color: 'transparent',
|
|
font: {
|
|
size: 0,
|
|
}
|
|
},
|
|
xaxis: {
|
|
color: 'transparent',
|
|
font: {
|
|
size: 0,
|
|
}
|
|
}
|
|
});
|
|
$.plot($("#sale-view-third"), [{
|
|
data: [
|
|
[0, 10],
|
|
[1, 20],
|
|
[2, 10],
|
|
[3, 27],
|
|
[4, 10],
|
|
[5, 20],
|
|
[6, 15],
|
|
[7, 24],
|
|
[8, 16],
|
|
[9, 20],
|
|
[10, 10],
|
|
[11, 18],
|
|
[12, 20],
|
|
[13, 10],
|
|
[14, 5],
|
|
],
|
|
color: "#ff5252",
|
|
bars: {
|
|
show: true,
|
|
lineWidth: 0,
|
|
fill: true,
|
|
barWidth: 0.5,
|
|
align: 'center',
|
|
horizontal: false,
|
|
fillColor: {
|
|
colors: [{
|
|
opacity: 1
|
|
}, {
|
|
opacity: 1
|
|
}]
|
|
},
|
|
},
|
|
points: {
|
|
show: false,
|
|
radius: 3,
|
|
fill: true
|
|
},
|
|
curvedLines: {
|
|
apply: false,
|
|
}
|
|
}], {
|
|
series: {
|
|
label: "",
|
|
curvedLines: {
|
|
active: true,
|
|
nrSplinePoints: 0
|
|
},
|
|
},
|
|
tooltip: {
|
|
show: true,
|
|
content: "x : %x | y : %y"
|
|
},
|
|
grid: {
|
|
hoverable: true,
|
|
borderWidth: 0,
|
|
labelMargin: 0,
|
|
axisMargin: 0,
|
|
minBorderMargin: 0,
|
|
},
|
|
yaxis: {
|
|
min: 0,
|
|
max: 30,
|
|
color: 'transparent',
|
|
font: {
|
|
size: 0,
|
|
}
|
|
},
|
|
xaxis: {
|
|
color: 'transparent',
|
|
font: {
|
|
size: 0,
|
|
}
|
|
}
|
|
});
|
|
|
|
$.plot($("#app-sale"), [{
|
|
data: [
|
|
[0, 10],
|
|
[2, 27],
|
|
[4, 10],
|
|
[6, 10],
|
|
[8, 27],
|
|
[10, 20],
|
|
[12, 20],
|
|
],
|
|
color: "#1DE3BE",
|
|
lines: {
|
|
show: true,
|
|
fill: false,
|
|
lineWidth: 3
|
|
},
|
|
points: {
|
|
show: false,
|
|
radius: 3,
|
|
fill: true
|
|
},
|
|
curvedLines: {
|
|
apply: false,
|
|
}
|
|
}], {
|
|
series: {
|
|
label: "",
|
|
curvedLines: {
|
|
active: true,
|
|
nrSplinePoints: 0
|
|
},
|
|
},
|
|
tooltip: {
|
|
show: true,
|
|
content: "x : %x | y : %y"
|
|
},
|
|
grid: {
|
|
hoverable: true,
|
|
borderWidth: 0,
|
|
labelMargin: 0,
|
|
axisMargin: 0,
|
|
minBorderMargin: 0,
|
|
},
|
|
yaxis: {
|
|
min: 0,
|
|
max: 40,
|
|
color: 'transparent',
|
|
font: {
|
|
size: 0,
|
|
}
|
|
},
|
|
xaxis: {
|
|
color: 'transparent',
|
|
font: {
|
|
size: 0,
|
|
}
|
|
}
|
|
});
|
|
$.plot($("#app-sale1"), [{
|
|
data: [
|
|
[0, 27],
|
|
[2, 10],
|
|
[4, 20],
|
|
[6, 15],
|
|
[8, 27],
|
|
[10, 20],
|
|
[12, 20],
|
|
],
|
|
color: "#FF4962",
|
|
lines: {
|
|
show: true,
|
|
fill: false,
|
|
lineWidth: 3
|
|
},
|
|
points: {
|
|
show: false,
|
|
radius: 3,
|
|
fill: true
|
|
},
|
|
curvedLines: {
|
|
apply: false,
|
|
}
|
|
}], {
|
|
series: {
|
|
label: "",
|
|
curvedLines: {
|
|
active: true,
|
|
nrSplinePoints: 0
|
|
},
|
|
},
|
|
tooltip: {
|
|
show: true,
|
|
content: "x : %x | y : %y"
|
|
},
|
|
grid: {
|
|
hoverable: true,
|
|
borderWidth: 0,
|
|
labelMargin: 0,
|
|
axisMargin: 0,
|
|
minBorderMargin: 0,
|
|
},
|
|
yaxis: {
|
|
min: 0,
|
|
max: 40,
|
|
color: 'transparent',
|
|
font: {
|
|
size: 0,
|
|
}
|
|
},
|
|
xaxis: {
|
|
color: 'transparent',
|
|
font: {
|
|
size: 0,
|
|
}
|
|
}
|
|
});
|
|
$.plot($("#app-sale2"), [{
|
|
data: [
|
|
[0, 10],
|
|
[2, 27],
|
|
[4, 18],
|
|
[6, 25],
|
|
[8, 15],
|
|
[10, 25],
|
|
[12, 20],
|
|
],
|
|
color: "#8C9CD4",
|
|
lines: {
|
|
show: true,
|
|
fill: false,
|
|
lineWidth: 3
|
|
},
|
|
points: {
|
|
show: false,
|
|
radius: 3,
|
|
fill: true
|
|
},
|
|
curvedLines: {
|
|
apply: false,
|
|
}
|
|
}], {
|
|
series: {
|
|
label: "",
|
|
curvedLines: {
|
|
active: true,
|
|
nrSplinePoints: 0
|
|
},
|
|
},
|
|
tooltip: {
|
|
show: true,
|
|
content: "x : %x | y : %y"
|
|
},
|
|
grid: {
|
|
hoverable: true,
|
|
borderWidth: 0,
|
|
labelMargin: 0,
|
|
axisMargin: 0,
|
|
minBorderMargin: 0,
|
|
},
|
|
yaxis: {
|
|
min: 0,
|
|
max: 40,
|
|
color: 'transparent',
|
|
font: {
|
|
size: 0,
|
|
}
|
|
},
|
|
xaxis: {
|
|
color: 'transparent',
|
|
font: {
|
|
size: 0,
|
|
}
|
|
}
|
|
});
|
|
$.plot($("#app-sale3"), [{
|
|
data: [
|
|
[0, 10],
|
|
[2, 27],
|
|
[4, 10],
|
|
[6, 10],
|
|
[8, 27],
|
|
[10, 20],
|
|
[12, 20],
|
|
],
|
|
color: "#1DE3BE",
|
|
lines: {
|
|
show: true,
|
|
fill: false,
|
|
lineWidth: 3
|
|
},
|
|
points: {
|
|
show: false,
|
|
radius: 3,
|
|
fill: true
|
|
},
|
|
curvedLines: {
|
|
apply: false,
|
|
}
|
|
}], {
|
|
series: {
|
|
label: "",
|
|
curvedLines: {
|
|
active: true,
|
|
nrSplinePoints: 0
|
|
},
|
|
},
|
|
tooltip: {
|
|
show: true,
|
|
content: "x : %x | y : %y"
|
|
},
|
|
grid: {
|
|
hoverable: true,
|
|
borderWidth: 0,
|
|
labelMargin: 0,
|
|
axisMargin: 0,
|
|
minBorderMargin: 0,
|
|
},
|
|
yaxis: {
|
|
min: 0,
|
|
max: 40,
|
|
color: 'transparent',
|
|
font: {
|
|
size: 0,
|
|
}
|
|
},
|
|
xaxis: {
|
|
color: 'transparent',
|
|
font: {
|
|
size: 0,
|
|
}
|
|
}
|
|
});
|
|
$.plot($("#user-sale"), [{
|
|
data: [
|
|
[0, 10],
|
|
[3, 80],
|
|
[6, 30],
|
|
[9, 70],
|
|
[12, 20],
|
|
[15, 85],
|
|
[18, 70],
|
|
],
|
|
color: "#1DE3BE",
|
|
lines: {
|
|
show: true,
|
|
fill: false,
|
|
lineWidth: 3
|
|
},
|
|
points: {
|
|
show: false,
|
|
radius: 3,
|
|
fill: true
|
|
},
|
|
curvedLines: {
|
|
apply: true,
|
|
}
|
|
}], {
|
|
series: {
|
|
label: "",
|
|
curvedLines: {
|
|
active: true,
|
|
},
|
|
},
|
|
tooltip: {
|
|
show: true,
|
|
content: "x : %x | y : %y"
|
|
},
|
|
grid: {
|
|
hoverable: true,
|
|
borderWidth: 0,
|
|
labelMargin: 0,
|
|
axisMargin: 0,
|
|
minBorderMargin: 0,
|
|
},
|
|
yaxis: {
|
|
min: 0,
|
|
max: 90,
|
|
color: 'transparent',
|
|
font: {
|
|
size: 0,
|
|
}
|
|
},
|
|
xaxis: {
|
|
color: 'transparent',
|
|
font: {
|
|
size: 0,
|
|
}
|
|
}
|
|
});
|
|
$.plot($("#user-sale1"), [{
|
|
data: [
|
|
[0, 10],
|
|
[3, 80],
|
|
[6, 10],
|
|
[9, 70],
|
|
[12, 10],
|
|
[15, 60],
|
|
[18, 10],
|
|
],
|
|
color: "#1DE3BE",
|
|
lines: {
|
|
show: true,
|
|
fill: false,
|
|
lineWidth: 3
|
|
},
|
|
points: {
|
|
show: false,
|
|
radius: 3,
|
|
fill: true
|
|
},
|
|
curvedLines: {
|
|
apply: true,
|
|
}
|
|
}], {
|
|
series: {
|
|
label: "",
|
|
curvedLines: {
|
|
active: true,
|
|
},
|
|
},
|
|
tooltip: {
|
|
show: true,
|
|
content: "x : %x | y : %y"
|
|
},
|
|
grid: {
|
|
hoverable: true,
|
|
borderWidth: 0,
|
|
labelMargin: 0,
|
|
axisMargin: 0,
|
|
minBorderMargin: 0,
|
|
},
|
|
yaxis: {
|
|
min: 0,
|
|
max: 90,
|
|
color: 'transparent',
|
|
font: {
|
|
size: 0,
|
|
}
|
|
},
|
|
xaxis: {
|
|
color: 'transparent',
|
|
font: {
|
|
size: 0,
|
|
}
|
|
}
|
|
});
|
|
$.plot($("#user-sale2"), [{
|
|
data: [
|
|
[0, 80],
|
|
[3, 10],
|
|
[6, 50],
|
|
[9, 45],
|
|
[12, 80],
|
|
[15, 30],
|
|
[18, 70],
|
|
[21, 60],
|
|
],
|
|
color: "#8C9CD4",
|
|
lines: {
|
|
show: true,
|
|
fill: false,
|
|
lineWidth: 3
|
|
},
|
|
points: {
|
|
show: false,
|
|
radius: 3,
|
|
fill: true
|
|
},
|
|
curvedLines: {
|
|
apply: true,
|
|
}
|
|
}], {
|
|
series: {
|
|
label: "",
|
|
curvedLines: {
|
|
active: true,
|
|
},
|
|
},
|
|
tooltip: {
|
|
show: true,
|
|
content: "x : %x | y : %y"
|
|
},
|
|
grid: {
|
|
hoverable: true,
|
|
borderWidth: 0,
|
|
labelMargin: 0,
|
|
axisMargin: 0,
|
|
minBorderMargin: 0,
|
|
},
|
|
yaxis: {
|
|
min: 0,
|
|
max: 90,
|
|
color: 'transparent',
|
|
font: {
|
|
size: 0,
|
|
}
|
|
},
|
|
xaxis: {
|
|
color: 'transparent',
|
|
font: {
|
|
size: 0,
|
|
}
|
|
}
|
|
});
|
|
$.plot($("#user-sale3"), [{
|
|
data: [
|
|
[0, 10],
|
|
[3, 70],
|
|
[6, 10],
|
|
[9, 65],
|
|
[12, 10],
|
|
[15, 50],
|
|
[18, 70],
|
|
],
|
|
color: "#8C9CD4",
|
|
lines: {
|
|
show: true,
|
|
fill: false,
|
|
lineWidth: 3
|
|
},
|
|
points: {
|
|
show: false,
|
|
radius: 3,
|
|
fill: true
|
|
},
|
|
curvedLines: {
|
|
apply: true,
|
|
}
|
|
}], {
|
|
series: {
|
|
label: "",
|
|
curvedLines: {
|
|
active: true,
|
|
},
|
|
},
|
|
tooltip: {
|
|
show: true,
|
|
content: "x : %x | y : %y"
|
|
},
|
|
grid: {
|
|
hoverable: true,
|
|
borderWidth: 0,
|
|
labelMargin: 0,
|
|
axisMargin: 0,
|
|
minBorderMargin: 0,
|
|
},
|
|
yaxis: {
|
|
min: 0,
|
|
max: 90,
|
|
color: 'transparent',
|
|
font: {
|
|
size: 0,
|
|
}
|
|
},
|
|
xaxis: {
|
|
color: 'transparent',
|
|
font: {
|
|
size: 0,
|
|
}
|
|
}
|
|
});
|
|
$.plot($("#user-sale4"), [{
|
|
data: [
|
|
[0, 50],
|
|
[3, 70],
|
|
[6, 10],
|
|
[9, 65],
|
|
[12, 10],
|
|
[15, 50],
|
|
[18, 70],
|
|
],
|
|
color: "#04a9f5",
|
|
lines: {
|
|
show: true,
|
|
fill: false,
|
|
lineWidth: 3
|
|
},
|
|
points: {
|
|
show: false,
|
|
radius: 3,
|
|
fill: true
|
|
},
|
|
curvedLines: {
|
|
apply: true,
|
|
}
|
|
}], {
|
|
series: {
|
|
label: "",
|
|
curvedLines: {
|
|
active: true,
|
|
},
|
|
},
|
|
tooltip: {
|
|
show: true,
|
|
content: "x : %x | y : %y"
|
|
},
|
|
grid: {
|
|
hoverable: true,
|
|
borderWidth: 0,
|
|
labelMargin: 0,
|
|
axisMargin: 0,
|
|
minBorderMargin: 0,
|
|
},
|
|
yaxis: {
|
|
min: 0,
|
|
max: 90,
|
|
color: 'transparent',
|
|
font: {
|
|
size: 0,
|
|
}
|
|
},
|
|
xaxis: {
|
|
color: 'transparent',
|
|
font: {
|
|
size: 0,
|
|
}
|
|
}
|
|
});
|
|
$.plot($("#user-sale5"), [{
|
|
data: [
|
|
[0, 10],
|
|
[3, 80],
|
|
[6, 10],
|
|
[9, 70],
|
|
[12, 10],
|
|
[15, 60],
|
|
[18, 10],
|
|
],
|
|
color: "#04a9f5",
|
|
lines: {
|
|
show: true,
|
|
fill: false,
|
|
lineWidth: 3
|
|
},
|
|
points: {
|
|
show: false,
|
|
radius: 3,
|
|
fill: true
|
|
},
|
|
curvedLines: {
|
|
apply: true,
|
|
}
|
|
}], {
|
|
series: {
|
|
label: "",
|
|
curvedLines: {
|
|
active: true,
|
|
},
|
|
},
|
|
tooltip: {
|
|
show: true,
|
|
content: "x : %x | y : %y"
|
|
},
|
|
grid: {
|
|
hoverable: true,
|
|
borderWidth: 0,
|
|
labelMargin: 0,
|
|
axisMargin: 0,
|
|
minBorderMargin: 0,
|
|
},
|
|
yaxis: {
|
|
min: 0,
|
|
max: 90,
|
|
color: 'transparent',
|
|
font: {
|
|
size: 0,
|
|
}
|
|
},
|
|
xaxis: {
|
|
color: 'transparent',
|
|
font: {
|
|
size: 0,
|
|
}
|
|
}
|
|
});
|
|
});
|
|
}
|