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
"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 + " – "); |
|
}); |
|
}); |