You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
719 lines
19 KiB
719 lines
19 KiB
1 year ago
|
"use strict";
|
||
|
|
$(document).ready(function() {
|
||
|
|
$(window).on('resize', function() {
|
||
|
|
categoryChart();
|
||
|
|
strackingChart();
|
||
|
|
pieChart();
|
||
|
|
donutChart();
|
||
|
|
});
|
||
|
|
categoryChart();
|
||
|
|
strackingChart();
|
||
|
|
pieChart();
|
||
|
|
donutChart();
|
||
|
|
/*categories chart*/
|
||
|
|
function categoryChart() {
|
||
|
|
var data = [
|
||
|
|
["January", 20],
|
||
|
|
["February", 8],
|
||
|
|
["March", 4],
|
||
|
|
["April", 13],
|
||
|
|
["May", 5],
|
||
|
|
["June", 9]
|
||
|
|
];
|
||
|
|
$.plot("#placeholder", [data], {
|
||
|
|
series: {
|
||
|
|
bars: {
|
||
|
|
show: true,
|
||
|
|
barWidth: 0.6,
|
||
|
|
align: "center",
|
||
|
|
}
|
||
|
|
},
|
||
|
|
xaxis: {
|
||
|
|
mode: "categories",
|
||
|
|
tickLength: 0,
|
||
|
|
tickColor: '#f5f5f5',
|
||
|
|
},
|
||
|
|
colors: ["#01C0C8", "#83D6DE"],
|
||
|
|
labelBoxBorderColor: "red"
|
||
|
|
});
|
||
|
|
};
|
||
|
|
/*Stracking chart*/
|
||
|
|
function strackingChart() {
|
||
|
|
var d1 = [];
|
||
|
|
for (var i = 0; i <= 10; i += 1) {
|
||
|
|
d1.push([i, parseInt(Math.random() * 30)]); /*yellow*/
|
||
|
|
}
|
||
|
|
var d2 = [];
|
||
|
|
for (var i = 0; i <= 10; i += 1) {
|
||
|
|
d2.push([i, parseInt(Math.random() * 30)]); /*blue*/
|
||
|
|
}
|
||
|
|
var d3 = [];
|
||
|
|
for (var i = 0; i <= 10; i += 1) {
|
||
|
|
d3.push([i, parseInt(Math.random() * 30)]); /*red*/
|
||
|
|
}
|
||
|
|
var stack = 0,
|
||
|
|
bars = false,
|
||
|
|
lines = true,
|
||
|
|
steps = false;
|
||
|
|
|
||
|
|
function plotWithOptions() {
|
||
|
|
$.plot("#placeholder1", [d1, d2, d3], {
|
||
|
|
series: {
|
||
|
|
stack: stack,
|
||
|
|
lines: {
|
||
|
|
show: lines,
|
||
|
|
fill: true,
|
||
|
|
steps: steps
|
||
|
|
},
|
||
|
|
bars: {
|
||
|
|
show: bars,
|
||
|
|
barWidth: 0.6
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
plotWithOptions();
|
||
|
|
};
|
||
|
|
/*pie chart-Withour legend*/
|
||
|
|
function pieChart() {
|
||
|
|
var data1 = [{
|
||
|
|
label: "Sales & Marketing",
|
||
|
|
data: 2034,
|
||
|
|
color: "#25A6F7"
|
||
|
|
}, {
|
||
|
|
label: "Research & Development",
|
||
|
|
data: 16410,
|
||
|
|
color: "#01C0C8"
|
||
|
|
}, {
|
||
|
|
label: "General & Administration",
|
||
|
|
data: 4670,
|
||
|
|
color: "#42E1FE"
|
||
|
|
}];
|
||
|
|
$.plot('#placeholder2', data1, {
|
||
|
|
series: {
|
||
|
|
pie: {
|
||
|
|
show: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
show: false
|
||
|
|
}
|
||
|
|
});
|
||
|
|
};
|
||
|
|
/*Donut Hole*/
|
||
|
|
function donutChart() {
|
||
|
|
var data2 = [{
|
||
|
|
label: "Sales & Marketing",
|
||
|
|
data: 2034,
|
||
|
|
color: "#FB9678"
|
||
|
|
}, {
|
||
|
|
label: "Research & Development",
|
||
|
|
data: 16410,
|
||
|
|
color: "#4F5467"
|
||
|
|
}, {
|
||
|
|
label: "General & Administration",
|
||
|
|
data: 4670,
|
||
|
|
color: "#01C0C8"
|
||
|
|
}];
|
||
|
|
$.plot('#placeholder3', data2, {
|
||
|
|
series: {
|
||
|
|
pie: {
|
||
|
|
innerRadius: 0.7,
|
||
|
|
show: true
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
show: true,
|
||
|
|
position: "center"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
// series types chart
|
||
|
|
$(function() {
|
||
|
|
var d1 = [];
|
||
|
|
for (var i = 0; i < 14; i += 0.5) {
|
||
|
|
d1.push([i, Math.sin(i)]);
|
||
|
|
}
|
||
|
|
var d2 = [
|
||
|
|
[0, 3],
|
||
|
|
[4, 8],
|
||
|
|
[8, 5],
|
||
|
|
[9, 13]
|
||
|
|
];
|
||
|
|
var d3 = [];
|
||
|
|
for (var i = 0; i < 14; i += 0.5) {
|
||
|
|
d3.push([i, Math.cos(i)]);
|
||
|
|
}
|
||
|
|
var d4 = [];
|
||
|
|
for (var i = 0; i < 14; i += 0.1) {
|
||
|
|
d4.push([i, Math.sqrt(i * 10)]);
|
||
|
|
}
|
||
|
|
var d5 = [];
|
||
|
|
for (var i = 0; i < 14; i += 0.5) {
|
||
|
|
d5.push([i, Math.sqrt(i)]);
|
||
|
|
}
|
||
|
|
var d6 = [];
|
||
|
|
for (var i = 0; i < 14; i += 0.5 + Math.random()) {
|
||
|
|
d6.push([i, Math.sqrt(2 * i + Math.sin(i) + 5)]);
|
||
|
|
}
|
||
|
|
$.plot("#seriestypes", [{
|
||
|
|
data: d1,
|
||
|
|
lines: {
|
||
|
|
show: true,
|
||
|
|
fill: true
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
data: d2,
|
||
|
|
bars: {
|
||
|
|
show: true
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
data: d3,
|
||
|
|
points: {
|
||
|
|
show: true
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
data: d4,
|
||
|
|
lines: {
|
||
|
|
show: true
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
data: d5,
|
||
|
|
lines: {
|
||
|
|
show: true
|
||
|
|
},
|
||
|
|
points: {
|
||
|
|
show: true
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
data: d6,
|
||
|
|
lines: {
|
||
|
|
show: true,
|
||
|
|
steps: true
|
||
|
|
}
|
||
|
|
}]);
|
||
|
|
// Add the Flot version string to the footer
|
||
|
|
$("#footer").prepend("Flot " + $.plot.version + " – ");
|
||
|
|
});
|
||
|
|
//real-time update
|
||
|
|
$(function() {
|
||
|
|
// 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,
|
||
|
|
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 > 2000) {
|
||
|
|
updateInterval = 2000;
|
||
|
|
}
|
||
|
|
$(this).val("" + updateInterval);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
var plot = $.plot("#realtimeupdate", [getRandomData()], {
|
||
|
|
series: {
|
||
|
|
shadowSize: 0 // Drawing is faster without shadows
|
||
|
|
},
|
||
|
|
yaxis: {
|
||
|
|
min: 0,
|
||
|
|
max: 100
|
||
|
|
},
|
||
|
|
xaxis: {
|
||
|
|
show: 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();
|
||
|
|
// Add the Flot version string to the footer
|
||
|
|
$("#footer").prepend("Flot " + $.plot.version + " – ");
|
||
|
|
});
|
||
|
|
//Percentiles
|
||
|
|
$(function() {
|
||
|
|
var males = {
|
||
|
|
"8%": [
|
||
|
|
[2, 20.0],
|
||
|
|
[3, 30.3],
|
||
|
|
[4, 40.0],
|
||
|
|
[5, 50.5],
|
||
|
|
[6, 60.7],
|
||
|
|
[7, 70.6],
|
||
|
|
[8, 80.6],
|
||
|
|
[9, 90.3],
|
||
|
|
[10, 100.3],
|
||
|
|
[11, 110.4],
|
||
|
|
[12, 146.5],
|
||
|
|
[13, 151.7],
|
||
|
|
[14, 159.9],
|
||
|
|
[15, 165.4],
|
||
|
|
[16, 167.8],
|
||
|
|
[17, 168.7],
|
||
|
|
[18, 169.5],
|
||
|
|
[19, 168.0]
|
||
|
|
],
|
||
|
|
"90%": [
|
||
|
|
[2, 96.8],
|
||
|
|
[3, 105.2],
|
||
|
|
[4, 113.9],
|
||
|
|
[5, 120.8],
|
||
|
|
[6, 127.0],
|
||
|
|
[7, 133.1],
|
||
|
|
[8, 139.1],
|
||
|
|
[9, 143.9],
|
||
|
|
[10, 151.3],
|
||
|
|
[11, 161.1],
|
||
|
|
[12, 164.8],
|
||
|
|
[13, 173.5],
|
||
|
|
[14, 179.0],
|
||
|
|
[15, 182.0],
|
||
|
|
[16, 186.9],
|
||
|
|
[17, 185.2],
|
||
|
|
[18, 186.3],
|
||
|
|
[19, 186.6]
|
||
|
|
],
|
||
|
|
"25%": [
|
||
|
|
[2, 89.2],
|
||
|
|
[3, 94.9],
|
||
|
|
[4, 104.4],
|
||
|
|
[5, 111.4],
|
||
|
|
[6, 117.5],
|
||
|
|
[7, 120.2],
|
||
|
|
[8, 127.1],
|
||
|
|
[9, 132.9],
|
||
|
|
[10, 136.8],
|
||
|
|
[11, 144.4],
|
||
|
|
[12, 149.5],
|
||
|
|
[13, 154.1],
|
||
|
|
[14, 163.1],
|
||
|
|
[15, 169.2],
|
||
|
|
[16, 170.4],
|
||
|
|
[17, 171.2],
|
||
|
|
[18, 172.4],
|
||
|
|
[19, 170.8]
|
||
|
|
],
|
||
|
|
"10%": [
|
||
|
|
[2, 86.9],
|
||
|
|
[3, 92.6],
|
||
|
|
[4, 99.9],
|
||
|
|
[5, 107.0],
|
||
|
|
[6, 114.0],
|
||
|
|
[7, 113.5],
|
||
|
|
[8, 123.6],
|
||
|
|
[9, 129.2],
|
||
|
|
[10, 133.0],
|
||
|
|
[11, 140.6],
|
||
|
|
[12, 145.2],
|
||
|
|
[13, 149.7],
|
||
|
|
[14, 158.4],
|
||
|
|
[15, 163.5],
|
||
|
|
[16, 166.9],
|
||
|
|
[17, 167.5],
|
||
|
|
[18, 167.1],
|
||
|
|
[19, 165.3]
|
||
|
|
],
|
||
|
|
"mean": [
|
||
|
|
[2, 91.9],
|
||
|
|
[3, 98.5],
|
||
|
|
[4, 107.1],
|
||
|
|
[5, 114.4],
|
||
|
|
[6, 120.6],
|
||
|
|
[7, 124.7],
|
||
|
|
[8, 131.1],
|
||
|
|
[9, 136.8],
|
||
|
|
[10, 142.3],
|
||
|
|
[11, 150.0],
|
||
|
|
[12, 154.7],
|
||
|
|
[13, 161.9],
|
||
|
|
[14, 168.7],
|
||
|
|
[15, 173.6],
|
||
|
|
[16, 175.9],
|
||
|
|
[17, 176.6],
|
||
|
|
[18, 176.8],
|
||
|
|
[19, 176.7]
|
||
|
|
],
|
||
|
|
"75%": [
|
||
|
|
[2, 94.5],
|
||
|
|
[3, 102.1],
|
||
|
|
[4, 110.8],
|
||
|
|
[5, 117.9],
|
||
|
|
[6, 124.0],
|
||
|
|
[7, 129.3],
|
||
|
|
[8, 134.6],
|
||
|
|
[9, 141.4],
|
||
|
|
[10, 147.0],
|
||
|
|
[11, 156.1],
|
||
|
|
[12, 160.3],
|
||
|
|
[13, 168.3],
|
||
|
|
[14, 174.7],
|
||
|
|
[15, 178.0],
|
||
|
|
[16, 180.2],
|
||
|
|
[17, 181.7],
|
||
|
|
[18, 181.3],
|
||
|
|
[19, 182.5]
|
||
|
|
],
|
||
|
|
"85%": [
|
||
|
|
[2, 96.2],
|
||
|
|
[3, 103.8],
|
||
|
|
[4, 111.8],
|
||
|
|
[5, 119.6],
|
||
|
|
[6, 125.6],
|
||
|
|
[7, 131.5],
|
||
|
|
[8, 138.0],
|
||
|
|
[9, 143.3],
|
||
|
|
[10, 149.3],
|
||
|
|
[11, 159.8],
|
||
|
|
[12, 162.5],
|
||
|
|
[13, 171.3],
|
||
|
|
[14, 177.5],
|
||
|
|
[15, 180.2],
|
||
|
|
[16, 183.8],
|
||
|
|
[17, 183.4],
|
||
|
|
[18, 183.5],
|
||
|
|
[19, 185.5]
|
||
|
|
],
|
||
|
|
"50%": [
|
||
|
|
[2, 91.9],
|
||
|
|
[3, 98.2],
|
||
|
|
[4, 106.8],
|
||
|
|
[5, 114.6],
|
||
|
|
[6, 120.8],
|
||
|
|
[7, 125.2],
|
||
|
|
[8, 130.3],
|
||
|
|
[9, 137.1],
|
||
|
|
[10, 141.5],
|
||
|
|
[11, 149.4],
|
||
|
|
[12, 153.9],
|
||
|
|
[13, 162.2],
|
||
|
|
[14, 169.0],
|
||
|
|
[15, 174.8],
|
||
|
|
[16, 176.0],
|
||
|
|
[17, 176.8],
|
||
|
|
[18, 176.4],
|
||
|
|
[19, 177.4]
|
||
|
|
]
|
||
|
|
};
|
||
|
|
var females = {
|
||
|
|
"15%": [
|
||
|
|
[2, 84.8],
|
||
|
|
[3, 93.7],
|
||
|
|
[4, 100.6],
|
||
|
|
[5, 105.8],
|
||
|
|
[6, 113.3],
|
||
|
|
[7, 119.3],
|
||
|
|
[8, 124.3],
|
||
|
|
[9, 131.4],
|
||
|
|
[10, 136.9],
|
||
|
|
[11, 143.8],
|
||
|
|
[12, 149.4],
|
||
|
|
[13, 151.2],
|
||
|
|
[14, 152.3],
|
||
|
|
[15, 155.9],
|
||
|
|
[16, 154.7],
|
||
|
|
[17, 157.0],
|
||
|
|
[18, 156.1],
|
||
|
|
[19, 155.4]
|
||
|
|
],
|
||
|
|
"90%": [
|
||
|
|
[2, 95.6],
|
||
|
|
[3, 104.1],
|
||
|
|
[4, 111.9],
|
||
|
|
[5, 119.6],
|
||
|
|
[6, 127.6],
|
||
|
|
[7, 133.1],
|
||
|
|
[8, 138.7],
|
||
|
|
[9, 147.1],
|
||
|
|
[10, 152.8],
|
||
|
|
[11, 161.3],
|
||
|
|
[12, 166.6],
|
||
|
|
[13, 167.9],
|
||
|
|
[14, 169.3],
|
||
|
|
[15, 170.1],
|
||
|
|
[16, 172.4],
|
||
|
|
[17, 169.2],
|
||
|
|
[18, 171.1],
|
||
|
|
[19, 172.4]
|
||
|
|
],
|
||
|
|
"25%": [
|
||
|
|
[2, 87.2],
|
||
|
|
[3, 95.9],
|
||
|
|
[4, 101.9],
|
||
|
|
[5, 107.4],
|
||
|
|
[6, 114.8],
|
||
|
|
[7, 121.4],
|
||
|
|
[8, 126.8],
|
||
|
|
[9, 133.4],
|
||
|
|
[10, 138.6],
|
||
|
|
[11, 146.2],
|
||
|
|
[12, 152.0],
|
||
|
|
[13, 153.8],
|
||
|
|
[14, 155.7],
|
||
|
|
[15, 158.4],
|
||
|
|
[16, 157.0],
|
||
|
|
[17, 158.5],
|
||
|
|
[18, 158.4],
|
||
|
|
[19, 158.1]
|
||
|
|
],
|
||
|
|
"10%": [
|
||
|
|
[2, 84.0],
|
||
|
|
[3, 91.9],
|
||
|
|
[4, 99.2],
|
||
|
|
[5, 105.2],
|
||
|
|
[6, 112.7],
|
||
|
|
[7, 118.0],
|
||
|
|
[8, 123.3],
|
||
|
|
[9, 130.2],
|
||
|
|
[10, 135.0],
|
||
|
|
[11, 141.1],
|
||
|
|
[12, 148.3],
|
||
|
|
[13, 150.0],
|
||
|
|
[14, 150.7],
|
||
|
|
[15, 154.3],
|
||
|
|
[16, 153.6],
|
||
|
|
[17, 155.6],
|
||
|
|
[18, 154.7],
|
||
|
|
[19, 153.1]
|
||
|
|
],
|
||
|
|
"mean": [
|
||
|
|
[2, 90.2],
|
||
|
|
[3, 98.3],
|
||
|
|
[4, 105.2],
|
||
|
|
[5, 112.2],
|
||
|
|
[6, 119.0],
|
||
|
|
[7, 125.8],
|
||
|
|
[8, 131.3],
|
||
|
|
[9, 138.6],
|
||
|
|
[10, 144.2],
|
||
|
|
[11, 151.3],
|
||
|
|
[12, 156.7],
|
||
|
|
[13, 158.6],
|
||
|
|
[14, 160.5],
|
||
|
|
[15, 162.1],
|
||
|
|
[16, 162.9],
|
||
|
|
[17, 162.2],
|
||
|
|
[18, 163.0],
|
||
|
|
[19, 163.1]
|
||
|
|
],
|
||
|
|
"75%": [
|
||
|
|
[2, 93.2],
|
||
|
|
[3, 101.5],
|
||
|
|
[4, 107.9],
|
||
|
|
[5, 116.6],
|
||
|
|
[6, 122.8],
|
||
|
|
[7, 129.3],
|
||
|
|
[8, 135.2],
|
||
|
|
[9, 143.7],
|
||
|
|
[10, 148.7],
|
||
|
|
[11, 156.9],
|
||
|
|
[12, 160.8],
|
||
|
|
[13, 163.0],
|
||
|
|
[14, 165.0],
|
||
|
|
[15, 165.8],
|
||
|
|
[16, 168.7],
|
||
|
|
[17, 166.2],
|
||
|
|
[18, 167.6],
|
||
|
|
[19, 168.0]
|
||
|
|
],
|
||
|
|
"85%": [
|
||
|
|
[2, 94.5],
|
||
|
|
[3, 102.8],
|
||
|
|
[4, 110.4],
|
||
|
|
[5, 119.0],
|
||
|
|
[6, 125.7],
|
||
|
|
[7, 131.5],
|
||
|
|
[8, 137.9],
|
||
|
|
[9, 146.0],
|
||
|
|
[10, 151.3],
|
||
|
|
[11, 159.9],
|
||
|
|
[12, 164.0],
|
||
|
|
[13, 166.5],
|
||
|
|
[14, 167.5],
|
||
|
|
[15, 168.5],
|
||
|
|
[16, 171.5],
|
||
|
|
[17, 168.0],
|
||
|
|
[18, 169.8],
|
||
|
|
[19, 170.3]
|
||
|
|
],
|
||
|
|
"50%": [
|
||
|
|
[2, 90.2],
|
||
|
|
[3, 98.1],
|
||
|
|
[4, 105.2],
|
||
|
|
[5, 111.7],
|
||
|
|
[6, 118.2],
|
||
|
|
[7, 125.6],
|
||
|
|
[8, 130.5],
|
||
|
|
[9, 138.3],
|
||
|
|
[10, 143.7],
|
||
|
|
[11, 151.4],
|
||
|
|
[12, 156.7],
|
||
|
|
[13, 157.7],
|
||
|
|
[14, 161.0],
|
||
|
|
[15, 162.0],
|
||
|
|
[16, 162.8],
|
||
|
|
[17, 162.2],
|
||
|
|
[18, 162.8],
|
||
|
|
[19, 163.3]
|
||
|
|
]
|
||
|
|
};
|
||
|
|
var dataset = [{
|
||
|
|
label: "Female mean",
|
||
|
|
data: females["mean"],
|
||
|
|
lines: {
|
||
|
|
show: true
|
||
|
|
},
|
||
|
|
color: "rgb(255,50,50)"
|
||
|
|
}, {
|
||
|
|
id: "f15%",
|
||
|
|
data: females["1%"],
|
||
|
|
lines: {
|
||
|
|
show: true,
|
||
|
|
lineWidth: 0,
|
||
|
|
fill: false
|
||
|
|
},
|
||
|
|
color: "rgb(255,50,50)"
|
||
|
|
}, {
|
||
|
|
id: "f25%",
|
||
|
|
data: females["3%"],
|
||
|
|
lines: {
|
||
|
|
show: true,
|
||
|
|
lineWidth: 0,
|
||
|
|
fill: 0.2
|
||
|
|
},
|
||
|
|
color: "rgb(255,50,50)",
|
||
|
|
fillBetween: "f15%"
|
||
|
|
}, {
|
||
|
|
id: "f50%",
|
||
|
|
data: females["6%"],
|
||
|
|
lines: {
|
||
|
|
show: true,
|
||
|
|
lineWidth: 0.5,
|
||
|
|
fill: 0.4,
|
||
|
|
shadowSize: 0
|
||
|
|
},
|
||
|
|
color: "rgb(255,50,50)",
|
||
|
|
fillBetween: "f25%"
|
||
|
|
}, {
|
||
|
|
id: "f75%",
|
||
|
|
data: females["8%"],
|
||
|
|
lines: {
|
||
|
|
show: true,
|
||
|
|
lineWidth: 0,
|
||
|
|
fill: 0.4
|
||
|
|
},
|
||
|
|
color: "rgb(255,50,50)",
|
||
|
|
fillBetween: "f50%"
|
||
|
|
}, {
|
||
|
|
id: "f85%",
|
||
|
|
data: females["12%"],
|
||
|
|
lines: {
|
||
|
|
show: true,
|
||
|
|
lineWidth: 0,
|
||
|
|
fill: 0.2
|
||
|
|
},
|
||
|
|
color: "rgb(255,50,50)",
|
||
|
|
fillBetween: "f75%"
|
||
|
|
}, {
|
||
|
|
label: "Male mean",
|
||
|
|
data: males["mean"],
|
||
|
|
lines: {
|
||
|
|
show: true
|
||
|
|
},
|
||
|
|
color: "#01C0C8producxt"
|
||
|
|
}, {
|
||
|
|
id: "m15%",
|
||
|
|
data: males["10%"],
|
||
|
|
lines: {
|
||
|
|
show: true,
|
||
|
|
lineWidth: 0,
|
||
|
|
fill: false
|
||
|
|
},
|
||
|
|
color: "#99E6E9"
|
||
|
|
}, {
|
||
|
|
id: "m25%",
|
||
|
|
data: males["12%"],
|
||
|
|
lines: {
|
||
|
|
show: true,
|
||
|
|
lineWidth: 0,
|
||
|
|
fill: 0.2
|
||
|
|
},
|
||
|
|
color: "#99E6E9",
|
||
|
|
fillBetween: "m15%"
|
||
|
|
}, {
|
||
|
|
id: "m50%",
|
||
|
|
data: males["20%"],
|
||
|
|
lines: {
|
||
|
|
show: true,
|
||
|
|
lineWidth: 0.5,
|
||
|
|
fill: 0.4,
|
||
|
|
shadowSize: 0
|
||
|
|
},
|
||
|
|
color: "rgb(50,50,255)",
|
||
|
|
fillBetween: "m25%"
|
||
|
|
}, {
|
||
|
|
id: "m75%",
|
||
|
|
data: males["22%"],
|
||
|
|
lines: {
|
||
|
|
show: true,
|
||
|
|
lineWidth: 0,
|
||
|
|
fill: 0.4
|
||
|
|
},
|
||
|
|
color: "#99E6E9",
|
||
|
|
fillBetween: "m50%"
|
||
|
|
}, {
|
||
|
|
id: "m85%",
|
||
|
|
data: males["25%"],
|
||
|
|
lines: {
|
||
|
|
show: true,
|
||
|
|
lineWidth: 0,
|
||
|
|
fill: 0.2
|
||
|
|
},
|
||
|
|
color: "#99E6E9",
|
||
|
|
fillBetween: "m75%"
|
||
|
|
}];
|
||
|
|
$.plot($("#percentiles"), dataset, {
|
||
|
|
xaxis: {
|
||
|
|
tickDecimals: 0
|
||
|
|
},
|
||
|
|
yaxis: {
|
||
|
|
tickFormatter: function(v) {
|
||
|
|
return v + " cm";
|
||
|
|
}
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
position: "se"
|
||
|
|
}
|
||
|
|
});
|
||
|
|
// Add the Flot version string to the footer
|
||
|
|
$("#footer").prepend("Flot " + $.plot.version + " – ");
|
||
|
|
});
|
||
|
|
});
|