This commit is contained in:
2026-04-07 14:50:23 +09:00
commit b4e485502b
4778 changed files with 2017091 additions and 0 deletions

View File

@@ -0,0 +1,224 @@
"use strict";
$(document).ready(function() {
/*Stacked Area Chart*/
setTimeout(function(){
var chart = c3.generate({
bindto: '#chart',
data: {
columns: [
['data1', 300, 350, 500, -10, 0, 320],
['data2', 130, 100, 180, 200, 150, 50]
],
types: {
data1: 'area-spline',
data2: 'area-spline'
// 'line', 'spline', 'step', 'area', 'area-step' are also available to stack
},
colors: {
data1: 'rgba(17, 193, 91, 0.92)',
data2: 'rgba(68, 138, 255, 0.93)'
},
groups: [
['data1', 'data2']
]
}
});
/*chart_bar_stacked*/
var chart = c3.generate({
bindto: '#chart1',
data: {
columns: [
['data1', -30, 200, 200, 400, -150, 250],
['data2', 130, 100, -100, 200, -150, 50],
['data3', -230, 200, 300, -300, 250, 250]
],
type: 'bar',
groups: [
['data1', 'data2']
],
},
color: {
pattern: ['#11c15b', '#536dfe', '#ff5252']
},
grid: {
y: {
lines: [{ value: 0 }]
}
}
});
},350);
setTimeout(function() {
chart.groups([
['data1', 'data2', 'data3']
])
}, 1000);
setTimeout(function() {
chart.groups([
['data1', 'data2', 'data3', 'data4']
])
}, 2000);
/*donut chart*/
setTimeout(function() {
var chart = c3.generate({
bindto: '#chart2',
data: {
columns: [
['data1', 30],
['data2', 120],
],
type: 'donut',
onclick: function(d, i) { console.log("onclick", d, i); },
onmouseover: function(d, i) { console.log("onmouseover", d, i); },
onmouseout: function(d, i) { console.log("onmouseout", d, i); }
},
color: {
pattern: ['#11c15b', '#536dfe']
},
donut: {
title: "Iris Petal Width"
}
});
},350);
setTimeout(function() {
chart.unload({
ids: 'data1'
});
chart.unload({
ids: 'data2'
});
}, 2500);
/*Pie Chart*/
var chart = c3.generate({
bindto: '#chart3',
data: {
// iris data from R
columns: [
['data1', 30],
['data2', 120],
],
type : 'pie',
onclick: function (d, i) { console.log("onclick", d, i); },
onmouseover: function (d, i) { console.log("onmouseover", d, i); },
onmouseout: function (d, i) { console.log("onmouseout", d, i); }
},
color: {
pattern: ['#536dfe', '#11c15b', '#448aff', '#ff5252']
},
});
setTimeout(function () {
chart.load({
columns: [
["setosa", 0.2, 0.2, 0.2, 0.2, 0.2, 0.4, 0.3, 0.2, 0.2, 0.1, 0.2, 0.2, 0.1, 0.1, 0.2, 0.4, 0.4, 0.3, 0.3, 0.3, 0.2, 0.4, 0.2, 0.5, 0.2, 0.2, 0.4, 0.2, 0.2, 0.2, 0.2, 0.4, 0.1, 0.2, 0.2, 0.2, 0.2, 0.1, 0.2, 0.2, 0.3, 0.3, 0.2, 0.6, 0.4, 0.3, 0.2, 0.2, 0.2, 0.2],
["versicolor", 1.4, 1.5, 1.5, 1.3, 1.5, 1.3, 1.6, 1.0, 1.3, 1.4, 1.0, 1.5, 1.0, 1.4, 1.3, 1.4, 1.5, 1.0, 1.5, 1.1, 1.8, 1.3, 1.5, 1.2, 1.3, 1.4, 1.4, 1.7, 1.5, 1.0, 1.1, 1.0, 1.2, 1.6, 1.5, 1.6, 1.5, 1.3, 1.3, 1.3, 1.2, 1.4, 1.2, 1.0, 1.3, 1.2, 1.3, 1.3, 1.1, 1.3],
["virginica", 2.5, 1.9, 2.1, 1.8, 2.2, 2.1, 1.7, 1.8, 1.8, 2.5, 2.0, 1.9, 2.1, 2.0, 2.4, 2.3, 1.8, 2.2, 2.3, 1.5, 2.3, 2.0, 2.0, 1.8, 2.1, 1.8, 1.8, 1.8, 2.1, 1.6, 1.9, 2.0, 2.2, 1.5, 1.4, 2.3, 2.4, 1.8, 1.8, 2.1, 2.4, 2.3, 1.9, 2.3, 2.5, 2.3, 1.9, 2.0, 2.3, 1.8],
]
});
}, 1500);
setTimeout(function () {
chart.unload({
ids: 'data1'
});
chart.unload({
ids: 'data2'
});
}, 2500);
/*Combination Chart*/
setTimeout(function() {
var chart = c3.generate({
bindto: '#chart4',
data: {
columns: [
['data1', 30, 20, 50, 40, 60, 50],
['data2', 200, 130, 90, 240, 130, 220],
['data3', 300, 200, 160, 400, 250, 250],
['data4', 200, 130, 90, 240, 130, 220],
['data5', 130, 120, 150, 140, 160, 150],
['data6', 90, 70, 20, 50, 60, 120],
],
type: 'bar',
colors: {
data1: '#536dfe',
data2: '#11c15b',
data3: '#448aff',
data4: '#ff5252',
data5: '#FE8A7D',
data6: '#69CEC6'
},
types: {
data3: 'spline',
data4: 'line',
data6: 'area',
},
groups: [
['data1', 'data2']
]
}
});
/*Step Chart*/
var chart = c3.generate({
bindto: '#chart5',
data: {
columns: [
['data1', 300, 350, 300, 0, 0, 100],
['data2', 130, 100, 140, 200, 150, 50]
],
types: {
data1: 'step',
data2: 'area-step'
},
colors: {
data1: 'rgb(255, 82, 82)',
data2: 'rgba(68, 138, 255, 0.61)'
}
}
});
/*Scatter Plot Chart Chart*/
var chart = c3.generate({
bindto: '#chart6',
size: { height: 400 },
color: { pattern: ["#536dfe", "#11c15b"] },
data: {
xs: {
setosa: 'setosa_x',
versicolor: 'versicolor_x',
},
// iris data from R
columns: [
["setosa_x", 3.5, 3.0, 3.2, 3.1, 3.6, 3.9, 3.4, 3.4, 2.9, 3.1, 3.7, 3.4, 3.0, 3.0, 4.0, 4.4, 3.9, 3.5, 3.8, 3.8, 3.4, 3.7, 3.6, 3.3, 3.4, 3.0, 3.4, 3.5, 3.4, 3.2, 3.1, 3.4, 4.1, 4.2, 3.1, 3.2, 3.5, 3.6, 3.0, 3.4, 3.5, 2.3, 3.2, 3.5, 3.8, 3.0, 3.8, 3.2, 3.7, 3.3],
["versicolor_x", 3.2, 3.2, 3.1, 2.3, 2.8, 2.8, 3.3, 2.4, 2.9, 2.7, 2.0, 3.0, 2.2, 2.9, 2.9, 3.1, 3.0, 2.7, 2.2, 2.5, 3.2, 2.8, 2.5, 2.8, 2.9, 3.0, 2.8, 3.0, 2.9, 2.6, 2.4, 2.4, 2.7, 2.7, 3.0, 3.4, 3.1, 2.3, 3.0, 2.5, 2.6, 3.0, 2.6, 2.3, 2.7, 3.0, 2.9, 2.9, 2.5, 2.8],
["setosa", 0.2, 0.2, 0.2, 0.2, 0.2, 0.4, 0.3, 0.2, 0.2, 0.1, 0.2, 0.2, 0.1, 0.1, 0.2, 0.4, 0.4, 0.3, 0.3, 0.3, 0.2, 0.4, 0.2, 0.5, 0.2, 0.2, 0.4, 0.2, 0.2, 0.2, 0.2, 0.4, 0.1, 0.2, 0.2, 0.2, 0.2, 0.1, 0.2, 0.2, 0.3, 0.3, 0.2, 0.6, 0.4, 0.3, 0.2, 0.2, 0.2, 0.2],
["versicolor", 1.4, 1.5, 1.5, 1.3, 1.5, 1.3, 1.6, 1.0, 1.3, 1.4, 1.0, 1.5, 1.0, 1.4, 1.3, 1.4, 1.5, 1.0, 1.5, 1.1, 1.8, 1.3, 1.5, 1.2, 1.3, 1.4, 1.4, 1.7, 1.5, 1.0, 1.1, 1.0, 1.2, 1.6, 1.5, 1.6, 1.5, 1.3, 1.3, 1.3, 1.2, 1.4, 1.2, 1.0, 1.3, 1.2, 1.3, 1.3, 1.1, 1.3],
],
type: 'scatter'
},
axis: {
x: {
label: 'Sepal.Width',
tick: {
fit: false
}
},
y: {
label: 'Petal.Width'
}
}
});
},350);
/*Scatter Plot Chart Ends*/
});

View File

@@ -0,0 +1,293 @@
"use strict";
$(document).ready(function(){
/*Doughnut chart*/
var ctx = document.getElementById("myChart");
var data = {
labels: [
"A", "B", "C", "D "
],
datasets: [{
data: [40, 10, 40, 10],
backgroundColor: [
"#1ABC9C",
"#FCC9BA",
"#B8EDF0",
"#B4C1D7"
],
borderWidth: [
"0px",
"0px",
"0px",
"0px"
],
borderColor: [
"#1ABC9C",
"#FCC9BA",
"#B8EDF0",
"#B4C1D7"
]
}]
};
var myDoughnutChart = new Chart(ctx, {
type: 'doughnut',
data: data
});
/*Bar chart*/
var data1 = {
labels: [0, 1, 2, 3, 4, 5, 6, 7],
datasets: [{
label: "My First dataset",
backgroundColor: [
'rgba(95, 190, 170, 0.99)',
'rgba(95, 190, 170, 0.99)',
'rgba(95, 190, 170, 0.99)',
'rgba(95, 190, 170, 0.99)',
'rgba(95, 190, 170, 0.99)',
'rgba(95, 190, 170, 0.99)',
'rgba(95, 190, 170, 0.99)'
],
hoverBackgroundColor: [
'rgba(26, 188, 156, 0.88)',
'rgba(26, 188, 156, 0.88)',
'rgba(26, 188, 156, 0.88)',
'rgba(26, 188, 156, 0.88)',
'rgba(26, 188, 156, 0.88)',
'rgba(26, 188, 156, 0.88)',
'rgba(26, 188, 156, 0.88)'
],
data: [65, 59, 80, 81, 56, 55, 50],
}, {
label: "My second dataset",
backgroundColor: [
'rgba(93, 156, 236, 0.93)',
'rgba(93, 156, 236, 0.93)',
'rgba(93, 156, 236, 0.93)',
'rgba(93, 156, 236, 0.93)',
'rgba(93, 156, 236, 0.93)',
'rgba(93, 156, 236, 0.93)',
'rgba(93, 156, 236, 0.93)'
],
hoverBackgroundColor: [
'rgba(103, 162, 237, 0.82)',
'rgba(103, 162, 237, 0.82)',
'rgba(103, 162, 237, 0.82)',
'rgba(103, 162, 237, 0.82)',
'rgba(103, 162, 237, 0.82)',
'rgba(103, 162, 237, 0.82)',
'rgba(103, 162, 237, 0.82)'
],
data: [60, 69, 85, 91, 58, 50, 45],
}]
};
var bar = document.getElementById("barChart").getContext('2d');
var myBarChart = new Chart(bar, {
type: 'bar',
data: data1,
options: {
barValueSpacing: 20
}
});
/*Radar chart*/
var radarElem = document.getElementById("radarChart");
var data2 = {
labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
datasets: [{
label: "My First dataset",
backgroundColor: "rgba(100, 221, 187, 0.52)",
borderColor: "rgba(72, 206, 168, 0.88)",
pointBackgroundColor: "rgba(51, 175, 140, 0.88)",
pointBorderColor: "rgba(44, 130, 105, 0.88)",
pointHoverBackgroundColor: "rgba(44, 130, 105, 0.88)",
pointHoverBorderColor: "rgba(107, 226, 193, 0.98)",
data: [65, 59, 90, 81, 56, 55, 40]
}, {
label: "My Second dataset",
backgroundColor: "rgba(255, 204, 189, 0.95)",
borderColor: "rgba(255, 165, 138, 0.95)",
pointBackgroundColor: "rgba(255, 116, 22, 0.94)",
pointBorderColor: "rgba(251, 142, 109, 0.95)",
pointHoverBackgroundColor: "rgba(251, 142, 109, 0.95)",
pointHoverBorderColor: "rgba(255, 165, 138, 0.95)",
data: [28, 48, 40, 19, 96, 27, 100]
}]
};
var myRadarChart = new Chart(radarElem, {
type: 'radar',
data: data2,
options: {
scale: {
reverse: true,
ticks: {
beginAtZero: true
}
}
}
});
/*Polar chart*/
var polarElem = document.getElementById("polarChart");
var data3 = {
datasets: [{
data: [
11,
16,
7,
3,
14
],
backgroundColor: [
"#7E81CB",
"#1ABC9C",
"#B8EDF0",
"#B4C1D7",
"#01C0C8"
],
hoverBackgroundColor: [
"#a1a4ec",
"#2adab7",
"#a7e7ea",
"#a5b0c3",
"#10e6ef"
],
label: 'My dataset' // for legend
}],
labels: [
"Blue",
"Green",
"Light Blue",
"grey",
"Sea Green"
]
};
new Chart(polarElem, {
data: data3,
type: 'polarArea',
options: {
elements: {
arc: {
borderColor: ""
}
}
}
});
/*Pie chart*/
var pieElem = document.getElementById("pieChart");
var data4 = {
labels: [
"Blue",
"Orange",
"Sea Green"
],
datasets: [{
data: [30, 30, 40],
backgroundColor: [
"#25A6F7",
"#FB9A7D",
"#01C0C8"
],
hoverBackgroundColor: [
"#6cc4fb",
"#ffb59f",
"#0dedf7"
]
}]
};
var myPieChart = new Chart(pieElem, {
type: 'pie',
data: data4
});
//bubble chart
var bubblechart = document.getElementById("bubblechart");
var data = {
datasets: [{
label: 'First Dataset',
data: [{
x: 20,
y: 15,
r: 15
}, {
x: 10,
y: 15,
r: 10
}, {
x: 25,
y: 11,
r: 8
}, {
x: 15,
y: 13,
r: 8
}, {
x: 35,
y: 18,
r: 6
}, {
x: 40,
y: 10,
r: 10
}],
backgroundColor: "#ff5252",
hoverBackgroundColor: "ff5252"
}]
};
var myBubbleChart = new Chart(bubblechart, {
type: 'bubble',
data: data,
options: {
elements: {
points: {
borderWidth: 1,
borderColor: 'rgb(0, 0, 0)'
}
}
}
});
//Scales chart
var stancechart = document.getElementById("stancechart");
var chartInstance = new Chart(stancechart, {
type: 'line',
data: data,
options: {
scales: {
xAxes: [{
type: 'logarithmic',
position: 'bottom',
ticks: {
min: 1,
max: 1000
}
}]
}
}
});
//Time Scale
var timescalechart = document.getElementById("timescalechart");
var chartInstance1 = new Chart(timescalechart, {
type: 'line',
data: data,
options: {
scales: {
yAxes: [{
time: {
unit: 'day'
}
}]
}
}
})
});

View File

@@ -0,0 +1,352 @@
"use strict";
$(document).ready(function(){
/*BI-POLAR LINE CHART WITH AREA ONLY*/
new Chartist.Line('.ct-chart', {
labels: [1, 2, 3, 4, 5, 6, 7, 8],
series: [
[1, 2, 3, 1, -2, 0, 1, 0],
[-2, -1, -2, -1, -2.5, -1, -2, -1],
[0, 0, 0, 1, 2, 2.5, 2, 1],
[2.5, 2, 1, 0.5, 1, 0.5, -1, -2.5]
]
}, {
high: 3,
low: -3,
showArea: true,
showLine: false,
showPoint: false,
fullWidth: true,
axisX: {
showLabel: true,
showGrid: false
}
});
/*Threshold plugin for Chartist start*/
new Chartist.Line('.ct-chart1', {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
series: [
[5, -4, 3, 7, 20, 10]
]
}, {
showArea: false,
axisY: {
onlyInteger: true
},
plugins: [
Chartist.plugins.ctThreshold({
threshold: 4
})
]
});
var defaultOptions = {
threshold: 0,
classNames: {
aboveThreshold: 'ct-threshold-above',
belowThreshold: 'ct-threshold-below'
},
maskNames: {
aboveThreshold: 'ct-threshold-mask-above',
belowThreshold: 'ct-threshold-mask-below'
}
};
/*ADVANCED SMIL ANIMATIONS*/
var chart = new Chartist.Line('.ct-chart2', {
labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
series: [
[12, 9, 7, 8, 5, 4, 6, 2, 3, 3, 4, 6],
[4, 5, 3, 7, 3, 5, 5, 3, 4, 4, 5, 5],
[5, 3, 4, 5, 6, 3, 3, 4, 5, 6, 3, 4],
[3, 4, 5, 6, 7, 6, 4, 5, 6, 7, 6, 3]
]
}, {
low: 0
});
// Let's put a sequence number aside so we can use it in the event callbacks
var seq = 0,
delays = 80,
durations = 500;
// Once the chart is fully created we reset the sequence
chart.on('created', function() {
seq = 0;
});
// On each drawn element by Chartist we use the Chartist.Svg API to trigger SMIL animations
chart.on('draw', function(data) {
seq++;
if(data.type === 'line') {
// If the drawn element is a line we do a simple opacity fade in. This could also be achieved using CSS3 animations.
data.element.animate({
opacity: {
// The delay when we like to start the animation
begin: seq * delays + 1000,
// Duration of the animation
dur: durations,
// The value where the animation should start
from: 0,
// The value where it should end
to: 1
}
});
} else if(data.type === 'label' && data.axis === 'x') {
data.element.animate({
y: {
begin: seq * delays,
dur: durations,
from: data.y + 100,
to: data.y,
// We can specify an easing function from Chartist.Svg.Easing
easing: 'easeOutQuart'
}
});
} else if(data.type === 'label' && data.axis === 'y') {
data.element.animate({
x: {
begin: seq * delays,
dur: durations,
from: data.x - 100,
to: data.x,
easing: 'easeOutQuart'
}
});
} else if(data.type === 'point') {
data.element.animate({
x1: {
begin: seq * delays,
dur: durations,
from: data.x - 10,
to: data.x,
easing: 'easeOutQuart'
},
x2: {
begin: seq * delays,
dur: durations,
from: data.x - 10,
to: data.x,
easing: 'easeOutQuart'
},
opacity: {
begin: seq * delays,
dur: durations,
from: 0,
to: 1,
easing: 'easeOutQuart'
}
});
} else if(data.type === 'grid') {
// Using data.axis we get x or y which we can use to construct our animation definition objects
var pos1Animation = {
begin: seq * delays,
dur: durations,
from: data[data.axis.units.pos + '1'] - 30,
to: data[data.axis.units.pos + '1'],
easing: 'easeOutQuart'
};
var pos2Animation = {
begin: seq * delays,
dur: durations,
from: data[data.axis.units.pos + '2'] - 100,
to: data[data.axis.units.pos + '2'],
easing: 'easeOutQuart'
};
var animations = {};
animations[data.axis.units.pos + '1'] = pos1Animation;
animations[data.axis.units.pos + '2'] = pos2Animation;
animations['opacity'] = {
begin: seq * delays,
dur: durations,
from: 0,
to: 1,
easing: 'easeOutQuart'
};
data.element.animate(animations);
}
});
// For the sake of the example we update the chart every time it's created with a delay of 10 seconds
chart.on('created', function() {
if(window.__exampleAnimateTimeout) {
clearTimeout(window.__exampleAnimateTimeout);
window.__exampleAnimateTimeout = null;
}
window.__exampleAnimateTimeout = setTimeout(chart.update.bind(chart), 12000);
});
/*GAUGE CHART*/
new Chartist.Pie('.ct-chart3', {
series: [20, 10, 30, 40]
},
{
donut: true,
donutWidth: 60,
startAngle: 270,
total: 200,
showLabel: false
});
//HORIZONTAL BAR CHART
new Chartist.Bar('.ct-chart-horizontal', {
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
series: [
[5, 4, 3, 7, 5, 10, 3],
[3, 2, 9, 5, 4, 6, 4]
]
}, {
seriesBarDistance: 10,
reverseData: true,
horizontalBars: true,
axisY: {
offset: 70
}
});
// ANIMATING A DONUT WITH SVG.ANIMATE Start
var chart = new Chartist.Pie('.ct-chart-animating', {
series: [10, 20, 50, 20, 5, 50, 15],
labels: [1, 2, 3, 4, 5, 6, 7]
}, {
donut: true,
showLabel: false
});
chart.on('draw', function(data) {
if(data.type === 'slice') {
// Get the total path length in order to use for dash array animation
var pathLength = data.element._node.getTotalLength();
// Set a dasharray that matches the path length as prerequisite to animate dashoffset
data.element.attr({
'stroke-dasharray': pathLength + 'px ' + pathLength + 'px'
});
// Create animation definition while also assigning an ID to the animation for later sync usage
var animationDefinition = {
'stroke-dashoffset': {
id: 'anim' + data.index,
dur: 800,
from: -pathLength + 'px',
to: '0px',
easing: Chartist.Svg.Easing.easeOutQuint,
// We need to use `fill: 'freeze'` otherwise our animation will fall back to initial (not visible)
fill: 'freeze'
}
};
// If this was not the first slice, we need to time the animation so that it uses the end sync event of the previous animation
if(data.index !== 0) {
animationDefinition['stroke-dashoffset'].begin = 'anim' + (data.index - 1) + '.end';
}
// We need to set an initial value before the animation starts as we are not in guided mode which would do that for us
data.element.attr({
'stroke-dashoffset': -pathLength + 'px'
});
// We can't use guided mode as the animations need to rely on setting begin manually
// See http://gionkunz.github.io/chartist-js/api-documentation.html#chartistsvg-function-animate
data.element.animate(animationDefinition, false);
}
});
// For the sake of the example we update the chart every time it's created with a delay of 8 seconds
chart.on('created', function() {
if(window.__anim21278907124) {
clearTimeout(window.__anim21278907124);
window.__anim21278907124 = null;
}
window.__anim21278907124 = setTimeout(chart.update.bind(chart), 10000);
});
//ADD PEAK CIRCLES USING THE DRAW
// Create a simple bi-polar bar chart
var chart = new Chartist.Bar('.ct-chart-add-pack', {
labels: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10'],
series: [
[1, 2, 4, 8, 6, -2, -1, -4, -6, -2]
]
}, {
high: 10,
low: -10,
axisX: {
labelInterpolationFnc: function(value, index) {
return index % 2 === 0 ? value : null;
}
}
});
// Listen for draw events on the bar chart
chart.on('draw', function(data) {
// If this draw event is of type bar we can use the data to create additional content
if(data.type === 'bar') {
// We use the group element of the current series to append a simple circle with the bar peek coordinates and a circle radius that is depending on the value
data.group.append(new Chartist.Svg('circle', {
cx: data.x2,
cy: data.y2,
r: Math.abs(Chartist.getMultiValue(data.value)) * 2 + 5
}, 'ct-slice-pie'));
}
});
//series overrids
var chart = new Chartist.Line('.ct-chart-overrides', {
labels: ['1', '2', '3', '4', '5', '6', '7', '8'],
// Naming the series with the series object array notation
series: [{
name: 'series-1',
data: [5, 2, -4, 2, 0, -2, 5, -3]
}, {
name: 'series-2',
data: [4, 3, 5, 3, 1, 3, 6, 4]
}, {
name: 'series-3',
data: [2, 4, 3, 1, 4, 5, 3, 2]
}]
}, {
fullWidth: true,
// Within the series options you can use the series names
// to specify configuration that will only be used for the
// specific series.
series: {
'series-1': {
lineSmooth: Chartist.Interpolation.step()
},
'series-2': {
lineSmooth: Chartist.Interpolation.simple(),
showArea: true
},
'series-3': {
showPoint: false
}
}
}, [
// You can even use responsive configuration overrides to
// customize your series configuration even further!
['screen and (max-width: 320px)', {
series: {
'series-1': {
lineSmooth: Chartist.Interpolation.none()
},
'series-2': {
lineSmooth: Chartist.Interpolation.none(),
showArea: false
},
'series-3': {
lineSmooth: Chartist.Interpolation.none(),
showPoint: true
}
}
}]
]);
});

View File

@@ -0,0 +1,128 @@
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define([], function () {
return (root.returnExportsGlobal = factory());
});
} else if (typeof exports === 'object') {
// Node. Does not work with strict CommonJS, but
// only CommonJS-like enviroments that support module.exports,
// like Node.
module.exports = factory();
} else {
root['Chartist.plugins.ctThreshold'] = factory();
}
}(this, function () {
/**
* Chartist.js plugin to display a data label on top of the points in a line chart.
*
*/
/* global Chartist */
(function (window, document, Chartist) {
'use strict';
var defaultOptions = {
threshold: 0,
classNames: {
aboveThreshold: 'ct-threshold-above',
belowThreshold: 'ct-threshold-below'
},
maskNames: {
aboveThreshold: 'ct-threshold-mask-above',
belowThreshold: 'ct-threshold-mask-below'
}
};
function createMasks(data, options) {
// Select the defs element within the chart or create a new one
var defs = data.svg.querySelector('defs') || data.svg.elem('defs');
// Project the threshold value on the chart Y axis
var projectedThreshold = data.chartRect.height() - data.axisY.projectValue(options.threshold) + data.chartRect.y2;
var width = data.svg.width();
var height = data.svg.height();
// Create mask for upper part above threshold
defs
.elem('mask', {
x: 0,
y: 0,
width: width,
height: height,
id: options.maskNames.aboveThreshold
})
.elem('rect', {
x: 0,
y: 0,
width: width,
height: projectedThreshold,
fill: 'white'
});
// Create mask for lower part below threshold
defs
.elem('mask', {
x: 0,
y: 0,
width: width,
height: height,
id: options.maskNames.belowThreshold
})
.elem('rect', {
x: 0,
y: projectedThreshold,
width: width,
height: height - projectedThreshold,
fill: 'white'
});
return defs;
}
Chartist.plugins = Chartist.plugins || {};
Chartist.plugins.ctThreshold = function (options) {
options = Chartist.extend({}, defaultOptions, options);
return function ctThreshold(chart) {
if (chart instanceof Chartist.Line || chart instanceof Chartist.Bar) {
chart.on('draw', function (data) {
if (data.type === 'point') {
// For points we can just use the data value and compare against the threshold in order to determine
// the appropriate class
data.element.addClass(
data.value.y >= options.threshold ? options.classNames.aboveThreshold : options.classNames.belowThreshold
);
} else if (data.type === 'line' || data.type === 'bar' || data.type === 'area') {
// Cloning the original line path, mask it with the upper mask rect above the threshold and add the
// class for above threshold
data.element
.parent()
.elem(data.element._node.cloneNode(true))
.attr({
mask: 'url(#' + options.maskNames.aboveThreshold + ')'
})
.addClass(options.classNames.aboveThreshold);
// Use the original line path, mask it with the lower mask rect below the threshold and add the class
// for blow threshold
data.element
.attr({
mask: 'url(#' + options.maskNames.belowThreshold + ')'
})
.addClass(options.classNames.belowThreshold);
}
});
// On the created event, create the two mask definitions used to mask the line graphs
chart.on('created', function (data) {
createMasks(data, options);
});
}
};
}
}(window, document, Chartist));
return Chartist.plugins.ctThreshold;
}));

View File

@@ -0,0 +1,25 @@
(function($){var options={series:{curvedLines:{active:false,apply:false,monotonicFit:false,tension:0.5,nrSplinePoints:20,legacyOverride:undefined}}};function init(plot){plot.hooks.processOptions.push(processOptions);function processOptions(plot,options){if(options.series.curvedLines.active){plot.hooks.processDatapoints.unshift(processDatapoints);}}
function processDatapoints(plot,series,datapoints){var nrPoints=datapoints.points.length/datapoints.pointsize;var EPSILON=0.005;var invalidLegacyOptions=hasInvalidParameters(series.curvedLines);if(!invalidLegacyOptions&&series.curvedLines.apply==true&&series.originSeries===undefined&&nrPoints>(1+EPSILON)){if(series.lines.fill){var pointsTop=calculateCurvePoints(datapoints,series.curvedLines,1);var pointsBottom=calculateCurvePoints(datapoints,series.curvedLines,2);datapoints.pointsize=3;datapoints.points=[];var j=0;var k=0;var i=0;var ps=2;while(i<pointsTop.length||j<pointsBottom.length){if(pointsTop[i]==pointsBottom[j]){datapoints.points[k]=pointsTop[i];datapoints.points[k+1]=pointsTop[i+1];datapoints.points[k+2]=pointsBottom[j+1];j+=ps;i+=ps;}else if(pointsTop[i]<pointsBottom[j]){datapoints.points[k]=pointsTop[i];datapoints.points[k+1]=pointsTop[i+1];datapoints.points[k+2]=k>0?datapoints.points[k-1]:null;i+=ps;}else{datapoints.points[k]=pointsBottom[j];datapoints.points[k+1]=k>1?datapoints.points[k-2]:null;datapoints.points[k+2]=pointsBottom[j+1];j+=ps;}
k+=3;}}else if(series.lines.lineWidth>0){datapoints.points=calculateCurvePoints(datapoints,series.curvedLines,1);datapoints.pointsize=2;}}}
function calculateCurvePoints(datapoints,curvedLinesOptions,yPos){if(typeof curvedLinesOptions.legacyOverride!='undefined'&&curvedLinesOptions.legacyOverride!=false){var defaultOptions={fit:false,curvePointFactor:20,fitPointDist:undefined};var legacyOptions=jQuery.extend(defaultOptions,curvedLinesOptions.legacyOverride);return calculateLegacyCurvePoints(datapoints,legacyOptions,yPos);}
return calculateSplineCurvePoints(datapoints,curvedLinesOptions,yPos);}
function calculateSplineCurvePoints(datapoints,curvedLinesOptions,yPos){var points=datapoints.points;var ps=datapoints.pointsize;var splines=createHermiteSplines(datapoints,curvedLinesOptions,yPos);var result=[];var j=0;for(var i=0;i<points.length-ps;i+=ps){var curX=i;var curY=i+yPos;var xStart=points[curX];var xEnd=points[curX+ps];var xStep=(xEnd-xStart)/Number(curvedLinesOptions.nrSplinePoints);result.push(points[curX]);result.push(points[curY]);for(var x=(xStart+=xStep);x<xEnd;x+=xStep){result.push(x);result.push(splines[j](x));}
j++;}
result.push(points[points.length-ps]);result.push(points[points.length-ps+yPos]);return result;}
function createHermiteSplines(datapoints,curvedLinesOptions,yPos){var points=datapoints.points;var ps=datapoints.pointsize;var segmentLengths=[];var segmentSlopes=[];for(var i=0;i<points.length-ps;i+=ps){var curX=i;var curY=i+yPos;var dx=points[curX+ps]-points[curX];var dy=points[curY+ps]-points[curY];segmentLengths.push(dx);segmentSlopes.push(dy/dx);}
var gradients=[segmentSlopes[0]];if(curvedLinesOptions.monotonicFit){for(var i=1;i<segmentLengths.length;i++){var slope=segmentSlopes[i];var prev_slope=segmentSlopes[i-1];if(slope*prev_slope<=0){gradients.push(0);}else{var length=segmentLengths[i];var prev_length=segmentLengths[i-1];var common=length+prev_length;gradients.push(3*common/((common+length)/prev_slope+(common+prev_length)/slope));}}}else{for(var i=ps;i<points.length-ps;i+=ps){var curX=i;var curY=i+yPos;gradients.push(Number(curvedLinesOptions.tension)*(points[curY+ps]-points[curY-ps])/(points[curX+ps]-points[curX-ps]));}}
gradients.push(segmentSlopes[segmentSlopes.length-1]);var coefs1=[];var coefs2=[];for(i=0;i<segmentLengths.length;i++){var m_k=gradients[i];var m_k_plus=gradients[i+1];var slope=segmentSlopes[i];var invLength=1/segmentLengths[i];var common=m_k+m_k_plus-slope-slope;coefs1.push(common*invLength*invLength);coefs2.push((slope-common-m_k)*invLength);}
var ret=[];for(var i=0;i<segmentLengths.length;i++){var spline=function(x_k,coef1,coef2,coef3,coef4){return function(x){var diff=x-x_k;var diffSq=diff*diff;return coef1*diff*diffSq+coef2*diffSq+coef3*diff+coef4;};};ret.push(spline(points[i*ps],coefs1[i],coefs2[i],gradients[i],points[i*ps+yPos]));}
return ret;};function calculateLegacyCurvePoints(datapoints,curvedLinesOptions,yPos){var points=datapoints.points;var ps=datapoints.pointsize;var num=Number(curvedLinesOptions.curvePointFactor)*(points.length/ps);var xdata=new Array;var ydata=new Array;var curX=-1;var curY=-1;var j=0;if(curvedLinesOptions.fit){var fpDist;if(typeof curvedLinesOptions.fitPointDist=='undefined'){var minX=points[0];var maxX=points[points.length-ps];fpDist=(maxX-minX)/(500*100);}else{fpDist=Number(curvedLinesOptions.fitPointDist);}
for(var i=0;i<points.length;i+=ps){var frontX;var backX;curX=i;curY=i+yPos;frontX=points[curX]-fpDist;backX=points[curX]+fpDist;var factor=2;while(frontX==points[curX]||backX==points[curX]){frontX=points[curX]-(fpDist*factor);backX=points[curX]+(fpDist*factor);factor++;}
xdata[j]=frontX;ydata[j]=points[curY];j++;xdata[j]=points[curX];ydata[j]=points[curY];j++;xdata[j]=backX;ydata[j]=points[curY];j++;}}else{for(var i=0;i<points.length;i+=ps){curX=i;curY=i+yPos;xdata[j]=points[curX];ydata[j]=points[curY];j++;}}
var n=xdata.length;var y2=new Array();var delta=new Array();y2[0]=0;y2[n-1]=0;delta[0]=0;for(var i=1;i<n-1;++i){var d=(xdata[i+1]-xdata[i-1]);if(d==0){return[];}
var s=(xdata[i]-xdata[i-1])/d;var p=s*y2[i-1]+2;y2[i]=(s-1)/p;delta[i]=(ydata[i+1]-ydata[i])/(xdata[i+1]-xdata[i])-(ydata[i]-ydata[i-1])/(xdata[i]-xdata[i-1]);delta[i]=(6*delta[i]/(xdata[i+1]-xdata[i-1])-s*delta[i-1])/p;}
for(var j=n-2;j>=0;--j){y2[j]=y2[j]*y2[j+1]+delta[j];}
var step=(xdata[n-1]-xdata[0])/(num-1);var xnew=new Array;var ynew=new Array;var result=new Array;xnew[0]=xdata[0];ynew[0]=ydata[0];result.push(xnew[0]);result.push(ynew[0]);for(j=1;j<num;++j){xnew[j]=xnew[0]+j*step;var max=n-1;var min=0;while(max-min>1){var k=Math.round((max+min)/2);if(xdata[k]>xnew[j]){max=k;}else{min=k;}}
var h=(xdata[max]-xdata[min]);if(h==0){return[];}
var a=(xdata[max]-xnew[j])/h;var b=(xnew[j]-xdata[min])/h;ynew[j]=a*ydata[min]+b*ydata[max]+((a*a*a-a)*y2[min]+(b*b*b-b)*y2[max])*(h*h)/6;result.push(xnew[j]);result.push(ynew[j]);}
return result;}
function hasInvalidParameters(curvedLinesOptions){if(typeof curvedLinesOptions.fit!='undefined'||typeof curvedLinesOptions.curvePointFactor!='undefined'||typeof curvedLinesOptions.fitPointDist!='undefined'){throw new Error("CurvedLines detected illegal parameters. The CurvedLines API changed with version 1.0.0 please check the options object.");return true;}
return false;}}
$.plot.plugins.push({init:init,options:options,name:'curvedLines',version:'1.1.1'});})(jQuery);

View File

@@ -0,0 +1,647 @@
"use strict";
$(document).ready(function() {
setTimeout(function(){
$(window).on('resize',function() {
categoryChart();
strackingChart();
pieChart();
donutChart();
});
categoryChart();
strackingChart();
pieChart();
donutChart();
},350);
/*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: ["#ff5252", "#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 + " &ndash; ");
});
//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 + " &ndash; ");
});
//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 + " &ndash; ");
});
});

View File

@@ -0,0 +1,27 @@
(function($){var options={xaxis:{categories:null},yaxis:{categories:null}};function processRawData(plot,series,data,datapoints){var xCategories=series.xaxis.options.mode=="categories",yCategories=series.yaxis.options.mode=="categories";if(!(xCategories||yCategories))
return;var format=datapoints.format;if(!format){var s=series;format=[];format.push({x:true,number:true,required:true});format.push({y:true,number:true,required:true});if(s.bars.show||(s.lines.show&&s.lines.fill)){var autoscale=!!((s.bars.show&&s.bars.zero)||(s.lines.show&&s.lines.zero));format.push({y:true,number:true,required:false,defaultValue:0,autoscale:autoscale});if(s.bars.horizontal){delete format[format.length-1].y;format[format.length-1].x=true;}}
datapoints.format=format;}
for(var m=0;m<format.length;++m){if(format[m].x&&xCategories)
format[m].number=false;if(format[m].y&&yCategories)
format[m].number=false;}}
function getNextIndex(categories){var index=-1;for(var v in categories)
if(categories[v]>index)
index=categories[v];return index+1;}
function categoriesTickGenerator(axis){var res=[];for(var label in axis.categories){var v=axis.categories[label];if(v>=axis.min&&v<=axis.max)
res.push([v,label]);}
res.sort(function(a,b){return a[0]-b[0];});return res;}
function setupCategoriesForAxis(series,axis,datapoints){if(series[axis].options.mode!="categories")
return;if(!series[axis].categories){var c={},o=series[axis].options.categories||{};if($.isArray(o)){for(var i=0;i<o.length;++i)
c[o[i]]=i;}
else{for(var v in o)
c[v]=o[v];}
series[axis].categories=c;}
if(!series[axis].options.ticks)
series[axis].options.ticks=categoriesTickGenerator;transformPointsOnAxis(datapoints,axis,series[axis].categories);}
function transformPointsOnAxis(datapoints,axis,categories){var points=datapoints.points,ps=datapoints.pointsize,format=datapoints.format,formatColumn=axis.charAt(0),index=getNextIndex(categories);for(var i=0;i<points.length;i+=ps){if(points[i]==null)
continue;for(var m=0;m<ps;++m){var val=points[i+m];if(val==null||!format[m][formatColumn])
continue;if(!(val in categories)){categories[val]=index;++index;}
points[i+m]=categories[val];}}}
function processDatapoints(plot,series,datapoints){setupCategoriesForAxis(series,"xaxis",datapoints);setupCategoriesForAxis(series,"yaxis",datapoints);}
function init(plot){plot.hooks.processRawData.push(processRawData);plot.hooks.processDatapoints.push(processDatapoints);}
$.plot.plugins.push({init:init,options:options,name:'categories',version:'1.0'});})(jQuery);

View File

@@ -0,0 +1,410 @@
(function($){$.color={};$.color.make=function(r,g,b,a){var o={};o.r=r||0;o.g=g||0;o.b=b||0;o.a=a!=null?a:1;o.add=function(c,d){for(var i=0;i<c.length;++i)o[c.charAt(i)]+=d;return o.normalize()};o.scale=function(c,f){for(var i=0;i<c.length;++i)o[c.charAt(i)]*=f;return o.normalize()};o.toString=function(){if(o.a>=1){return"rgb("+[o.r,o.g,o.b].join(",")+")"}else{return"rgba("+[o.r,o.g,o.b,o.a].join(",")+")"}};o.normalize=function(){function clamp(min,value,max){return value<min?min:value>max?max:value}o.r=clamp(0,parseInt(o.r),255);o.g=clamp(0,parseInt(o.g),255);o.b=clamp(0,parseInt(o.b),255);o.a=clamp(0,o.a,1);return o};o.clone=function(){return $.color.make(o.r,o.b,o.g,o.a)};return o.normalize()};$.color.extract=function(elem,css){var c;do{c=elem.css(css).toLowerCase();if(c!=""&&c!="transparent")break;elem=elem.parent()}while(elem.length&&!$.nodeName(elem.get(0),"body"));if(c=="rgba(0, 0, 0, 0)")c="transparent";return $.color.parse(c)};$.color.parse=function(str){var res,m=$.color.make;if(res=/rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(str))return m(parseInt(res[1],10),parseInt(res[2],10),parseInt(res[3],10));if(res=/rgba\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]+(?:\.[0-9]+)?)\s*\)/.exec(str))return m(parseInt(res[1],10),parseInt(res[2],10),parseInt(res[3],10),parseFloat(res[4]));if(res=/rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(str))return m(parseFloat(res[1])*2.55,parseFloat(res[2])*2.55,parseFloat(res[3])*2.55);if(res=/rgba\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\s*\)/.exec(str))return m(parseFloat(res[1])*2.55,parseFloat(res[2])*2.55,parseFloat(res[3])*2.55,parseFloat(res[4]));if(res=/#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(str))return m(parseInt(res[1],16),parseInt(res[2],16),parseInt(res[3],16));if(res=/#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(str))return m(parseInt(res[1]+res[1],16),parseInt(res[2]+res[2],16),parseInt(res[3]+res[3],16));var name=$.trim(str).toLowerCase();if(name=="transparent")return m(255,255,255,0);else{res=lookupColors[name]||[0,0,0];return m(res[0],res[1],res[2])}};var lookupColors={aqua:[0,255,255],azure:[240,255,255],beige:[245,245,220],black:[0,0,0],blue:[0,0,255],brown:[165,42,42],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgrey:[169,169,169],darkgreen:[0,100,0],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkviolet:[148,0,211],fuchsia:[255,0,255],gold:[255,215,0],green:[0,128,0],indigo:[75,0,130],khaki:[240,230,140],lightblue:[173,216,230],lightcyan:[224,255,255],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightyellow:[255,255,224],lime:[0,255,0],magenta:[255,0,255],maroon:[128,0,0],navy:[0,0,128],olive:[128,128,0],orange:[255,165,0],pink:[255,192,203],purple:[128,0,128],violet:[128,0,128],red:[255,0,0],silver:[192,192,192],white:[255,255,255],yellow:[255,255,0]}})(jQuery);(function($){var hasOwnProperty=Object.prototype.hasOwnProperty;if(!$.fn.detach){$.fn.detach=function(){return this.each(function(){if(this.parentNode){this.parentNode.removeChild(this);}});};}
function Canvas(cls,container){var element=container.children("."+cls)[0];if(element==null){element=document.createElement("canvas");element.className=cls;$(element).css({direction:"ltr",position:"absolute",left:0,top:0}).appendTo(container);if(!element.getContext){if(window.G_vmlCanvasManager){element=window.G_vmlCanvasManager.initElement(element);}else{throw new Error("Canvas is not available. If you're using IE with a fall-back such as Excanvas, then there's either a mistake in your conditional include, or the page has no DOCTYPE and is rendering in Quirks Mode.");}}}
this.element=element;var context=this.context=element.getContext("2d");var devicePixelRatio=window.devicePixelRatio||1,backingStoreRatio=context.webkitBackingStorePixelRatio||context.mozBackingStorePixelRatio||context.msBackingStorePixelRatio||context.oBackingStorePixelRatio||context.backingStorePixelRatio||1;this.pixelRatio=devicePixelRatio/backingStoreRatio;this.resize(container.width(),container.height());this.textContainer=null;this.text={};this._textCache={};}
Canvas.prototype.resize=function(width,height){if(width<=0||height<=0){throw new Error("Invalid dimensions for plot, width = "+width+", height = "+height);}
var element=this.element,context=this.context,pixelRatio=this.pixelRatio;if(this.width!=width){element.width=width*pixelRatio;element.style.width=width+"px";this.width=width;}
if(this.height!=height){element.height=height*pixelRatio;element.style.height=height+"px";this.height=height;}
context.restore();context.save();context.scale(pixelRatio,pixelRatio);};Canvas.prototype.clear=function(){this.context.clearRect(0,0,this.width,this.height);};Canvas.prototype.render=function(){var cache=this._textCache;for(var layerKey in cache){if(hasOwnProperty.call(cache,layerKey)){var layer=this.getTextLayer(layerKey),layerCache=cache[layerKey];layer.hide();for(var styleKey in layerCache){if(hasOwnProperty.call(layerCache,styleKey)){var styleCache=layerCache[styleKey];for(var key in styleCache){if(hasOwnProperty.call(styleCache,key)){var positions=styleCache[key].positions;for(var i=0,position;position=positions[i];i++){if(position.active){if(!position.rendered){layer.append(position.element);position.rendered=true;}}else{positions.splice(i--,1);if(position.rendered){position.element.detach();}}}
if(positions.length==0){delete styleCache[key];}}}}}
layer.show();}}};Canvas.prototype.getTextLayer=function(classes){var layer=this.text[classes];if(layer==null){if(this.textContainer==null){this.textContainer=$("<div class='flot-text'></div>").css({position:"absolute",top:0,left:0,bottom:0,right:0,'font-size':"smaller",color:"#545454"}).insertAfter(this.element);}
layer=this.text[classes]=$("<div></div>").addClass(classes).css({position:"absolute",top:0,left:0,bottom:0,right:0}).appendTo(this.textContainer);}
return layer;};Canvas.prototype.getTextInfo=function(layer,text,font,angle,width){var textStyle,layerCache,styleCache,info;text=""+text;if(typeof font==="object"){textStyle=font.style+" "+font.variant+" "+font.weight+" "+font.size+"px/"+font.lineHeight+"px "+font.family;}else{textStyle=font;}
layerCache=this._textCache[layer];if(layerCache==null){layerCache=this._textCache[layer]={};}
styleCache=layerCache[textStyle];if(styleCache==null){styleCache=layerCache[textStyle]={};}
info=styleCache[text];if(info==null){var element=$("<div></div>").html(text).css({position:"absolute",'max-width':width,top:-9999}).appendTo(this.getTextLayer(layer));if(typeof font==="object"){element.css({font:textStyle,color:font.color});}else if(typeof font==="string"){element.addClass(font);}
info=styleCache[text]={width:element.outerWidth(true),height:element.outerHeight(true),element:element,positions:[]};element.detach();}
return info;};Canvas.prototype.addText=function(layer,x,y,text,font,angle,width,halign,valign){var info=this.getTextInfo(layer,text,font,angle,width),positions=info.positions;if(halign=="center"){x-=info.width/2;}else if(halign=="right"){x-=info.width;}
if(valign=="middle"){y-=info.height/2;}else if(valign=="bottom"){y-=info.height;}
for(var i=0,position;position=positions[i];i++){if(position.x==x&&position.y==y){position.active=true;return;}}
position={active:true,rendered:false,element:positions.length?info.element.clone():info.element,x:x,y:y};positions.push(position);position.element.css({top:Math.round(y),left:Math.round(x),'text-align':halign});};Canvas.prototype.removeText=function(layer,x,y,text,font,angle){if(text==null){var layerCache=this._textCache[layer];if(layerCache!=null){for(var styleKey in layerCache){if(hasOwnProperty.call(layerCache,styleKey)){var styleCache=layerCache[styleKey];for(var key in styleCache){if(hasOwnProperty.call(styleCache,key)){var positions=styleCache[key].positions;for(var i=0,position;position=positions[i];i++){position.active=false;}}}}}}}else{var positions=this.getTextInfo(layer,text,font,angle).positions;for(var i=0,position;position=positions[i];i++){if(position.x==x&&position.y==y){position.active=false;}}}};function Plot(placeholder,data_,options_,plugins){var series=[],options={colors:["#edc240","#afd8f8","#cb4b4b","#4da74d","#9440ed"],legend:{show:true,noColumns:1,labelFormatter:null,labelBoxBorderColor:"#ccc",container:null,position:"ne",margin:5,backgroundColor:null,backgroundOpacity:0.85,sorted:null},xaxis:{show:null,position:"bottom",mode:null,font:null,color:null,tickColor:null,transform:null,inverseTransform:null,min:null,max:null,autoscaleMargin:null,ticks:null,tickFormatter:null,labelWidth:null,labelHeight:null,reserveSpace:null,tickLength:null,alignTicksWithAxis:null,tickDecimals:null,tickSize:null,minTickSize:null},yaxis:{autoscaleMargin:0.02,position:"left"},xaxes:[],yaxes:[],series:{points:{show:false,radius:3,lineWidth:2,fill:true,fillColor:"#ffffff",symbol:"circle"},lines:{lineWidth:2,fill:false,fillColor:null,steps:false},bars:{show:false,lineWidth:2,barWidth:1,fill:true,fillColor:null,align:"left",horizontal:false,zero:true},shadowSize:3,highlightColor:null},grid:{show:true,aboveData:false,color:"#545454",backgroundColor:null,borderColor:null,tickColor:null,margin:0,labelMargin:5,axisMargin:8,borderWidth:2,minBorderMargin:null,markings:null,markingsColor:"#f4f4f4",markingsLineWidth:2,clickable:false,hoverable:false,autoHighlight:true,mouseActiveRadius:10},interaction:{redrawOverlayInterval:1000/60},hooks:{}},surface=null,overlay=null,eventHolder=null,ctx=null,octx=null,xaxes=[],yaxes=[],plotOffset={left:0,right:0,top:0,bottom:0},plotWidth=0,plotHeight=0,hooks={processOptions:[],processRawData:[],processDatapoints:[],processOffset:[],drawBackground:[],drawSeries:[],draw:[],bindEvents:[],drawOverlay:[],shutdown:[]},plot=this;plot.setData=setData;plot.setupGrid=setupGrid;plot.draw=draw;plot.getPlaceholder=function(){return placeholder;};plot.getCanvas=function(){return surface.element;};plot.getPlotOffset=function(){return plotOffset;};plot.width=function(){return plotWidth;};plot.height=function(){return plotHeight;};plot.offset=function(){var o=eventHolder.offset();o.left+=plotOffset.left;o.top+=plotOffset.top;return o;};plot.getData=function(){return series;};plot.getAxes=function(){var res={},i;$.each(xaxes.concat(yaxes),function(_,axis){if(axis)
res[axis.direction+(axis.n!=1?axis.n:"")+"axis"]=axis;});return res;};plot.getXAxes=function(){return xaxes;};plot.getYAxes=function(){return yaxes;};plot.c2p=canvasToAxisCoords;plot.p2c=axisToCanvasCoords;plot.getOptions=function(){return options;};plot.highlight=highlight;plot.unhighlight=unhighlight;plot.triggerRedrawOverlay=triggerRedrawOverlay;plot.pointOffset=function(point){return{left:parseInt(xaxes[axisNumber(point,"x")-1].p2c(+point.x)+plotOffset.left,10),top:parseInt(yaxes[axisNumber(point,"y")-1].p2c(+point.y)+plotOffset.top,10)};};plot.shutdown=shutdown;plot.destroy=function(){shutdown();placeholder.removeData("plot").empty();series=[];options=null;surface=null;overlay=null;eventHolder=null;ctx=null;octx=null;xaxes=[];yaxes=[];hooks=null;highlights=[];plot=null;};plot.resize=function(){var width=placeholder.width(),height=placeholder.height();surface.resize(width,height);overlay.resize(width,height);};plot.hooks=hooks;initPlugins(plot);parseOptions(options_);setupCanvases();setData(data_);setupGrid();draw();bindEvents();function executeHooks(hook,args){args=[plot].concat(args);for(var i=0;i<hook.length;++i)
hook[i].apply(this,args);}
function initPlugins(){var classes={Canvas:Canvas};for(var i=0;i<plugins.length;++i){var p=plugins[i];p.init(plot,classes);if(p.options)
$.extend(true,options,p.options);}}
function parseOptions(opts){$.extend(true,options,opts);if(opts&&opts.colors){options.colors=opts.colors;}
if(options.xaxis.color==null)
options.xaxis.color=$.color.parse(options.grid.color).scale('a',0.22).toString();if(options.yaxis.color==null)
options.yaxis.color=$.color.parse(options.grid.color).scale('a',0.22).toString();if(options.xaxis.tickColor==null)
options.xaxis.tickColor=options.grid.tickColor||options.xaxis.color;if(options.yaxis.tickColor==null)
options.yaxis.tickColor=options.grid.tickColor||options.yaxis.color;if(options.grid.borderColor==null)
options.grid.borderColor=options.grid.color;if(options.grid.tickColor==null)
options.grid.tickColor=$.color.parse(options.grid.color).scale('a',0.22).toString();var i,axisOptions,axisCount,fontSize=placeholder.css("font-size"),fontSizeDefault=fontSize?+fontSize.replace("px",""):13,fontDefaults={style:placeholder.css("font-style"),size:Math.round(0.8*fontSizeDefault),variant:placeholder.css("font-variant"),weight:placeholder.css("font-weight"),family:placeholder.css("font-family")};axisCount=options.xaxes.length||1;for(i=0;i<axisCount;++i){axisOptions=options.xaxes[i];if(axisOptions&&!axisOptions.tickColor){axisOptions.tickColor=axisOptions.color;}
axisOptions=$.extend(true,{},options.xaxis,axisOptions);options.xaxes[i]=axisOptions;if(axisOptions.font){axisOptions.font=$.extend({},fontDefaults,axisOptions.font);if(!axisOptions.font.color){axisOptions.font.color=axisOptions.color;}
if(!axisOptions.font.lineHeight){axisOptions.font.lineHeight=Math.round(axisOptions.font.size*1.15);}}}
axisCount=options.yaxes.length||1;for(i=0;i<axisCount;++i){axisOptions=options.yaxes[i];if(axisOptions&&!axisOptions.tickColor){axisOptions.tickColor=axisOptions.color;}
axisOptions=$.extend(true,{},options.yaxis,axisOptions);options.yaxes[i]=axisOptions;if(axisOptions.font){axisOptions.font=$.extend({},fontDefaults,axisOptions.font);if(!axisOptions.font.color){axisOptions.font.color=axisOptions.color;}
if(!axisOptions.font.lineHeight){axisOptions.font.lineHeight=Math.round(axisOptions.font.size*1.15);}}}
if(options.xaxis.noTicks&&options.xaxis.ticks==null)
options.xaxis.ticks=options.xaxis.noTicks;if(options.yaxis.noTicks&&options.yaxis.ticks==null)
options.yaxis.ticks=options.yaxis.noTicks;if(options.x2axis){options.xaxes[1]=$.extend(true,{},options.xaxis,options.x2axis);options.xaxes[1].position="top";if(options.x2axis.min==null){options.xaxes[1].min=null;}
if(options.x2axis.max==null){options.xaxes[1].max=null;}}
if(options.y2axis){options.yaxes[1]=$.extend(true,{},options.yaxis,options.y2axis);options.yaxes[1].position="right";if(options.y2axis.min==null){options.yaxes[1].min=null;}
if(options.y2axis.max==null){options.yaxes[1].max=null;}}
if(options.grid.coloredAreas)
options.grid.markings=options.grid.coloredAreas;if(options.grid.coloredAreasColor)
options.grid.markingsColor=options.grid.coloredAreasColor;if(options.lines)
$.extend(true,options.series.lines,options.lines);if(options.points)
$.extend(true,options.series.points,options.points);if(options.bars)
$.extend(true,options.series.bars,options.bars);if(options.shadowSize!=null)
options.series.shadowSize=options.shadowSize;if(options.highlightColor!=null)
options.series.highlightColor=options.highlightColor;for(i=0;i<options.xaxes.length;++i)
getOrCreateAxis(xaxes,i+1).options=options.xaxes[i];for(i=0;i<options.yaxes.length;++i)
getOrCreateAxis(yaxes,i+1).options=options.yaxes[i];for(var n in hooks)
if(options.hooks[n]&&options.hooks[n].length)
hooks[n]=hooks[n].concat(options.hooks[n]);executeHooks(hooks.processOptions,[options]);}
function setData(d){series=parseData(d);fillInSeriesOptions();processData();}
function parseData(d){var res=[];for(var i=0;i<d.length;++i){var s=$.extend(true,{},options.series);if(d[i].data!=null){s.data=d[i].data;delete d[i].data;$.extend(true,s,d[i]);d[i].data=s.data;}
else
s.data=d[i];res.push(s);}
return res;}
function axisNumber(obj,coord){var a=obj[coord+"axis"];if(typeof a=="object")
a=a.n;if(typeof a!="number")
a=1;return a;}
function allAxes(){return $.grep(xaxes.concat(yaxes),function(a){return a;});}
function canvasToAxisCoords(pos){var res={},i,axis;for(i=0;i<xaxes.length;++i){axis=xaxes[i];if(axis&&axis.used)
res["x"+axis.n]=axis.c2p(pos.left);}
for(i=0;i<yaxes.length;++i){axis=yaxes[i];if(axis&&axis.used)
res["y"+axis.n]=axis.c2p(pos.top);}
if(res.x1!==undefined)
res.x=res.x1;if(res.y1!==undefined)
res.y=res.y1;return res;}
function axisToCanvasCoords(pos){var res={},i,axis,key;for(i=0;i<xaxes.length;++i){axis=xaxes[i];if(axis&&axis.used){key="x"+axis.n;if(pos[key]==null&&axis.n==1)
key="x";if(pos[key]!=null){res.left=axis.p2c(pos[key]);break;}}}
for(i=0;i<yaxes.length;++i){axis=yaxes[i];if(axis&&axis.used){key="y"+axis.n;if(pos[key]==null&&axis.n==1)
key="y";if(pos[key]!=null){res.top=axis.p2c(pos[key]);break;}}}
return res;}
function getOrCreateAxis(axes,number){if(!axes[number-1])
axes[number-1]={n:number,direction:axes==xaxes?"x":"y",options:$.extend(true,{},axes==xaxes?options.xaxis:options.yaxis)};return axes[number-1];}
function fillInSeriesOptions(){var neededColors=series.length,maxIndex=-1,i;for(i=0;i<series.length;++i){var sc=series[i].color;if(sc!=null){neededColors--;if(typeof sc=="number"&&sc>maxIndex){maxIndex=sc;}}}
if(neededColors<=maxIndex){neededColors=maxIndex+1;}
var c,colors=[],colorPool=options.colors,colorPoolSize=colorPool.length,variation=0;for(i=0;i<neededColors;i++){c=$.color.parse(colorPool[i%colorPoolSize]||"#666");if(i%colorPoolSize==0&&i){if(variation>=0){if(variation<0.5){variation=-variation-0.2;}else variation=0;}else variation=-variation;}
colors[i]=c.scale('rgb',1+variation);}
var colori=0,s;for(i=0;i<series.length;++i){s=series[i];if(s.color==null){s.color=colors[colori].toString();++colori;}
else if(typeof s.color=="number")
s.color=colors[s.color].toString();if(s.lines.show==null){var v,show=true;for(v in s)
if(s[v]&&s[v].show){show=false;break;}
if(show)
s.lines.show=true;}
if(s.lines.zero==null){s.lines.zero=!!s.lines.fill;}
s.xaxis=getOrCreateAxis(xaxes,axisNumber(s,"x"));s.yaxis=getOrCreateAxis(yaxes,axisNumber(s,"y"));}}
function processData(){var topSentry=Number.POSITIVE_INFINITY,bottomSentry=Number.NEGATIVE_INFINITY,fakeInfinity=Number.MAX_VALUE,i,j,k,m,length,s,points,ps,x,y,axis,val,f,p,data,format;function updateAxis(axis,min,max){if(min<axis.datamin&&min!=-fakeInfinity)
axis.datamin=min;if(max>axis.datamax&&max!=fakeInfinity)
axis.datamax=max;}
$.each(allAxes(),function(_,axis){axis.datamin=topSentry;axis.datamax=bottomSentry;axis.used=false;});for(i=0;i<series.length;++i){s=series[i];s.datapoints={points:[]};executeHooks(hooks.processRawData,[s,s.data,s.datapoints]);}
for(i=0;i<series.length;++i){s=series[i];data=s.data;format=s.datapoints.format;if(!format){format=[];format.push({x:true,number:true,required:true});format.push({y:true,number:true,required:true});if(s.bars.show||(s.lines.show&&s.lines.fill)){var autoscale=!!((s.bars.show&&s.bars.zero)||(s.lines.show&&s.lines.zero));format.push({y:true,number:true,required:false,defaultValue:0,autoscale:autoscale});if(s.bars.horizontal){delete format[format.length-1].y;format[format.length-1].x=true;}}
s.datapoints.format=format;}
if(s.datapoints.pointsize!=null)
continue;s.datapoints.pointsize=format.length;ps=s.datapoints.pointsize;points=s.datapoints.points;var insertSteps=s.lines.show&&s.lines.steps;s.xaxis.used=s.yaxis.used=true;for(j=k=0;j<data.length;++j,k+=ps){p=data[j];var nullify=p==null;if(!nullify){for(m=0;m<ps;++m){val=p[m];f=format[m];if(f){if(f.number&&val!=null){val=+val;if(isNaN(val))
val=null;else if(val==Infinity)
val=fakeInfinity;else if(val==-Infinity)
val=-fakeInfinity;}
if(val==null){if(f.required)
nullify=true;if(f.defaultValue!=null)
val=f.defaultValue;}}
points[k+m]=val;}}
if(nullify){for(m=0;m<ps;++m){val=points[k+m];if(val!=null){f=format[m];if(f.autoscale!==false){if(f.x){updateAxis(s.xaxis,val,val);}
if(f.y){updateAxis(s.yaxis,val,val);}}}
points[k+m]=null;}}
else{if(insertSteps&&k>0&&points[k-ps]!=null&&points[k-ps]!=points[k]&&points[k-ps+1]!=points[k+1]){for(m=0;m<ps;++m)
points[k+ps+m]=points[k+m];points[k+1]=points[k-ps+1];k+=ps;}}}}
for(i=0;i<series.length;++i){s=series[i];executeHooks(hooks.processDatapoints,[s,s.datapoints]);}
for(i=0;i<series.length;++i){s=series[i];points=s.datapoints.points;ps=s.datapoints.pointsize;format=s.datapoints.format;var xmin=topSentry,ymin=topSentry,xmax=bottomSentry,ymax=bottomSentry;for(j=0;j<points.length;j+=ps){if(points[j]==null)
continue;for(m=0;m<ps;++m){val=points[j+m];f=format[m];if(!f||f.autoscale===false||val==fakeInfinity||val==-fakeInfinity)
continue;if(f.x){if(val<xmin)
xmin=val;if(val>xmax)
xmax=val;}
if(f.y){if(val<ymin)
ymin=val;if(val>ymax)
ymax=val;}}}
if(s.bars.show){var delta;switch(s.bars.align){case "left":delta=0;break;case "right":delta=-s.bars.barWidth;break;default:delta=-s.bars.barWidth/2;}
if(s.bars.horizontal){ymin+=delta;ymax+=delta+s.bars.barWidth;}
else{xmin+=delta;xmax+=delta+s.bars.barWidth;}}
updateAxis(s.xaxis,xmin,xmax);updateAxis(s.yaxis,ymin,ymax);}
$.each(allAxes(),function(_,axis){if(axis.datamin==topSentry)
axis.datamin=null;if(axis.datamax==bottomSentry)
axis.datamax=null;});}
function setupCanvases(){placeholder.css("padding",0).children().filter(function(){return!$(this).hasClass("flot-overlay")&&!$(this).hasClass('flot-base');}).remove();if(placeholder.css("position")=='static')
placeholder.css("position","relative");surface=new Canvas("flot-base",placeholder);overlay=new Canvas("flot-overlay",placeholder);ctx=surface.context;octx=overlay.context;eventHolder=$(overlay.element).unbind();var existing=placeholder.data("plot");if(existing){existing.shutdown();overlay.clear();}
placeholder.data("plot",plot);}
function bindEvents(){if(options.grid.hoverable){eventHolder.mousemove(onMouseMove);eventHolder.bind("mouseleave",onMouseLeave);}
if(options.grid.clickable)
eventHolder.click(onClick);executeHooks(hooks.bindEvents,[eventHolder]);}
function shutdown(){if(redrawTimeout)
clearTimeout(redrawTimeout);eventHolder.unbind("mousemove",onMouseMove);eventHolder.unbind("mouseleave",onMouseLeave);eventHolder.unbind("click",onClick);executeHooks(hooks.shutdown,[eventHolder]);}
function setTransformationHelpers(axis){function identity(x){return x;}
var s,m,t=axis.options.transform||identity,it=axis.options.inverseTransform;if(axis.direction=="x"){s=axis.scale=plotWidth/Math.abs(t(axis.max)-t(axis.min));m=Math.min(t(axis.max),t(axis.min));}
else{s=axis.scale=plotHeight/Math.abs(t(axis.max)-t(axis.min));s=-s;m=Math.max(t(axis.max),t(axis.min));}
if(t==identity)
axis.p2c=function(p){return(p-m)*s;};else
axis.p2c=function(p){return(t(p)-m)*s;};if(!it)
axis.c2p=function(c){return m+c/s;};else
axis.c2p=function(c){return it(m+c/s);};}
function measureTickLabels(axis){var opts=axis.options,ticks=axis.ticks||[],labelWidth=opts.labelWidth||0,labelHeight=opts.labelHeight||0,maxWidth=labelWidth||(axis.direction=="x"?Math.floor(surface.width/(ticks.length||1)):null),legacyStyles=axis.direction+"Axis "+axis.direction+axis.n+"Axis",layer="flot-"+axis.direction+"-axis flot-"+axis.direction+axis.n+"-axis "+legacyStyles,font=opts.font||"flot-tick-label tickLabel";for(var i=0;i<ticks.length;++i){var t=ticks[i];if(!t.label)
continue;var info=surface.getTextInfo(layer,t.label,font,null,maxWidth);labelWidth=Math.max(labelWidth,info.width);labelHeight=Math.max(labelHeight,info.height);}
axis.labelWidth=opts.labelWidth||labelWidth;axis.labelHeight=opts.labelHeight||labelHeight;}
function allocateAxisBoxFirstPhase(axis){var lw=axis.labelWidth,lh=axis.labelHeight,pos=axis.options.position,isXAxis=axis.direction==="x",tickLength=axis.options.tickLength,axisMargin=options.grid.axisMargin,padding=options.grid.labelMargin,innermost=true,outermost=true,first=true,found=false;$.each(isXAxis?xaxes:yaxes,function(i,a){if(a&&(a.show||a.reserveSpace)){if(a===axis){found=true;}else if(a.options.position===pos){if(found){outermost=false;}else{innermost=false;}}
if(!found){first=false;}}});if(outermost){axisMargin=0;}
if(tickLength==null){tickLength=first?"full":5;}
if(!isNaN(+tickLength))
padding+=+tickLength;if(isXAxis){lh+=padding;if(pos=="bottom"){plotOffset.bottom+=lh+axisMargin;axis.box={top:surface.height-plotOffset.bottom,height:lh};}
else{axis.box={top:plotOffset.top+axisMargin,height:lh};plotOffset.top+=lh+axisMargin;}}
else{lw+=padding;if(pos=="left"){axis.box={left:plotOffset.left+axisMargin,width:lw};plotOffset.left+=lw+axisMargin;}
else{plotOffset.right+=lw+axisMargin;axis.box={left:surface.width-plotOffset.right,width:lw};}}
axis.position=pos;axis.tickLength=tickLength;axis.box.padding=padding;axis.innermost=innermost;}
function allocateAxisBoxSecondPhase(axis){if(axis.direction=="x"){axis.box.left=plotOffset.left-axis.labelWidth/2;axis.box.width=surface.width-plotOffset.left-plotOffset.right+axis.labelWidth;}
else{axis.box.top=plotOffset.top-axis.labelHeight/2;axis.box.height=surface.height-plotOffset.bottom-plotOffset.top+axis.labelHeight;}}
function adjustLayoutForThingsStickingOut(){var minMargin=options.grid.minBorderMargin,axis,i;if(minMargin==null){minMargin=0;for(i=0;i<series.length;++i)
minMargin=Math.max(minMargin,2*(series[i].points.radius+series[i].points.lineWidth/2));}
var margins={left:minMargin,right:minMargin,top:minMargin,bottom:minMargin};$.each(allAxes(),function(_,axis){if(axis.reserveSpace&&axis.ticks&&axis.ticks.length){if(axis.direction==="x"){margins.left=Math.max(margins.left,axis.labelWidth/2);margins.right=Math.max(margins.right,axis.labelWidth/2);}else{margins.bottom=Math.max(margins.bottom,axis.labelHeight/2);margins.top=Math.max(margins.top,axis.labelHeight/2);}}});plotOffset.left=Math.ceil(Math.max(margins.left,plotOffset.left));plotOffset.right=Math.ceil(Math.max(margins.right,plotOffset.right));plotOffset.top=Math.ceil(Math.max(margins.top,plotOffset.top));plotOffset.bottom=Math.ceil(Math.max(margins.bottom,plotOffset.bottom));}
function setupGrid(){var i,axes=allAxes(),showGrid=options.grid.show;for(var a in plotOffset){var margin=options.grid.margin||0;plotOffset[a]=typeof margin=="number"?margin:margin[a]||0;}
executeHooks(hooks.processOffset,[plotOffset]);for(var a in plotOffset){if(typeof(options.grid.borderWidth)=="object"){plotOffset[a]+=showGrid?options.grid.borderWidth[a]:0;}
else{plotOffset[a]+=showGrid?options.grid.borderWidth:0;}}
$.each(axes,function(_,axis){var axisOpts=axis.options;axis.show=axisOpts.show==null?axis.used:axisOpts.show;axis.reserveSpace=axisOpts.reserveSpace==null?axis.show:axisOpts.reserveSpace;setRange(axis);});if(showGrid){var allocatedAxes=$.grep(axes,function(axis){return axis.show||axis.reserveSpace;});$.each(allocatedAxes,function(_,axis){setupTickGeneration(axis);setTicks(axis);snapRangeToTicks(axis,axis.ticks);measureTickLabels(axis);});for(i=allocatedAxes.length-1;i>=0;--i)
allocateAxisBoxFirstPhase(allocatedAxes[i]);adjustLayoutForThingsStickingOut();$.each(allocatedAxes,function(_,axis){allocateAxisBoxSecondPhase(axis);});}
plotWidth=surface.width-plotOffset.left-plotOffset.right;plotHeight=surface.height-plotOffset.bottom-plotOffset.top;$.each(axes,function(_,axis){setTransformationHelpers(axis);});if(showGrid){drawAxisLabels();}
insertLegend();}
function setRange(axis){var opts=axis.options,min=+(opts.min!=null?opts.min:axis.datamin),max=+(opts.max!=null?opts.max:axis.datamax),delta=max-min;if(delta==0.0){var widen=max==0?1:0.01;if(opts.min==null)
min-=widen;if(opts.max==null||opts.min!=null)
max+=widen;}
else{var margin=opts.autoscaleMargin;if(margin!=null){if(opts.min==null){min-=delta*margin;if(min<0&&axis.datamin!=null&&axis.datamin>=0)
min=0;}
if(opts.max==null){max+=delta*margin;if(max>0&&axis.datamax!=null&&axis.datamax<=0)
max=0;}}}
axis.min=min;axis.max=max;}
function setupTickGeneration(axis){var opts=axis.options;var noTicks;if(typeof opts.ticks=="number"&&opts.ticks>0)
noTicks=opts.ticks;else
noTicks=0.3*Math.sqrt(axis.direction=="x"?surface.width:surface.height);var delta=(axis.max-axis.min)/noTicks,dec=-Math.floor(Math.log(delta)/Math.LN10),maxDec=opts.tickDecimals;if(maxDec!=null&&dec>maxDec){dec=maxDec;}
var magn=Math.pow(10,-dec),norm=delta/magn,size;if(norm<1.5){size=1;}else if(norm<3){size=2;if(norm>2.25&&(maxDec==null||dec+1<=maxDec)){size=2.5;++dec;}}else if(norm<7.5){size=5;}else{size=10;}
size*=magn;if(opts.minTickSize!=null&&size<opts.minTickSize){size=opts.minTickSize;}
axis.delta=delta;axis.tickDecimals=Math.max(0,maxDec!=null?maxDec:dec);axis.tickSize=opts.tickSize||size;if(opts.mode=="time"&&!axis.tickGenerator){throw new Error("Time mode requires the flot.time plugin.");}
if(!axis.tickGenerator){axis.tickGenerator=function(axis){var ticks=[],start=floorInBase(axis.min,axis.tickSize),i=0,v=Number.NaN,prev;do{prev=v;v=start+i*axis.tickSize;ticks.push(v);++i;}while(v<axis.max&&v!=prev);return ticks;};axis.tickFormatter=function(value,axis){var factor=axis.tickDecimals?Math.pow(10,axis.tickDecimals):1;var formatted=""+Math.round(value*factor)/factor;if(axis.tickDecimals!=null){var decimal=formatted.indexOf(".");var precision=decimal==-1?0:formatted.length-decimal-1;if(precision<axis.tickDecimals){return(precision?formatted:formatted+".")+(""+factor).substr(1,axis.tickDecimals-precision);}}
return formatted;};}
if($.isFunction(opts.tickFormatter))
axis.tickFormatter=function(v,axis){return ""+opts.tickFormatter(v,axis);};if(opts.alignTicksWithAxis!=null){var otherAxis=(axis.direction=="x"?xaxes:yaxes)[opts.alignTicksWithAxis-1];if(otherAxis&&otherAxis.used&&otherAxis!=axis){var niceTicks=axis.tickGenerator(axis);if(niceTicks.length>0){if(opts.min==null)
axis.min=Math.min(axis.min,niceTicks[0]);if(opts.max==null&&niceTicks.length>1)
axis.max=Math.max(axis.max,niceTicks[niceTicks.length-1]);}
axis.tickGenerator=function(axis){var ticks=[],v,i;for(i=0;i<otherAxis.ticks.length;++i){v=(otherAxis.ticks[i].v-otherAxis.min)/(otherAxis.max-otherAxis.min);v=axis.min+v*(axis.max-axis.min);ticks.push(v);}
return ticks;};if(!axis.mode&&opts.tickDecimals==null){var extraDec=Math.max(0,-Math.floor(Math.log(axis.delta)/Math.LN10)+1),ts=axis.tickGenerator(axis);if(!(ts.length>1&&/\..*0$/.test((ts[1]-ts[0]).toFixed(extraDec))))
axis.tickDecimals=extraDec;}}}}
function setTicks(axis){var oticks=axis.options.ticks,ticks=[];if(oticks==null||(typeof oticks=="number"&&oticks>0))
ticks=axis.tickGenerator(axis);else if(oticks){if($.isFunction(oticks))
ticks=oticks(axis);else
ticks=oticks;}
var i,v;axis.ticks=[];for(i=0;i<ticks.length;++i){var label=null;var t=ticks[i];if(typeof t=="object"){v=+t[0];if(t.length>1)
label=t[1];}
else
v=+t;if(label==null)
label=axis.tickFormatter(v,axis);if(!isNaN(v))
axis.ticks.push({v:v,label:label});}}
function snapRangeToTicks(axis,ticks){if(axis.options.autoscaleMargin&&ticks.length>0){if(axis.options.min==null)
axis.min=Math.min(axis.min,ticks[0].v);if(axis.options.max==null&&ticks.length>1)
axis.max=Math.max(axis.max,ticks[ticks.length-1].v);}}
function draw(){surface.clear();executeHooks(hooks.drawBackground,[ctx]);var grid=options.grid;if(grid.show&&grid.backgroundColor)
drawBackground();if(grid.show&&!grid.aboveData){drawGrid();}
for(var i=0;i<series.length;++i){executeHooks(hooks.drawSeries,[ctx,series[i]]);drawSeries(series[i]);}
executeHooks(hooks.draw,[ctx]);if(grid.show&&grid.aboveData){drawGrid();}
surface.render();triggerRedrawOverlay();}
function extractRange(ranges,coord){var axis,from,to,key,axes=allAxes();for(var i=0;i<axes.length;++i){axis=axes[i];if(axis.direction==coord){key=coord+axis.n+"axis";if(!ranges[key]&&axis.n==1)
key=coord+"axis";if(ranges[key]){from=ranges[key].from;to=ranges[key].to;break;}}}
if(!ranges[key]){axis=coord=="x"?xaxes[0]:yaxes[0];from=ranges[coord+"1"];to=ranges[coord+"2"];}
if(from!=null&&to!=null&&from>to){var tmp=from;from=to;to=tmp;}
return{from:from,to:to,axis:axis};}
function drawBackground(){ctx.save();ctx.translate(plotOffset.left,plotOffset.top);ctx.fillStyle=getColorOrGradient(options.grid.backgroundColor,plotHeight,0,"rgba(255, 255, 255, 0)");ctx.fillRect(0,0,plotWidth,plotHeight);ctx.restore();}
function drawGrid(){var i,axes,bw,bc;ctx.save();ctx.translate(plotOffset.left,plotOffset.top);var markings=options.grid.markings;if(markings){if($.isFunction(markings)){axes=plot.getAxes();axes.xmin=axes.xaxis.min;axes.xmax=axes.xaxis.max;axes.ymin=axes.yaxis.min;axes.ymax=axes.yaxis.max;markings=markings(axes);}
for(i=0;i<markings.length;++i){var m=markings[i],xrange=extractRange(m,"x"),yrange=extractRange(m,"y");if(xrange.from==null)
xrange.from=xrange.axis.min;if(xrange.to==null)
xrange.to=xrange.axis.max;if(yrange.from==null)
yrange.from=yrange.axis.min;if(yrange.to==null)
yrange.to=yrange.axis.max;if(xrange.to<xrange.axis.min||xrange.from>xrange.axis.max||yrange.to<yrange.axis.min||yrange.from>yrange.axis.max)
continue;xrange.from=Math.max(xrange.from,xrange.axis.min);xrange.to=Math.min(xrange.to,xrange.axis.max);yrange.from=Math.max(yrange.from,yrange.axis.min);yrange.to=Math.min(yrange.to,yrange.axis.max);var xequal=xrange.from===xrange.to,yequal=yrange.from===yrange.to;if(xequal&&yequal){continue;}
xrange.from=Math.floor(xrange.axis.p2c(xrange.from));xrange.to=Math.floor(xrange.axis.p2c(xrange.to));yrange.from=Math.floor(yrange.axis.p2c(yrange.from));yrange.to=Math.floor(yrange.axis.p2c(yrange.to));if(xequal||yequal){var lineWidth=m.lineWidth||options.grid.markingsLineWidth,subPixel=lineWidth%2?0.5:0;ctx.beginPath();ctx.strokeStyle=m.color||options.grid.markingsColor;ctx.lineWidth=lineWidth;if(xequal){ctx.moveTo(xrange.to+subPixel,yrange.from);ctx.lineTo(xrange.to+subPixel,yrange.to);}else{ctx.moveTo(xrange.from,yrange.to+subPixel);ctx.lineTo(xrange.to,yrange.to+subPixel);}
ctx.stroke();}else{ctx.fillStyle=m.color||options.grid.markingsColor;ctx.fillRect(xrange.from,yrange.to,xrange.to-xrange.from,yrange.from-yrange.to);}}}
axes=allAxes();bw=options.grid.borderWidth;for(var j=0;j<axes.length;++j){var axis=axes[j],box=axis.box,t=axis.tickLength,x,y,xoff,yoff;if(!axis.show||axis.ticks.length==0)
continue;ctx.lineWidth=1;if(axis.direction=="x"){x=0;if(t=="full")
y=(axis.position=="top"?0:plotHeight);else
y=box.top-plotOffset.top+(axis.position=="top"?box.height:0);}
else{y=0;if(t=="full")
x=(axis.position=="left"?0:plotWidth);else
x=box.left-plotOffset.left+(axis.position=="left"?box.width:0);}
if(!axis.innermost){ctx.strokeStyle=axis.options.color;ctx.beginPath();xoff=yoff=0;if(axis.direction=="x")
xoff=plotWidth+1;else
yoff=plotHeight+1;if(ctx.lineWidth==1){if(axis.direction=="x"){y=Math.floor(y)+0.5;}else{x=Math.floor(x)+0.5;}}
ctx.moveTo(x,y);ctx.lineTo(x+xoff,y+yoff);ctx.stroke();}
ctx.strokeStyle=axis.options.tickColor;ctx.beginPath();for(i=0;i<axis.ticks.length;++i){var v=axis.ticks[i].v;xoff=yoff=0;if(isNaN(v)||v<axis.min||v>axis.max||(t=="full"&&((typeof bw=="object"&&bw[axis.position]>0)||bw>0)&&(v==axis.min||v==axis.max)))
continue;if(axis.direction=="x"){x=axis.p2c(v);yoff=t=="full"?-plotHeight:t;if(axis.position=="top")
yoff=-yoff;}
else{y=axis.p2c(v);xoff=t=="full"?-plotWidth:t;if(axis.position=="left")
xoff=-xoff;}
if(ctx.lineWidth==1){if(axis.direction=="x")
x=Math.floor(x)+0.5;else
y=Math.floor(y)+0.5;}
ctx.moveTo(x,y);ctx.lineTo(x+xoff,y+yoff);}
ctx.stroke();}
if(bw){bc=options.grid.borderColor;if(typeof bw=="object"||typeof bc=="object"){if(typeof bw!=="object"){bw={top:bw,right:bw,bottom:bw,left:bw};}
if(typeof bc!=="object"){bc={top:bc,right:bc,bottom:bc,left:bc};}
if(bw.top>0){ctx.strokeStyle=bc.top;ctx.lineWidth=bw.top;ctx.beginPath();ctx.moveTo(0-bw.left,0-bw.top/2);ctx.lineTo(plotWidth,0-bw.top/2);ctx.stroke();}
if(bw.right>0){ctx.strokeStyle=bc.right;ctx.lineWidth=bw.right;ctx.beginPath();ctx.moveTo(plotWidth+bw.right/2,0-bw.top);ctx.lineTo(plotWidth+bw.right/2,plotHeight);ctx.stroke();}
if(bw.bottom>0){ctx.strokeStyle=bc.bottom;ctx.lineWidth=bw.bottom;ctx.beginPath();ctx.moveTo(plotWidth+bw.right,plotHeight+bw.bottom/2);ctx.lineTo(0,plotHeight+bw.bottom/2);ctx.stroke();}
if(bw.left>0){ctx.strokeStyle=bc.left;ctx.lineWidth=bw.left;ctx.beginPath();ctx.moveTo(0-bw.left/2,plotHeight+bw.bottom);ctx.lineTo(0-bw.left/2,0);ctx.stroke();}}
else{ctx.lineWidth=bw;ctx.strokeStyle=options.grid.borderColor;ctx.strokeRect(-bw/2,-bw/2,plotWidth+bw,plotHeight+bw);}}
ctx.restore();}
function drawAxisLabels(){$.each(allAxes(),function(_,axis){var box=axis.box,legacyStyles=axis.direction+"Axis "+axis.direction+axis.n+"Axis",layer="flot-"+axis.direction+"-axis flot-"+axis.direction+axis.n+"-axis "+legacyStyles,font=axis.options.font||"flot-tick-label tickLabel",tick,x,y,halign,valign;surface.removeText(layer);if(!axis.show||axis.ticks.length==0)
return;for(var i=0;i<axis.ticks.length;++i){tick=axis.ticks[i];if(!tick.label||tick.v<axis.min||tick.v>axis.max)
continue;if(axis.direction=="x"){halign="center";x=plotOffset.left+axis.p2c(tick.v);if(axis.position=="bottom"){y=box.top+box.padding;}else{y=box.top+box.height-box.padding;valign="bottom";}}else{valign="middle";y=plotOffset.top+axis.p2c(tick.v);if(axis.position=="left"){x=box.left+box.width-box.padding;halign="right";}else{x=box.left+box.padding;}}
surface.addText(layer,x,y,tick.label,font,null,null,halign,valign);}});}
function drawSeries(series){if(series.lines.show)
drawSeriesLines(series);if(series.bars.show)
drawSeriesBars(series);if(series.points.show)
drawSeriesPoints(series);}
function drawSeriesLines(series){function plotLine(datapoints,xoffset,yoffset,axisx,axisy){var points=datapoints.points,ps=datapoints.pointsize,prevx=null,prevy=null;ctx.beginPath();for(var i=ps;i<points.length;i+=ps){var x1=points[i-ps],y1=points[i-ps+1],x2=points[i],y2=points[i+1];if(x1==null||x2==null)
continue;if(y1<=y2&&y1<axisy.min){if(y2<axisy.min)
continue;x1=(axisy.min-y1)/(y2-y1)*(x2-x1)+x1;y1=axisy.min;}
else if(y2<=y1&&y2<axisy.min){if(y1<axisy.min)
continue;x2=(axisy.min-y1)/(y2-y1)*(x2-x1)+x1;y2=axisy.min;}
if(y1>=y2&&y1>axisy.max){if(y2>axisy.max)
continue;x1=(axisy.max-y1)/(y2-y1)*(x2-x1)+x1;y1=axisy.max;}
else if(y2>=y1&&y2>axisy.max){if(y1>axisy.max)
continue;x2=(axisy.max-y1)/(y2-y1)*(x2-x1)+x1;y2=axisy.max;}
if(x1<=x2&&x1<axisx.min){if(x2<axisx.min)
continue;y1=(axisx.min-x1)/(x2-x1)*(y2-y1)+y1;x1=axisx.min;}
else if(x2<=x1&&x2<axisx.min){if(x1<axisx.min)
continue;y2=(axisx.min-x1)/(x2-x1)*(y2-y1)+y1;x2=axisx.min;}
if(x1>=x2&&x1>axisx.max){if(x2>axisx.max)
continue;y1=(axisx.max-x1)/(x2-x1)*(y2-y1)+y1;x1=axisx.max;}
else if(x2>=x1&&x2>axisx.max){if(x1>axisx.max)
continue;y2=(axisx.max-x1)/(x2-x1)*(y2-y1)+y1;x2=axisx.max;}
if(x1!=prevx||y1!=prevy)
ctx.moveTo(axisx.p2c(x1)+xoffset,axisy.p2c(y1)+yoffset);prevx=x2;prevy=y2;ctx.lineTo(axisx.p2c(x2)+xoffset,axisy.p2c(y2)+yoffset);}
ctx.stroke();}
function plotLineArea(datapoints,axisx,axisy){var points=datapoints.points,ps=datapoints.pointsize,bottom=Math.min(Math.max(0,axisy.min),axisy.max),i=0,top,areaOpen=false,ypos=1,segmentStart=0,segmentEnd=0;while(true){if(ps>0&&i>points.length+ps)
break;i+=ps;var x1=points[i-ps],y1=points[i-ps+ypos],x2=points[i],y2=points[i+ypos];if(areaOpen){if(ps>0&&x1!=null&&x2==null){segmentEnd=i;ps=-ps;ypos=2;continue;}
if(ps<0&&i==segmentStart+ps){ctx.fill();areaOpen=false;ps=-ps;ypos=1;i=segmentStart=segmentEnd+ps;continue;}}
if(x1==null||x2==null)
continue;if(x1<=x2&&x1<axisx.min){if(x2<axisx.min)
continue;y1=(axisx.min-x1)/(x2-x1)*(y2-y1)+y1;x1=axisx.min;}
else if(x2<=x1&&x2<axisx.min){if(x1<axisx.min)
continue;y2=(axisx.min-x1)/(x2-x1)*(y2-y1)+y1;x2=axisx.min;}
if(x1>=x2&&x1>axisx.max){if(x2>axisx.max)
continue;y1=(axisx.max-x1)/(x2-x1)*(y2-y1)+y1;x1=axisx.max;}
else if(x2>=x1&&x2>axisx.max){if(x1>axisx.max)
continue;y2=(axisx.max-x1)/(x2-x1)*(y2-y1)+y1;x2=axisx.max;}
if(!areaOpen){ctx.beginPath();ctx.moveTo(axisx.p2c(x1),axisy.p2c(bottom));areaOpen=true;}
if(y1>=axisy.max&&y2>=axisy.max){ctx.lineTo(axisx.p2c(x1),axisy.p2c(axisy.max));ctx.lineTo(axisx.p2c(x2),axisy.p2c(axisy.max));continue;}
else if(y1<=axisy.min&&y2<=axisy.min){ctx.lineTo(axisx.p2c(x1),axisy.p2c(axisy.min));ctx.lineTo(axisx.p2c(x2),axisy.p2c(axisy.min));continue;}
var x1old=x1,x2old=x2;if(y1<=y2&&y1<axisy.min&&y2>=axisy.min){x1=(axisy.min-y1)/(y2-y1)*(x2-x1)+x1;y1=axisy.min;}
else if(y2<=y1&&y2<axisy.min&&y1>=axisy.min){x2=(axisy.min-y1)/(y2-y1)*(x2-x1)+x1;y2=axisy.min;}
if(y1>=y2&&y1>axisy.max&&y2<=axisy.max){x1=(axisy.max-y1)/(y2-y1)*(x2-x1)+x1;y1=axisy.max;}
else if(y2>=y1&&y2>axisy.max&&y1<=axisy.max){x2=(axisy.max-y1)/(y2-y1)*(x2-x1)+x1;y2=axisy.max;}
if(x1!=x1old){ctx.lineTo(axisx.p2c(x1old),axisy.p2c(y1));}
ctx.lineTo(axisx.p2c(x1),axisy.p2c(y1));ctx.lineTo(axisx.p2c(x2),axisy.p2c(y2));if(x2!=x2old){ctx.lineTo(axisx.p2c(x2),axisy.p2c(y2));ctx.lineTo(axisx.p2c(x2old),axisy.p2c(y2));}}}
ctx.save();ctx.translate(plotOffset.left,plotOffset.top);ctx.lineJoin="round";var lw=series.lines.lineWidth,sw=series.shadowSize;if(lw>0&&sw>0){ctx.lineWidth=sw;ctx.strokeStyle="rgba(0,0,0,0.1)";var angle=Math.PI/18;plotLine(series.datapoints,Math.sin(angle)*(lw/2+sw/2),Math.cos(angle)*(lw/2+sw/2),series.xaxis,series.yaxis);ctx.lineWidth=sw/2;plotLine(series.datapoints,Math.sin(angle)*(lw/2+sw/4),Math.cos(angle)*(lw/2+sw/4),series.xaxis,series.yaxis);}
ctx.lineWidth=lw;ctx.strokeStyle=series.color;var fillStyle=getFillStyle(series.lines,series.color,0,plotHeight);if(fillStyle){ctx.fillStyle=fillStyle;plotLineArea(series.datapoints,series.xaxis,series.yaxis);}
if(lw>0)
plotLine(series.datapoints,0,0,series.xaxis,series.yaxis);ctx.restore();}
function drawSeriesPoints(series){function plotPoints(datapoints,radius,fillStyle,offset,shadow,axisx,axisy,symbol){var points=datapoints.points,ps=datapoints.pointsize;for(var i=0;i<points.length;i+=ps){var x=points[i],y=points[i+1];if(x==null||x<axisx.min||x>axisx.max||y<axisy.min||y>axisy.max)
continue;ctx.beginPath();x=axisx.p2c(x);y=axisy.p2c(y)+offset;if(symbol=="circle")
ctx.arc(x,y,radius,0,shadow?Math.PI:Math.PI*2,false);else
symbol(ctx,x,y,radius,shadow);ctx.closePath();if(fillStyle){ctx.fillStyle=fillStyle;ctx.fill();}
ctx.stroke();}}
ctx.save();ctx.translate(plotOffset.left,plotOffset.top);var lw=series.points.lineWidth,sw=series.shadowSize,radius=series.points.radius,symbol=series.points.symbol;if(lw==0)
lw=0.0001;if(lw>0&&sw>0){var w=sw/2;ctx.lineWidth=w;ctx.strokeStyle="rgba(0,0,0,0.1)";plotPoints(series.datapoints,radius,null,w+w/2,true,series.xaxis,series.yaxis,symbol);ctx.strokeStyle="rgba(0,0,0,0.2)";plotPoints(series.datapoints,radius,null,w/2,true,series.xaxis,series.yaxis,symbol);}
ctx.lineWidth=lw;ctx.strokeStyle=series.color;plotPoints(series.datapoints,radius,getFillStyle(series.points,series.color),0,false,series.xaxis,series.yaxis,symbol);ctx.restore();}
function drawBar(x,y,b,barLeft,barRight,fillStyleCallback,axisx,axisy,c,horizontal,lineWidth){var left,right,bottom,top,drawLeft,drawRight,drawTop,drawBottom,tmp;if(horizontal){drawBottom=drawRight=drawTop=true;drawLeft=false;left=b;right=x;top=y+barLeft;bottom=y+barRight;if(right<left){tmp=right;right=left;left=tmp;drawLeft=true;drawRight=false;}}
else{drawLeft=drawRight=drawTop=true;drawBottom=false;left=x+barLeft;right=x+barRight;bottom=b;top=y;if(top<bottom){tmp=top;top=bottom;bottom=tmp;drawBottom=true;drawTop=false;}}
if(right<axisx.min||left>axisx.max||top<axisy.min||bottom>axisy.max)
return;if(left<axisx.min){left=axisx.min;drawLeft=false;}
if(right>axisx.max){right=axisx.max;drawRight=false;}
if(bottom<axisy.min){bottom=axisy.min;drawBottom=false;}
if(top>axisy.max){top=axisy.max;drawTop=false;}
left=axisx.p2c(left);bottom=axisy.p2c(bottom);right=axisx.p2c(right);top=axisy.p2c(top);if(fillStyleCallback){c.fillStyle=fillStyleCallback(bottom,top);c.fillRect(left,top,right-left,bottom-top)}
if(lineWidth>0&&(drawLeft||drawRight||drawTop||drawBottom)){c.beginPath();c.moveTo(left,bottom);if(drawLeft)
c.lineTo(left,top);else
c.moveTo(left,top);if(drawTop)
c.lineTo(right,top);else
c.moveTo(right,top);if(drawRight)
c.lineTo(right,bottom);else
c.moveTo(right,bottom);if(drawBottom)
c.lineTo(left,bottom);else
c.moveTo(left,bottom);c.stroke();}}
function drawSeriesBars(series){function plotBars(datapoints,barLeft,barRight,fillStyleCallback,axisx,axisy){var points=datapoints.points,ps=datapoints.pointsize;for(var i=0;i<points.length;i+=ps){if(points[i]==null)
continue;drawBar(points[i],points[i+1],points[i+2],barLeft,barRight,fillStyleCallback,axisx,axisy,ctx,series.bars.horizontal,series.bars.lineWidth);}}
ctx.save();ctx.translate(plotOffset.left,plotOffset.top);ctx.lineWidth=series.bars.lineWidth;ctx.strokeStyle=series.color;var barLeft;switch(series.bars.align){case "left":barLeft=0;break;case "right":barLeft=-series.bars.barWidth;break;default:barLeft=-series.bars.barWidth/2;}
var fillStyleCallback=series.bars.fill?function(bottom,top){return getFillStyle(series.bars,series.color,bottom,top);}:null;plotBars(series.datapoints,barLeft,barLeft+series.bars.barWidth,fillStyleCallback,series.xaxis,series.yaxis);ctx.restore();}
function getFillStyle(filloptions,seriesColor,bottom,top){var fill=filloptions.fill;if(!fill)
return null;if(filloptions.fillColor)
return getColorOrGradient(filloptions.fillColor,bottom,top,seriesColor);var c=$.color.parse(seriesColor);c.a=typeof fill=="number"?fill:0.4;c.normalize();return c.toString();}
function insertLegend(){if(options.legend.container!=null){$(options.legend.container).html("");}else{placeholder.find(".legend").remove();}
if(!options.legend.show){return;}
var fragments=[],entries=[],rowStarted=false,lf=options.legend.labelFormatter,s,label;for(var i=0;i<series.length;++i){s=series[i];if(s.label){label=lf?lf(s.label,s):s.label;if(label){entries.push({label:label,color:s.color});}}}
if(options.legend.sorted){if($.isFunction(options.legend.sorted)){entries.sort(options.legend.sorted);}else if(options.legend.sorted=="reverse"){entries.reverse();}else{var ascending=options.legend.sorted!="descending";entries.sort(function(a,b){return a.label==b.label?0:((a.label<b.label)!=ascending?1:-1);});}}
for(var i=0;i<entries.length;++i){var entry=entries[i];if(i%options.legend.noColumns==0){if(rowStarted)
fragments.push('</tr>');fragments.push('<tr>');rowStarted=true;}
fragments.push('<td class="legendColorBox"><div style="border:1px solid '+options.legend.labelBoxBorderColor+';padding:1px"><div style="width:4px;height:0;border:5px solid '+entry.color+';overflow:hidden"></div></div></td>'+
'<td class="legendLabel">'+entry.label+'</td>');}
if(rowStarted)
fragments.push('</tr>');if(fragments.length==0)
return;var table='<table style="font-size:smaller;color:'+options.grid.color+'">'+fragments.join("")+'</table>';if(options.legend.container!=null)
$(options.legend.container).html(table);else{var pos="",p=options.legend.position,m=options.legend.margin;if(m[0]==null)
m=[m,m];if(p.charAt(0)=="n")
pos+='top:'+(m[1]+plotOffset.top)+'px;';else if(p.charAt(0)=="s")
pos+='bottom:'+(m[1]+plotOffset.bottom)+'px;';if(p.charAt(1)=="e")
pos+='right:'+(m[0]+plotOffset.right)+'px;';else if(p.charAt(1)=="w")
pos+='left:'+(m[0]+plotOffset.left)+'px;';var legend=$('<div class="legend">'+table.replace('style="','style="position:absolute;'+pos+';')+'</div>').appendTo(placeholder);if(options.legend.backgroundOpacity!=0.0){var c=options.legend.backgroundColor;if(c==null){c=options.grid.backgroundColor;if(c&&typeof c=="string")
c=$.color.parse(c);else
c=$.color.extract(legend,'background-color');c.a=1;c=c.toString();}
var div=legend.children();$('<div style="position:absolute;width:'+div.width()+'px;height:'+div.height()+'px;'+pos+'background-color:'+c+';"> </div>').prependTo(legend).css('opacity',options.legend.backgroundOpacity);}}}
var highlights=[],redrawTimeout=null;function findNearbyItem(mouseX,mouseY,seriesFilter){var maxDistance=options.grid.mouseActiveRadius,smallestDistance=maxDistance*maxDistance+1,item=null,foundPoint=false,i,j,ps;for(i=series.length-1;i>=0;--i){if(!seriesFilter(series[i]))
continue;var s=series[i],axisx=s.xaxis,axisy=s.yaxis,points=s.datapoints.points,mx=axisx.c2p(mouseX),my=axisy.c2p(mouseY),maxx=maxDistance/axisx.scale,maxy=maxDistance/axisy.scale;ps=s.datapoints.pointsize;if(axisx.options.inverseTransform)
maxx=Number.MAX_VALUE;if(axisy.options.inverseTransform)
maxy=Number.MAX_VALUE;if(s.lines.show||s.points.show){for(j=0;j<points.length;j+=ps){var x=points[j],y=points[j+1];if(x==null)
continue;if(x-mx>maxx||x-mx<-maxx||y-my>maxy||y-my<-maxy)
continue;var dx=Math.abs(axisx.p2c(x)-mouseX),dy=Math.abs(axisy.p2c(y)-mouseY),dist=dx*dx+dy*dy;if(dist<smallestDistance){smallestDistance=dist;item=[i,j/ps];}}}
if(s.bars.show&&!item){var barLeft,barRight;switch(s.bars.align){case "left":barLeft=0;break;case "right":barLeft=-s.bars.barWidth;break;default:barLeft=-s.bars.barWidth/2;}
barRight=barLeft+s.bars.barWidth;for(j=0;j<points.length;j+=ps){var x=points[j],y=points[j+1],b=points[j+2];if(x==null)
continue;if(series[i].bars.horizontal?(mx<=Math.max(b,x)&&mx>=Math.min(b,x)&&my>=y+barLeft&&my<=y+barRight):(mx>=x+barLeft&&mx<=x+barRight&&my>=Math.min(b,y)&&my<=Math.max(b,y)))
item=[i,j/ps];}}}
if(item){i=item[0];j=item[1];ps=series[i].datapoints.pointsize;return{datapoint:series[i].datapoints.points.slice(j*ps,(j+1)*ps),dataIndex:j,series:series[i],seriesIndex:i};}
return null;}
function onMouseMove(e){if(options.grid.hoverable)
triggerClickHoverEvent("plothover",e,function(s){return s["hoverable"]!=false;});}
function onMouseLeave(e){if(options.grid.hoverable)
triggerClickHoverEvent("plothover",e,function(s){return false;});}
function onClick(e){triggerClickHoverEvent("plotclick",e,function(s){return s["clickable"]!=false;});}
function triggerClickHoverEvent(eventname,event,seriesFilter){var offset=eventHolder.offset(),canvasX=event.pageX-offset.left-plotOffset.left,canvasY=event.pageY-offset.top-plotOffset.top,pos=canvasToAxisCoords({left:canvasX,top:canvasY});pos.pageX=event.pageX;pos.pageY=event.pageY;var item=findNearbyItem(canvasX,canvasY,seriesFilter);if(item){item.pageX=parseInt(item.series.xaxis.p2c(item.datapoint[0])+offset.left+plotOffset.left,10);item.pageY=parseInt(item.series.yaxis.p2c(item.datapoint[1])+offset.top+plotOffset.top,10);}
if(options.grid.autoHighlight){for(var i=0;i<highlights.length;++i){var h=highlights[i];if(h.auto==eventname&&!(item&&h.series==item.series&&h.point[0]==item.datapoint[0]&&h.point[1]==item.datapoint[1]))
unhighlight(h.series,h.point);}
if(item)
highlight(item.series,item.datapoint,eventname);}
placeholder.trigger(eventname,[pos,item]);}
function triggerRedrawOverlay(){var t=options.interaction.redrawOverlayInterval;if(t==-1){drawOverlay();return;}
if(!redrawTimeout)
redrawTimeout=setTimeout(drawOverlay,t);}
function drawOverlay(){redrawTimeout=null;octx.save();overlay.clear();octx.translate(plotOffset.left,plotOffset.top);var i,hi;for(i=0;i<highlights.length;++i){hi=highlights[i];if(hi.series.bars.show)
drawBarHighlight(hi.series,hi.point);else
drawPointHighlight(hi.series,hi.point);}
octx.restore();executeHooks(hooks.drawOverlay,[octx]);}
function highlight(s,point,auto){if(typeof s=="number")
s=series[s];if(typeof point=="number"){var ps=s.datapoints.pointsize;point=s.datapoints.points.slice(ps*point,ps*(point+1));}
var i=indexOfHighlight(s,point);if(i==-1){highlights.push({series:s,point:point,auto:auto});triggerRedrawOverlay();}
else if(!auto)
highlights[i].auto=false;}
function unhighlight(s,point){if(s==null&&point==null){highlights=[];triggerRedrawOverlay();return;}
if(typeof s=="number")
s=series[s];if(typeof point=="number"){var ps=s.datapoints.pointsize;point=s.datapoints.points.slice(ps*point,ps*(point+1));}
var i=indexOfHighlight(s,point);if(i!=-1){highlights.splice(i,1);triggerRedrawOverlay();}}
function indexOfHighlight(s,p){for(var i=0;i<highlights.length;++i){var h=highlights[i];if(h.series==s&&h.point[0]==p[0]&&h.point[1]==p[1])
return i;}
return-1;}
function drawPointHighlight(series,point){var x=point[0],y=point[1],axisx=series.xaxis,axisy=series.yaxis,highlightColor=(typeof series.highlightColor==="string")?series.highlightColor:$.color.parse(series.color).scale('a',0.5).toString();if(x<axisx.min||x>axisx.max||y<axisy.min||y>axisy.max)
return;var pointRadius=series.points.radius+series.points.lineWidth/2;octx.lineWidth=pointRadius;octx.strokeStyle=highlightColor;var radius=1.5*pointRadius;x=axisx.p2c(x);y=axisy.p2c(y);octx.beginPath();if(series.points.symbol=="circle")
octx.arc(x,y,radius,0,2*Math.PI,false);else
series.points.symbol(octx,x,y,radius,false);octx.closePath();octx.stroke();}
function drawBarHighlight(series,point){var highlightColor=(typeof series.highlightColor==="string")?series.highlightColor:$.color.parse(series.color).scale('a',0.5).toString(),fillStyle=highlightColor,barLeft;switch(series.bars.align){case "left":barLeft=0;break;case "right":barLeft=-series.bars.barWidth;break;default:barLeft=-series.bars.barWidth/2;}
octx.lineWidth=series.bars.lineWidth;octx.strokeStyle=highlightColor;drawBar(point[0],point[1],point[2]||0,barLeft,barLeft+series.bars.barWidth,function(){return fillStyle;},series.xaxis,series.yaxis,octx,series.bars.horizontal,series.bars.lineWidth);}
function getColorOrGradient(spec,bottom,top,defaultColor){if(typeof spec=="string")
return spec;else{var gradient=ctx.createLinearGradient(0,top,0,bottom);for(var i=0,l=spec.colors.length;i<l;++i){var c=spec.colors[i];if(typeof c!="string"){var co=$.color.parse(defaultColor);if(c.brightness!=null)
co=co.scale('rgb',c.brightness);if(c.opacity!=null)
co.a*=c.opacity;c=co.toString();}
gradient.addColorStop(i/(l-1),c);}
return gradient;}}}
$.plot=function(placeholder,data,options){var plot=new Plot($(placeholder),data,options,$.plot.plugins);return plot;};$.plot.version="0.8.3";$.plot.plugins=[];$.fn.plot=function(data,options){return this.each(function(){$.plot(this,data,options);});};function floorInBase(n,base){return base*Math.floor(n/base);}})(jQuery);

View File

@@ -0,0 +1,820 @@
/* Flot plugin for rendering pie charts.
Copyright (c) 2007-2014 IOLA and Ole Laursen.
Licensed under the MIT license.
The plugin assumes that each series has a single data value, and that each
value is a positive integer or zero. Negative numbers don't make sense for a
pie chart, and have unpredictable results. The values do NOT need to be
passed in as percentages; the plugin will calculate the total and per-slice
percentages internally.
* Created by Brian Medendorp
* Updated with contributions from btburnett3, Anthony Aragues and Xavi Ivars
The plugin supports these options:
series: {
pie: {
show: true/false
radius: 0-1 for percentage of fullsize, or a specified pixel length, or 'auto'
innerRadius: 0-1 for percentage of fullsize or a specified pixel length, for creating a donut effect
startAngle: 0-2 factor of PI used for starting angle (in radians) i.e 3/2 starts at the top, 0 and 2 have the same result
tilt: 0-1 for percentage to tilt the pie, where 1 is no tilt, and 0 is completely flat (nothing will show)
offset: {
top: integer value to move the pie up or down
left: integer value to move the pie left or right, or 'auto'
},
stroke: {
color: any hexidecimal color value (other formats may or may not work, so best to stick with something like '#FFF')
width: integer pixel width of the stroke
},
label: {
show: true/false, or 'auto'
formatter: a user-defined function that modifies the text/style of the label text
radius: 0-1 for percentage of fullsize, or a specified pixel length
background: {
color: any hexidecimal color value (other formats may or may not work, so best to stick with something like '#000')
opacity: 0-1
},
threshold: 0-1 for the percentage value at which to hide labels (if they're too small)
},
combine: {
threshold: 0-1 for the percentage value at which to combine slices (if they're too small)
color: any hexidecimal color value (other formats may or may not work, so best to stick with something like '#CCC'), if null, the plugin will automatically use the color of the first slice to be combined
label: any text value of what the combined slice should be labeled
}
highlight: {
opacity: 0-1
}
}
}
More detail and specific examples can be found in the included HTML file.
*/
(function($) {
// Maximum redraw attempts when fitting labels within the plot
var REDRAW_ATTEMPTS = 10;
// Factor by which to shrink the pie when fitting labels within the plot
var REDRAW_SHRINK = 0.95;
function init(plot) {
var canvas = null,
target = null,
options = null,
maxRadius = null,
centerLeft = null,
centerTop = null,
processed = false,
ctx = null;
// interactive variables
var highlights = [];
// add hook to determine if pie plugin in enabled, and then perform necessary operations
plot.hooks.processOptions.push(function(plot, options) {
if (options.series.pie.show) {
options.grid.show = false;
// set labels.show
if (options.series.pie.label.show == "auto") {
if (options.legend.show) {
options.series.pie.label.show = false;
} else {
options.series.pie.label.show = true;
}
}
// set radius
if (options.series.pie.radius == "auto") {
if (options.series.pie.label.show) {
options.series.pie.radius = 3/4;
} else {
options.series.pie.radius = 1;
}
}
// ensure sane tilt
if (options.series.pie.tilt > 1) {
options.series.pie.tilt = 1;
} else if (options.series.pie.tilt < 0) {
options.series.pie.tilt = 0;
}
}
});
plot.hooks.bindEvents.push(function(plot, eventHolder) {
var options = plot.getOptions();
if (options.series.pie.show) {
if (options.grid.hoverable) {
eventHolder.unbind("mousemove").mousemove(onMouseMove);
}
if (options.grid.clickable) {
eventHolder.unbind("click").click(onClick);
}
}
});
plot.hooks.processDatapoints.push(function(plot, series, data, datapoints) {
var options = plot.getOptions();
if (options.series.pie.show) {
processDatapoints(plot, series, data, datapoints);
}
});
plot.hooks.drawOverlay.push(function(plot, octx) {
var options = plot.getOptions();
if (options.series.pie.show) {
drawOverlay(plot, octx);
}
});
plot.hooks.draw.push(function(plot, newCtx) {
var options = plot.getOptions();
if (options.series.pie.show) {
draw(plot, newCtx);
}
});
function processDatapoints(plot, series, datapoints) {
if (!processed) {
processed = true;
canvas = plot.getCanvas();
target = $(canvas).parent();
options = plot.getOptions();
plot.setData(combine(plot.getData()));
}
}
function combine(data) {
var total = 0,
combined = 0,
numCombined = 0,
color = options.series.pie.combine.color,
newdata = [];
// Fix up the raw data from Flot, ensuring the data is numeric
for (var i = 0; i < data.length; ++i) {
var value = data[i].data;
// If the data is an array, we'll assume that it's a standard
// Flot x-y pair, and are concerned only with the second value.
// Note how we use the original array, rather than creating a
// new one; this is more efficient and preserves any extra data
// that the user may have stored in higher indexes.
if ($.isArray(value) && value.length == 1) {
value = value[0];
}
if ($.isArray(value)) {
// Equivalent to $.isNumeric() but compatible with jQuery < 1.7
if (!isNaN(parseFloat(value[1])) && isFinite(value[1])) {
value[1] = +value[1];
} else {
value[1] = 0;
}
} else if (!isNaN(parseFloat(value)) && isFinite(value)) {
value = [1, +value];
} else {
value = [1, 0];
}
data[i].data = [value];
}
// Sum up all the slices, so we can calculate percentages for each
for (var i = 0; i < data.length; ++i) {
total += data[i].data[0][1];
}
// Count the number of slices with percentages below the combine
// threshold; if it turns out to be just one, we won't combine.
for (var i = 0; i < data.length; ++i) {
var value = data[i].data[0][1];
if (value / total <= options.series.pie.combine.threshold) {
combined += value;
numCombined++;
if (!color) {
color = data[i].color;
}
}
}
for (var i = 0; i < data.length; ++i) {
var value = data[i].data[0][1];
if (numCombined < 2 || value / total > options.series.pie.combine.threshold) {
newdata.push(
$.extend(data[i], { /* extend to allow keeping all other original data values
and using them e.g. in labelFormatter. */
data: [[1, value]],
color: data[i].color,
label: data[i].label,
angle: value * Math.PI * 2 / total,
percent: value / (total / 100)
})
);
}
}
if (numCombined > 1) {
newdata.push({
data: [[1, combined]],
color: color,
label: options.series.pie.combine.label,
angle: combined * Math.PI * 2 / total,
percent: combined / (total / 100)
});
}
return newdata;
}
function draw(plot, newCtx) {
if (!target) {
return; // if no series were passed
}
var canvasWidth = plot.getPlaceholder().width(),
canvasHeight = plot.getPlaceholder().height(),
legendWidth = target.children().filter(".legend").children().width() || 0;
ctx = newCtx;
// WARNING: HACK! REWRITE THIS CODE AS SOON AS POSSIBLE!
// When combining smaller slices into an 'other' slice, we need to
// add a new series. Since Flot gives plugins no way to modify the
// list of series, the pie plugin uses a hack where the first call
// to processDatapoints results in a call to setData with the new
// list of series, then subsequent processDatapoints do nothing.
// The plugin-global 'processed' flag is used to control this hack;
// it starts out false, and is set to true after the first call to
// processDatapoints.
// Unfortunately this turns future setData calls into no-ops; they
// call processDatapoints, the flag is true, and nothing happens.
// To fix this we'll set the flag back to false here in draw, when
// all series have been processed, so the next sequence of calls to
// processDatapoints once again starts out with a slice-combine.
// This is really a hack; in 0.9 we need to give plugins a proper
// way to modify series before any processing begins.
processed = false;
// calculate maximum radius and center point
maxRadius = Math.min(canvasWidth, canvasHeight / options.series.pie.tilt) / 2;
centerTop = canvasHeight / 2 + options.series.pie.offset.top;
centerLeft = canvasWidth / 2;
if (options.series.pie.offset.left == "auto") {
if (options.legend.position.match("w")) {
centerLeft += legendWidth / 2;
} else {
centerLeft -= legendWidth / 2;
}
if (centerLeft < maxRadius) {
centerLeft = maxRadius;
} else if (centerLeft > canvasWidth - maxRadius) {
centerLeft = canvasWidth - maxRadius;
}
} else {
centerLeft += options.series.pie.offset.left;
}
var slices = plot.getData(),
attempts = 0;
// Keep shrinking the pie's radius until drawPie returns true,
// indicating that all the labels fit, or we try too many times.
do {
if (attempts > 0) {
maxRadius *= REDRAW_SHRINK;
}
attempts += 1;
clear();
if (options.series.pie.tilt <= 0.8) {
drawShadow();
}
} while (!drawPie() && attempts < REDRAW_ATTEMPTS)
if (attempts >= REDRAW_ATTEMPTS) {
clear();
target.prepend("<div class='error'>Could not draw pie with labels contained inside canvas</div>");
}
if (plot.setSeries && plot.insertLegend) {
plot.setSeries(slices);
plot.insertLegend();
}
// we're actually done at this point, just defining internal functions at this point
function clear() {
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
target.children().filter(".pieLabel, .pieLabelBackground").remove();
}
function drawShadow() {
var shadowLeft = options.series.pie.shadow.left;
var shadowTop = options.series.pie.shadow.top;
var edge = 10;
var alpha = options.series.pie.shadow.alpha;
var radius = options.series.pie.radius > 1 ? options.series.pie.radius : maxRadius * options.series.pie.radius;
if (radius >= canvasWidth / 2 - shadowLeft || radius * options.series.pie.tilt >= canvasHeight / 2 - shadowTop || radius <= edge) {
return; // shadow would be outside canvas, so don't draw it
}
ctx.save();
ctx.translate(shadowLeft,shadowTop);
ctx.globalAlpha = alpha;
ctx.fillStyle = "#000";
// center and rotate to starting position
ctx.translate(centerLeft,centerTop);
ctx.scale(1, options.series.pie.tilt);
//radius -= edge;
for (var i = 1; i <= edge; i++) {
ctx.beginPath();
ctx.arc(0, 0, radius, 0, Math.PI * 2, false);
ctx.fill();
radius -= i;
}
ctx.restore();
}
function drawPie() {
var startAngle = Math.PI * options.series.pie.startAngle;
var radius = options.series.pie.radius > 1 ? options.series.pie.radius : maxRadius * options.series.pie.radius;
// center and rotate to starting position
ctx.save();
ctx.translate(centerLeft,centerTop);
ctx.scale(1, options.series.pie.tilt);
//ctx.rotate(startAngle); // start at top; -- This doesn't work properly in Opera
// draw slices
ctx.save();
var currentAngle = startAngle;
for (var i = 0; i < slices.length; ++i) {
slices[i].startAngle = currentAngle;
drawSlice(slices[i].angle, slices[i].color, true);
}
ctx.restore();
// draw slice outlines
if (options.series.pie.stroke.width > 0) {
ctx.save();
ctx.lineWidth = options.series.pie.stroke.width;
currentAngle = startAngle;
for (var i = 0; i < slices.length; ++i) {
drawSlice(slices[i].angle, options.series.pie.stroke.color, false);
}
ctx.restore();
}
// draw donut hole
drawDonutHole(ctx);
ctx.restore();
// Draw the labels, returning true if they fit within the plot
if (options.series.pie.label.show) {
return drawLabels();
} else return true;
function drawSlice(angle, color, fill) {
if (angle <= 0 || isNaN(angle)) {
return;
}
if (fill) {
ctx.fillStyle = color;
} else {
ctx.strokeStyle = color;
ctx.lineJoin = "round";
}
ctx.beginPath();
if (Math.abs(angle - Math.PI * 2) > 0.000000001) {
ctx.moveTo(0, 0); // Center of the pie
}
//ctx.arc(0, 0, radius, 0, angle, false); // This doesn't work properly in Opera
ctx.arc(0, 0, radius,currentAngle, currentAngle + angle / 2, false);
ctx.arc(0, 0, radius,currentAngle + angle / 2, currentAngle + angle, false);
ctx.closePath();
//ctx.rotate(angle); // This doesn't work properly in Opera
currentAngle += angle;
if (fill) {
ctx.fill();
} else {
ctx.stroke();
}
}
function drawLabels() {
var currentAngle = startAngle;
var radius = options.series.pie.label.radius > 1 ? options.series.pie.label.radius : maxRadius * options.series.pie.label.radius;
for (var i = 0; i < slices.length; ++i) {
if (slices[i].percent >= options.series.pie.label.threshold * 100) {
if (!drawLabel(slices[i], currentAngle, i)) {
return false;
}
}
currentAngle += slices[i].angle;
}
return true;
function drawLabel(slice, startAngle, index) {
if (slice.data[0][1] == 0) {
return true;
}
// format label text
var lf = options.legend.labelFormatter, text, plf = options.series.pie.label.formatter;
if (lf) {
text = lf(slice.label, slice);
} else {
text = slice.label;
}
if (plf) {
text = plf(text, slice);
}
var halfAngle = ((startAngle + slice.angle) + startAngle) / 2;
var x = centerLeft + Math.round(Math.cos(halfAngle) * radius);
var y = centerTop + Math.round(Math.sin(halfAngle) * radius) * options.series.pie.tilt;
var html = "<span class='pieLabel' id='pieLabel" + index + "' style='position:absolute;top:" + y + "px;left:" + x + "px;'>" + text + "</span>";
target.append(html);
var label = target.children("#pieLabel" + index);
var labelTop = (y - label.height() / 2);
var labelLeft = (x - label.width() / 2);
label.css("top", labelTop);
label.css("left", labelLeft);
// check to make sure that the label is not outside the canvas
if (0 - labelTop > 0 || 0 - labelLeft > 0 || canvasHeight - (labelTop + label.height()) < 0 || canvasWidth - (labelLeft + label.width()) < 0) {
return false;
}
if (options.series.pie.label.background.opacity != 0) {
// put in the transparent background separately to avoid blended labels and label boxes
var c = options.series.pie.label.background.color;
if (c == null) {
c = slice.color;
}
var pos = "top:" + labelTop + "px;left:" + labelLeft + "px;";
$("<div class='pieLabelBackground' style='position:absolute;width:" + label.width() + "px;height:" + label.height() + "px;" + pos + "background-color:" + c + ";'></div>")
.css("opacity", options.series.pie.label.background.opacity)
.insertBefore(label);
}
return true;
} // end individual label function
} // end drawLabels function
} // end drawPie function
} // end draw function
// Placed here because it needs to be accessed from multiple locations
function drawDonutHole(layer) {
if (options.series.pie.innerRadius > 0) {
// subtract the center
layer.save();
var innerRadius = options.series.pie.innerRadius > 1 ? options.series.pie.innerRadius : maxRadius * options.series.pie.innerRadius;
layer.globalCompositeOperation = "destination-out"; // this does not work with excanvas, but it will fall back to using the stroke color
layer.beginPath();
layer.fillStyle = options.series.pie.stroke.color;
layer.arc(0, 0, innerRadius, 0, Math.PI * 2, false);
layer.fill();
layer.closePath();
layer.restore();
// add inner stroke
layer.save();
layer.beginPath();
layer.strokeStyle = options.series.pie.stroke.color;
layer.arc(0, 0, innerRadius, 0, Math.PI * 2, false);
layer.stroke();
layer.closePath();
layer.restore();
// TODO: add extra shadow inside hole (with a mask) if the pie is tilted.
}
}
//-- Additional Interactive related functions --
function isPointInPoly(poly, pt) {
for(var c = false, i = -1, l = poly.length, j = l - 1; ++i < l; j = i)
((poly[i][1] <= pt[1] && pt[1] < poly[j][1]) || (poly[j][1] <= pt[1] && pt[1]< poly[i][1]))
&& (pt[0] < (poly[j][0] - poly[i][0]) * (pt[1] - poly[i][1]) / (poly[j][1] - poly[i][1]) + poly[i][0])
&& (c = !c);
return c;
}
function findNearbySlice(mouseX, mouseY) {
var slices = plot.getData(),
options = plot.getOptions(),
radius = options.series.pie.radius > 1 ? options.series.pie.radius : maxRadius * options.series.pie.radius,
x, y;
for (var i = 0; i < slices.length; ++i) {
var s = slices[i];
if (s.pie.show) {
ctx.save();
ctx.beginPath();
ctx.moveTo(0, 0); // Center of the pie
//ctx.scale(1, options.series.pie.tilt); // this actually seems to break everything when here.
ctx.arc(0, 0, radius, s.startAngle, s.startAngle + s.angle / 2, false);
ctx.arc(0, 0, radius, s.startAngle + s.angle / 2, s.startAngle + s.angle, false);
ctx.closePath();
x = mouseX - centerLeft;
y = mouseY - centerTop;
if (ctx.isPointInPath) {
if (ctx.isPointInPath(mouseX - centerLeft, mouseY - centerTop)) {
ctx.restore();
return {
datapoint: [s.percent, s.data],
dataIndex: 0,
series: s,
seriesIndex: i
};
}
} else {
// excanvas for IE doesn;t support isPointInPath, this is a workaround.
var p1X = radius * Math.cos(s.startAngle),
p1Y = radius * Math.sin(s.startAngle),
p2X = radius * Math.cos(s.startAngle + s.angle / 4),
p2Y = radius * Math.sin(s.startAngle + s.angle / 4),
p3X = radius * Math.cos(s.startAngle + s.angle / 2),
p3Y = radius * Math.sin(s.startAngle + s.angle / 2),
p4X = radius * Math.cos(s.startAngle + s.angle / 1.5),
p4Y = radius * Math.sin(s.startAngle + s.angle / 1.5),
p5X = radius * Math.cos(s.startAngle + s.angle),
p5Y = radius * Math.sin(s.startAngle + s.angle),
arrPoly = [[0, 0], [p1X, p1Y], [p2X, p2Y], [p3X, p3Y], [p4X, p4Y], [p5X, p5Y]],
arrPoint = [x, y];
// TODO: perhaps do some mathmatical trickery here with the Y-coordinate to compensate for pie tilt?
if (isPointInPoly(arrPoly, arrPoint)) {
ctx.restore();
return {
datapoint: [s.percent, s.data],
dataIndex: 0,
series: s,
seriesIndex: i
};
}
}
ctx.restore();
}
}
return null;
}
function onMouseMove(e) {
triggerClickHoverEvent("plothover", e);
}
function onClick(e) {
triggerClickHoverEvent("plotclick", e);
}
// trigger click or hover event (they send the same parameters so we share their code)
function triggerClickHoverEvent(eventname, e) {
var offset = plot.offset();
var canvasX = parseInt(e.pageX - offset.left);
var canvasY = parseInt(e.pageY - offset.top);
var item = findNearbySlice(canvasX, canvasY);
if (options.grid.autoHighlight) {
// clear auto-highlights
for (var i = 0; i < highlights.length; ++i) {
var h = highlights[i];
if (h.auto == eventname && !(item && h.series == item.series)) {
unhighlight(h.series);
}
}
}
// highlight the slice
if (item) {
highlight(item.series, eventname);
}
// trigger any hover bind events
var pos = { pageX: e.pageX, pageY: e.pageY };
target.trigger(eventname, [pos, item]);
}
function highlight(s, auto) {
//if (typeof s == "number") {
// s = series[s];
//}
var i = indexOfHighlight(s);
if (i == -1) {
highlights.push({ series: s, auto: auto });
plot.triggerRedrawOverlay();
} else if (!auto) {
highlights[i].auto = false;
}
}
function unhighlight(s) {
if (s == null) {
highlights = [];
plot.triggerRedrawOverlay();
}
//if (typeof s == "number") {
// s = series[s];
//}
var i = indexOfHighlight(s);
if (i != -1) {
highlights.splice(i, 1);
plot.triggerRedrawOverlay();
}
}
function indexOfHighlight(s) {
for (var i = 0; i < highlights.length; ++i) {
var h = highlights[i];
if (h.series == s)
return i;
}
return -1;
}
function drawOverlay(plot, octx) {
var options = plot.getOptions();
var radius = options.series.pie.radius > 1 ? options.series.pie.radius : maxRadius * options.series.pie.radius;
octx.save();
octx.translate(centerLeft, centerTop);
octx.scale(1, options.series.pie.tilt);
for (var i = 0; i < highlights.length; ++i) {
drawHighlight(highlights[i].series);
}
drawDonutHole(octx);
octx.restore();
function drawHighlight(series) {
if (series.angle <= 0 || isNaN(series.angle)) {
return;
}
//octx.fillStyle = parseColor(options.series.pie.highlight.color).scale(null, null, null, options.series.pie.highlight.opacity).toString();
octx.fillStyle = "rgba(255, 255, 255, " + options.series.pie.highlight.opacity + ")"; // this is temporary until we have access to parseColor
octx.beginPath();
if (Math.abs(series.angle - Math.PI * 2) > 0.000000001) {
octx.moveTo(0, 0); // Center of the pie
}
octx.arc(0, 0, radius, series.startAngle, series.startAngle + series.angle / 2, false);
octx.arc(0, 0, radius, series.startAngle + series.angle / 2, series.startAngle + series.angle, false);
octx.closePath();
octx.fill();
}
}
} // end init (plugin body)
// define pie specific options and their default values
var options = {
series: {
pie: {
show: false,
radius: "auto", // actual radius of the visible pie (based on full calculated radius if <=1, or hard pixel value)
innerRadius: 0, /* for donut */
startAngle: 3/2,
tilt: 1,
shadow: {
left: 5, // shadow left offset
top: 15, // shadow top offset
alpha: 0.02 // shadow alpha
},
offset: {
top: 0,
left: "auto"
},
stroke: {
color: "#fff",
width: 1
},
label: {
show: "auto",
formatter: function(label, slice) {
return "<div style='font-size:x-small;text-align:center;padding:2px;color:" + slice.color + ";'>" + label + "<br/>" + Math.round(slice.percent) + "%</div>";
}, // formatter function
radius: 1, // radius at which to place the labels (based on full calculated radius if <=1, or hard pixel value)
background: {
color: null,
opacity: 0
},
threshold: 0 // percentage at which to hide the label (i.e. the slice is too narrow)
},
combine: {
threshold: -1, // percentage at which to combine little slices into one larger slice
color: null, // color to give the new slice (auto-generated if null)
label: "Other" // label to give the new slice
},
highlight: {
//color: "#fff", // will add this functionality once parseColor is available
opacity: 0.5
}
}
}
};
$.plot.plugins.push({
init: init,
options: options,
name: "pie",
version: "1.1"
});
})(jQuery);

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,284 @@
"use strict";
$(document).ready(function() {
//area chart
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
]);
var options = {
vAxis: { minValue: 0 },
colors: ['#11c15b', '#ff5252']
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_area'));
chart.draw(data, options);
}
//stacking area chart
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawChartStacking);
function drawChartStacking() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
]);
var options_stacked = {
isStacked: true,
height: 300,
legend: { position: 'top', maxLines: 3 },
vAxis: { minValue: 0 },
colors: ['#11c15b', '#536dfe']
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_stacking'));
chart.draw(data, options_stacked);
}
//BAR CHART
google.charts.load('current', { packages: ['corechart', 'bar'] });
google.charts.setOnLoadCallback(drawStacked);
function drawStacked() {
var data = google.visualization.arrayToDataTable([
['City', '2010 Population', '2000 Population'],
['New York City, NY', 8175000, 8008000],
['Los Angeles, CA', 3792000, 3694000],
['Chicago, IL', 2695000, 2896000],
['Houston, TX', 2099000, 1953000],
['Philadelphia, PA', 1526000, 1517000]
]);
var options = {
title: 'Population of Largest U.S. Cities',
chartArea: { width: '50%' },
isStacked: true,
hAxis: {
title: 'Total Population',
minValue: 0,
},
vAxis: {
title: 'City'
},
colors: ['#11c15b', '#448aff']
};
var chart = new google.visualization.BarChart(document.getElementById('chart_bar'));
chart.draw(data, options);
}
//Bubble Chart
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawSeriesChart);
function drawSeriesChart() {
var data = google.visualization.arrayToDataTable([
['ID', 'Life Expectancy', 'Fertility Rate', 'Region', 'Population'],
['CAN', 80.66, 1.67, 'North America', 33739900],
['DEU', 79.84, 1.36, 'Europe', 81902307],
['DNK', 78.6, 1.84, 'Europe', 5523095],
['EGY', 72.73, 2.78, 'Middle East', 79716203],
['GBR', 80.05, 2, 'Europe', 61801570],
['IRN', 72.49, 1.7, 'Middle East', 73137148],
['IRQ', 68.09, 4.77, 'Middle East', 31090763],
['ISR', 81.55, 2.96, 'Middle East', 7485600],
['RUS', 68.6, 1.54, 'Europe', 141850000],
['USA', 78.09, 2.05, 'North America', 307007000]
]);
var options = {
title: 'Correlation between life expectancy, fertility rate ' +
'and population of some world countries (2010)',
hAxis: { title: 'Life Expectancy' },
vAxis: { title: 'Fertility Rate' },
bubble: { textStyle: { fontSize: 11 } },
colors: ['#11c15b', '#448aff', '#ff5252']
};
var chart = new google.visualization.BubbleChart(document.getElementById('chart_bubble'));
chart.draw(data, options);
}
//Candlestick charts
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawChartCandlestick);
function drawChartCandlestick() {
var dataCandlestick = google.visualization.arrayToDataTable([
['Mon', 20, 28, 38, 45],
['Tue', 31, 38, 55, 66],
['Wed', 50, 55, 77, 80],
['Thu', 77, 77, 66, 50],
['Fri', 68, 66, 22, 15]
// Treat first row as data as well.
], true);
var optionsCandlestick = {
legend: 'none',
colors: ['#11c15b']
};
var chart = new google.visualization.CandlestickChart(document.getElementById('chart_Candlestick'));
chart.draw(dataCandlestick, optionsCandlestick);
}
//Waterfall charts
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawChartWaterfall);
function drawChartWaterfall() {
var dataWaterfall = google.visualization.arrayToDataTable([
['Mon', 28, 28, 38, 38],
['Tue', 38, 38, 55, 55],
['Wed', 55, 55, 77, 77],
['Thu', 77, 77, 66, 66],
['Fri', 66, 66, 22, 22]
// Treat the first row as data.
], true);
var optionsWaterfall = {
legend: 'none',
bar: { groupWidth: '100%' }, // Remove space between bars.
candlestick: {
fallingColor: { strokeWidth: 0, fill: '#ff5252' }, // red
risingColor: { strokeWidth: 0, fill: '#11c15b' } // green
}
};
var chart = new google.visualization.CandlestickChart(document.getElementById('chart_Waterfall'));
chart.draw(dataWaterfall, optionsWaterfall);
}
//Combo chart
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
// Some raw data (not necessarily accurate)
var data = google.visualization.arrayToDataTable([
['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', 'Average'],
['2004/05', 165, 938, 522, 998, 450, 614.6],
['2005/06', 135, 1120, 599, 1268, 288, 682],
['2006/07', 157, 1167, 587, 807, 397, 623],
['2007/08', 139, 1110, 615, 968, 215, 609.4],
['2008/09', 136, 691, 629, 1026, 366, 569.6]
]);
var options = {
title: 'Monthly Coffee Production by Country',
vAxis: { title: 'Cups' },
hAxis: { title: 'Month' },
seriesType: 'bars',
series: { 5: { type: 'line' } },
colors: ['#448aff', '#11c15b', '#ffe100', '#FE8A7D', '#69CEC6', '#ff5252']
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_Combo'));
chart.draw(data, options);
}
//Donut chart
google.charts.load("current", { packages: ["corechart"] });
google.charts.setOnLoadCallback(drawChartDonut);
function drawChartDonut() {
var dataDonut = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var optionsDonut = {
title: 'My Daily Activities',
pieHole: 0.4,
colors: ['#448aff', '#11c15b', '#ffe100', '#FE8A7D', '#ff5252']
};
var chart = new google.visualization.PieChart(document.getElementById('chart_Donut'));
chart.draw(dataDonut, optionsDonut);
}
//EXPLOADING A SLICE CHART
google.charts.load("current", { packages: ["corechart"] });
google.charts.setOnLoadCallback(drawChartExploading);
function drawChartExploading() {
var dataExploading = google.visualization.arrayToDataTable([
['Language', 'Speakers (in millions)'],
['Assamese', 13],
['Bengali', 83],
['Bodo', 1.4],
['Dogri', 2.3],
['Gujarati', 46],
['Hindi', 300],
['Kannada', 38],
['Kashmiri', 5.5],
['Konkani', 5],
['Maithili', 20],
['Malayalam', 33],
['Manipuri', 1.5],
['Marathi', 72],
['Nepali', 2.9],
['Oriya', 33]
]);
var optionsExploading = {
title: 'Language',
legend: 'none',
pieSliceText: 'label',
slices: {
4: { offset: 0.2 },
12: { offset: 0.3 },
14: { offset: 0.4 },
15: { offset: 0.5 },
},
colors: ['#448aff', '#11c15b', '#ffe100', '#FE8A7D', '#69CEC6', '#ff5252']
};
var chart = new google.visualization.PieChart(document.getElementById('chart_Exploading'));
chart.draw(dataExploading, optionsExploading);
}
//Slice Visibility Threshold
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawChartThreshold);
function drawChartThreshold() {
var dataThreshold = new google.visualization.DataTable();
dataThreshold.addColumn('string', 'Pizza');
dataThreshold.addColumn('number', 'Populartiy');
dataThreshold.addRows([
['Pepperoni', 33],
['Hawaiian', 26],
['Mushroom', 22],
['Sausage', 10], // Below limit.
['Anchovies', 9] // Below limit.
]);
var optionsThreshold = {
title: 'Popularity of Types of Pizza',
sliceVisibilityThreshold: .2,
colors: ['#448aff', '#11c15b', '#ff5252', '#ffe100']
};
var chart = new google.visualization.PieChart(document.getElementById('chart_Threshold'));
chart.draw(dataThreshold, optionsThreshold);
}
});

View File

@@ -0,0 +1,26 @@
/*!jQuery Knob*/(function(factory){if(typeof exports==='object'){module.exports=factory(require('jquery'));}else if(typeof define==='function'&&define.amd){define(['jquery'],factory);}else{factory(jQuery);}}(function($){"use strict";var k={},max=Math.max,min=Math.min;k.c={};k.c.d=$(document);k.c.t=function(e){return e.originalEvent.touches.length-1;};k.o=function(){var s=this;this.o=null;this.$=null;this.i=null;this.g=null;this.v=null;this.cv=null;this.x=0;this.y=0;this.w=0;this.h=0;this.$c=null;this.c=null;this.t=0;this.isInit=false;this.fgColor=null;this.pColor=null;this.dH=null;this.cH=null;this.eH=null;this.rH=null;this.scale=1;this.relative=false;this.relativeWidth=false;this.relativeHeight=false;this.$div=null;this.run=function(){var cf=function(e,conf){var k;for(k in conf){s.o[k]=conf[k];}
s._carve().init();s._configure()._draw();};if(this.$.data('kontroled'))return;this.$.data('kontroled',true);this.extend();this.o=$.extend({min:this.$.data('min')!==undefined?this.$.data('min'):0,max:this.$.data('max')!==undefined?this.$.data('max'):100,stopper:true,readOnly:this.$.data('readonly')||(this.$.attr('readonly')==='readonly'),cursor:this.$.data('cursor')===true&&30||this.$.data('cursor')||0,thickness:this.$.data('thickness')&&Math.max(Math.min(this.$.data('thickness'),1),0.01)||0.35,lineCap:this.$.data('linecap')||'butt',width:this.$.data('width')||200,height:this.$.data('height')||200,displayInput:this.$.data('displayinput')==null||this.$.data('displayinput'),displayPrevious:this.$.data('displayprevious'),fgColor:this.$.data('fgcolor')||'#87CEEB',inputColor:this.$.data('inputcolor'),font:this.$.data('font')||'Arial',fontWeight:this.$.data('font-weight')||'bold',inline:false,step:this.$.data('step')||1,rotation:this.$.data('rotation'),draw:null,change:null,cancel:null,release:null,format:function(v){return v;},parse:function(v){return parseFloat(v);}},this.o);this.o.flip=this.o.rotation==='anticlockwise'||this.o.rotation==='acw';if(!this.o.inputColor){this.o.inputColor=this.o.fgColor;}
if(this.$.is('fieldset')){this.v={};this.i=this.$.find('input');this.i.each(function(k){var $this=$(this);s.i[k]=$this;s.v[k]=s.o.parse($this.val());$this.bind('change blur',function(){var val={};val[k]=$this.val();s.val(s._validate(val));});});this.$.find('legend').remove();}else{this.i=this.$;this.v=this.o.parse(this.$.val());this.v===''&&(this.v=this.o.min);this.$.bind('change blur',function(){s.val(s._validate(s.o.parse(s.$.val())));});}
!this.o.displayInput&&this.$.hide();this.$c=$(document.createElement('canvas')).attr({width:this.o.width,height:this.o.height});this.$div=$('<div style="'
+(this.o.inline?'display:inline;':'')
+'width:'+this.o.width+'px;height:'+this.o.height+'px;'
+'"></div>');this.$.wrap(this.$div).before(this.$c);this.$div=this.$.parent();if(typeof G_vmlCanvasManager!=='undefined'){G_vmlCanvasManager.initElement(this.$c[0]);}
this.c=this.$c[0].getContext?this.$c[0].getContext('2d'):null;if(!this.c){throw{name:"CanvasNotSupportedException",message:"Canvas not supported. Please use excanvas on IE8.0.",toString:function(){return this.name+": "+this.message}}}
this.scale=(window.devicePixelRatio||1)/(this.c.webkitBackingStorePixelRatio||this.c.mozBackingStorePixelRatio||this.c.msBackingStorePixelRatio||this.c.oBackingStorePixelRatio||this.c.backingStorePixelRatio||1);this.relativeWidth=this.o.width%1!==0&&this.o.width.indexOf('%');this.relativeHeight=this.o.height%1!==0&&this.o.height.indexOf('%');this.relative=this.relativeWidth||this.relativeHeight;this._carve();if(this.v instanceof Object){this.cv={};this.copy(this.v,this.cv);}else{this.cv=this.v;}
this.$.bind("configure",cf).parent().bind("configure",cf);this._listen()._configure()._xy().init();this.isInit=true;this.$.val(this.o.format(this.v));this._draw();return this;};this._carve=function(){if(this.relative){var w=this.relativeWidth?this.$div.parent().width()*parseInt(this.o.width)/100:this.$div.parent().width(),h=this.relativeHeight?this.$div.parent().height()*parseInt(this.o.height)/100:this.$div.parent().height();this.w=this.h=Math.min(w,h);}else{this.w=this.o.width;this.h=this.o.height;}
this.$div.css({'width':this.w+'px','height':this.h+'px'});this.$c.attr({width:this.w,height:this.h});if(this.scale!==1){this.$c[0].width=this.$c[0].width*this.scale;this.$c[0].height=this.$c[0].height*this.scale;this.$c.width(this.w);this.$c.height(this.h);}
return this;};this._draw=function(){var d=true;s.g=s.c;s.clear();s.dH&&(d=s.dH());d!==false&&s.draw();};this._touch=function(e){var touchMove=function(e){var v=s.xy2val(e.originalEvent.touches[s.t].pageX,e.originalEvent.touches[s.t].pageY);if(v==s.cv)return;if(s.cH&&s.cH(v)===false)return;s.change(s._validate(v));s._draw();};this.t=k.c.t(e);touchMove(e);k.c.d.bind("touchmove.k",touchMove).bind("touchend.k",function(){k.c.d.unbind('touchmove.k touchend.k');s.val(s.cv);});return this;};this._mouse=function(e){var mouseMove=function(e){var v=s.xy2val(e.pageX,e.pageY);if(v==s.cv)return;if(s.cH&&(s.cH(v)===false))return;s.change(s._validate(v));s._draw();};mouseMove(e);k.c.d.bind("mousemove.k",mouseMove).bind("keyup.k",function(e){if(e.keyCode===27){k.c.d.unbind("mouseup.k mousemove.k keyup.k");if(s.eH&&s.eH()===false)
return;s.cancel();}}).bind("mouseup.k",function(e){k.c.d.unbind('mousemove.k mouseup.k keyup.k');s.val(s.cv);});return this;};this._xy=function(){var o=this.$c.offset();this.x=o.left;this.y=o.top;return this;};this._listen=function(){if(!this.o.readOnly){this.$c.bind("mousedown",function(e){e.preventDefault();s._xy()._mouse(e);}).bind("touchstart",function(e){e.preventDefault();s._xy()._touch(e);});this.listen();}else{this.$.attr('readonly','readonly');}
if(this.relative){$(window).resize(function(){s._carve().init();s._draw();});}
return this;};this._configure=function(){if(this.o.draw)this.dH=this.o.draw;if(this.o.change)this.cH=this.o.change;if(this.o.cancel)this.eH=this.o.cancel;if(this.o.release)this.rH=this.o.release;if(this.o.displayPrevious){this.pColor=this.h2rgba(this.o.fgColor,"0.4");this.fgColor=this.h2rgba(this.o.fgColor,"0.6");}else{this.fgColor=this.o.fgColor;}
return this;};this._clear=function(){this.$c[0].width=this.$c[0].width;};this._validate=function(v){var val=(~~(((v<0)?-0.5:0.5)+(v/this.o.step)))*this.o.step;return Math.round(val*100)/100;};this.listen=function(){};this.extend=function(){};this.init=function(){};this.change=function(v){};this.val=function(v){};this.xy2val=function(x,y){};this.draw=function(){};this.clear=function(){this._clear();};this.h2rgba=function(h,a){var rgb;h=h.substring(1,7);rgb=[parseInt(h.substring(0,2),16),parseInt(h.substring(2,4),16),parseInt(h.substring(4,6),16)];return "rgba("+rgb[0]+","+rgb[1]+","+rgb[2]+","+a+")";};this.copy=function(f,t){for(var i in f){t[i]=f[i];}};};k.Dial=function(){k.o.call(this);this.startAngle=null;this.xy=null;this.radius=null;this.lineWidth=null;this.cursorExt=null;this.w2=null;this.PI2=2*Math.PI;this.extend=function(){this.o=$.extend({bgColor:this.$.data('bgcolor')||'#EEEEEE',angleOffset:this.$.data('angleoffset')||0,angleArc:this.$.data('anglearc')||360,inline:true},this.o);};this.val=function(v,triggerRelease){if(null!=v){v=this.o.parse(v);if(triggerRelease!==false&&v!=this.v&&this.rH&&this.rH(v)===false){return;}
this.cv=this.o.stopper?max(min(v,this.o.max),this.o.min):v;this.v=this.cv;this.$.val(this.o.format(this.v));this._draw();}else{return this.v;}};this.xy2val=function(x,y){var a,ret;a=Math.atan2(x-(this.x+this.w2),-(y-this.y-this.w2))-this.angleOffset;if(this.o.flip){a=this.angleArc-a-this.PI2;}
if(this.angleArc!=this.PI2&&(a<0)&&(a>-0.5)){a=0;}else if(a<0){a+=this.PI2;}
ret=(a*(this.o.max-this.o.min)/this.angleArc)+this.o.min;this.o.stopper&&(ret=max(min(ret,this.o.max),this.o.min));return ret;};this.listen=function(){var s=this,mwTimerStop,mwTimerRelease,mw=function(e){e.preventDefault();var ori=e.originalEvent,deltaX=ori.detail||ori.wheelDeltaX,deltaY=ori.detail||ori.wheelDeltaY,v=s._validate(s.o.parse(s.$.val()))
+(deltaX>0||deltaY>0?s.o.step:deltaX<0||deltaY<0?-s.o.step:0);v=max(min(v,s.o.max),s.o.min);s.val(v,false);if(s.rH){clearTimeout(mwTimerStop);mwTimerStop=setTimeout(function(){s.rH(v);mwTimerStop=null;},100);if(!mwTimerRelease){mwTimerRelease=setTimeout(function(){if(mwTimerStop)
s.rH(v);mwTimerRelease=null;},200);}}},kval,to,m=1,kv={37:-s.o.step,38:s.o.step,39:s.o.step,40:-s.o.step};this.$.bind("keydown",function(e){var kc=e.keyCode;if(kc>=96&&kc<=105){kc=e.keyCode=kc-48;}
kval=parseInt(String.fromCharCode(kc));if(isNaN(kval)){(kc!==13)&&kc!==8&&kc!==9&&kc!==189&&(kc!==190||s.$.val().match(/\./))&&e.preventDefault();if($.inArray(kc,[37,38,39,40])>-1){e.preventDefault();var v=s.o.parse(s.$.val())+kv[kc]*m;s.o.stopper&&(v=max(min(v,s.o.max),s.o.min));s.change(s._validate(v));s._draw();to=window.setTimeout(function(){m*=2;},30);}}}).bind("keyup",function(e){if(isNaN(kval)){if(to){window.clearTimeout(to);to=null;m=1;s.val(s.$.val());}}else{(s.$.val()>s.o.max&&s.$.val(s.o.max))||(s.$.val()<s.o.min&&s.$.val(s.o.min));}});this.$c.bind("mousewheel DOMMouseScroll",mw);this.$.bind("mousewheel DOMMouseScroll",mw);};this.init=function(){if(this.v<this.o.min||this.v>this.o.max){this.v=this.o.min;}
this.$.val(this.v);this.w2=this.w/2;this.cursorExt=this.o.cursor/100;this.xy=this.w2*this.scale;this.lineWidth=this.xy*this.o.thickness;this.lineCap=this.o.lineCap;this.radius=this.xy-this.lineWidth/2;this.o.angleOffset&&(this.o.angleOffset=isNaN(this.o.angleOffset)?0:this.o.angleOffset);this.o.angleArc&&(this.o.angleArc=isNaN(this.o.angleArc)?this.PI2:this.o.angleArc);this.angleOffset=this.o.angleOffset*Math.PI/180;this.angleArc=this.o.angleArc*Math.PI/180;this.startAngle=1.5*Math.PI+this.angleOffset;this.endAngle=1.5*Math.PI+this.angleOffset+this.angleArc;var s=max(String(Math.abs(this.o.max)).length,String(Math.abs(this.o.min)).length,2)+2;this.o.displayInput&&this.i.css({'width':((this.w/2+4)>>0)+'px','height':((this.w/3)>>0)+'px','position':'absolute','vertical-align':'middle','margin-top':((this.w/3)>>0)+'px','margin-left':'-'+((this.w*3/4+2)>>0)+'px','border':0,'background':'none','font':this.o.fontWeight+' '+((this.w/s)>>0)+'px '+this.o.font,'text-align':'center','color':this.o.inputColor||this.o.fgColor,'padding':'0px','-webkit-appearance':'none'})||this.i.css({'width':'0px','visibility':'hidden'});};this.change=function(v){this.cv=v;this.$.val(this.o.format(v));};this.angle=function(v){return(v-this.o.min)*this.angleArc/(this.o.max-this.o.min);};this.arc=function(v){var sa,ea;v=this.angle(v);if(this.o.flip){sa=this.endAngle+0.00001;ea=sa-v-0.00001;}else{sa=this.startAngle-0.00001;ea=sa+v+0.00001;}
this.o.cursor&&(sa=ea-this.cursorExt)&&(ea=ea+this.cursorExt);return{s:sa,e:ea,d:this.o.flip&&!this.o.cursor};};this.draw=function(){var c=this.g,a=this.arc(this.cv),pa,r=1;c.lineWidth=this.lineWidth;c.lineCap=this.lineCap;if(this.o.bgColor!=="none"){c.beginPath();c.strokeStyle=this.o.bgColor;c.arc(this.xy,this.xy,this.radius,this.endAngle-0.00001,this.startAngle+0.00001,true);c.stroke();}
if(this.o.displayPrevious){pa=this.arc(this.v);c.beginPath();c.strokeStyle=this.pColor;c.arc(this.xy,this.xy,this.radius,pa.s,pa.e,pa.d);c.stroke();r=this.cv==this.v;}
c.beginPath();c.strokeStyle=r?this.o.fgColor:this.fgColor;c.arc(this.xy,this.xy,this.radius,a.s,a.e,a.d);c.stroke();};this.cancel=function(){this.val(this.v);};};$.fn.dial=$.fn.knob=function(o){return this.each(function(){var d=new k.Dial();d.o=o;d.$=$(this);d.run();}).parent();};}));

View File

@@ -0,0 +1,3 @@
"use strict";$(window).on('resize',function(){$(".dial").knob({draw:function(){if(this.$.data('skin')=='tron'){this.cursorExt=0.3;var a=this.arc(this.cv),pa,r=1;this.g.lineWidth=this.lineWidth;if(this.o.displayPrevious){pa=this.arc(this.v);this.g.beginPath();this.g.strokeStyle=this.pColor;this.g.arc(this.xy,this.xy,this.radius-this.lineWidth,pa.s,pa.e,pa.d);this.g.stroke();}
this.g.beginPath();this.g.strokeStyle=r?this.o.fgColor:this.fgColor;this.g.arc(this.xy,this.xy,this.radius-this.lineWidth,a.s,a.e,a.d);this.g.stroke();this.g.lineWidth=2;this.g.beginPath();this.g.strokeStyle=this.o.fgColor;this.g.arc(this.xy,this.xy,this.radius-this.lineWidth+1+this.lineWidth*2/3,0,2*Math.PI,false);this.g.stroke();return false;}}});});$(document).ready(function(){$(".dial").knob({draw:function(){if(this.$.data('skin')=='tron'){this.cursorExt=0.3;var a=this.arc(this.cv),pa,r=1;this.g.lineWidth=this.lineWidth;if(this.o.displayPrevious){pa=this.arc(this.v);this.g.beginPath();this.g.strokeStyle=this.pColor;this.g.arc(this.xy,this.xy,this.radius-this.lineWidth,pa.s,pa.e,pa.d);this.g.stroke();}
this.g.beginPath();this.g.strokeStyle=r?this.o.fgColor:this.fgColor;this.g.arc(this.xy,this.xy,this.radius-this.lineWidth,a.s,a.e,a.d);this.g.stroke();this.g.lineWidth=2;this.g.beginPath();this.g.strokeStyle=this.o.fgColor;this.g.arc(this.xy,this.xy,this.radius-this.lineWidth+1+this.lineWidth*2/3,0,2*Math.PI,false);this.g.stroke();return false;}}});});

View File

@@ -0,0 +1,233 @@
"use strict";
setTimeout(function(){
$(document).ready(function() {
lineChart();
areaChart();
donutChart();
$(window).on('resize',function() {
window.lineChart.redraw();
window.areaChart.redraw();
window.donutChart.redraw();
});
});
/*Line chart*/
function lineChart() {
window.lineChart = Morris.Line({
element: 'line-example',
data: [
{ y: '2006', a: 100, b: 90 },
{ y: '2007', a: 75, b: 65 },
{ y: '2008', a: 50, b: 40 },
{ y: '2009', a: 75, b: 65 },
{ y: '2010', a: 50, b: 40 },
{ y: '2011', a: 75, b: 65 },
{ y: '2012', a: 100, b: 90 }
],
xkey: 'y',
redraw: true,
ykeys: ['a', 'b'],
hideHover: 'auto',
labels: ['Series A', 'Series B'],
lineColors: ['#B4C1D7', '#FF9F55']
});
}
/*Area chart*/
function areaChart() {
window.areaChart = Morris.Area({
element: 'area-example',
data: [
{ y: '2006', a: 100, b: 90 },
{ y: '2007', a: 75, b: 65 },
{ y: '2008', a: 50, b: 40 },
{ y: '2009', a: 75, b: 65 },
{ y: '2010', a: 50, b: 40 },
{ y: '2011', a: 75, b: 65 },
{ y: '2012', a: 100, b: 90 }
],
xkey: 'y',
resize: true,
redraw: true,
ykeys: ['a', 'b'],
labels: ['Series A', 'Series B'],
lineColors: ['#93EBDD', '#64DDBB']
});
}
/*Donut chart*/
function donutChart() {
window.areaChart = Morris.Donut({
element: 'donut-example',
redraw: true,
data: [
{ label: "Download Sales", value: 2 },
{ label: "In-Store Sales", value: 50 },
{ label: "Mail-Order Sales", value: 20 }
],
colors: ['#5FBEAA', '#34495E', '#FF9F55']
});
}
// Morris bar chart
Morris.Bar({
element: 'morris-bar-chart',
data: [{
y: '2006',
a: 100,
b: 90,
c: 60
}, {
y: '2007',
a: 75,
b: 65,
c: 40
}, {
y: '2008',
a: 50,
b: 40,
c: 30
}, {
y: '2009',
a: 75,
b: 65,
c: 40
}, {
y: '2010',
a: 50,
b: 40,
c: 30
}, {
y: '2011',
a: 75,
b: 65,
c: 40
}, {
y: '2012',
a: 100,
b: 90,
c: 40
}],
xkey: 'y',
ykeys: ['a', 'b', 'c'],
labels: ['A', 'B', 'C'],
barColors: ['#5FBEAA', '#5D9CEC', '#cCcCcC'],
hideHover: 'auto',
gridLineColor: '#eef0f2',
resize: true
});
// Extra chart
Morris.Area({
element: 'morris-extra-area',
data: [{
period: '2010',
iphone: 0,
ipad: 0,
itouch: 0
}, {
period: '2011',
iphone: 50,
ipad: 15,
itouch: 5
}, {
period: '2012',
iphone: 20,
ipad: 50,
itouch: 65
}, {
period: '2013',
iphone: 60,
ipad: 12,
itouch: 7
}, {
period: '2014',
iphone: 30,
ipad: 20,
itouch: 120
}, {
period: '2015',
iphone: 25,
ipad: 80,
itouch: 40
}, {
period: '2016',
iphone: 10,
ipad: 10,
itouch: 10
}
],
lineColors: ['#fb9678', '#7E81CB', '#01C0C8'],
xkey: 'period',
ykeys: ['iphone', 'ipad', 'itouch'],
labels: ['Site A', 'Site B', 'Site C'],
pointSize: 0,
lineWidth: 0,
resize: true,
fillOpacity: 0.8,
behaveLikeLine: true,
gridLineColor: '#5FBEAA',
hideHover: 'auto'
});
/*Site visit Chart*/
Morris.Area({
element: 'morris-site-visit',
data: [{
period: '2010',
SiteA: 0,
SiteB: 0,
}, {
period: '2011',
SiteA: 130,
SiteB: 100,
}, {
period: '2012',
SiteA: 80,
SiteB: 60,
}, {
period: '2013',
SiteA: 70,
SiteB: 200,
}, {
period: '2014',
SiteA: 180,
SiteB: 150,
}, {
period: '2015',
SiteA: 105,
SiteB: 90,
}, {
period: '2016',
SiteA: 250,
SiteB: 150,
}],
xkey: 'period',
ykeys: ['SiteA', 'SiteB'],
labels: ['Site A', 'Site B'],
pointSize: 0,
fillOpacity: 0.4,
pointStrokeColors: ['#b4becb', '#01c0c8'],
behaveLikeLine: true,
gridLineColor: '#e0e0e0',
lineWidth: 0,
smooth: false,
hideHover: 'auto',
lineColors: ['#b4becb', '#01c0c8'],
resize: true
});
},350);

View File

@@ -0,0 +1,35 @@
/* Inspired by Lee Byron's test data generator. */
function stream_layers(n, m, o) {
if (arguments.length < 3) o = 0;
function bump(a) {
var x = 1 / (.1 + Math.random()),
y = 2 * Math.random() - .5,
z = 10 / (.1 + Math.random());
for (var i = 0; i < m; i++) {
var w = (i / m - y) * z;
a[i] += x * Math.exp(-w * w);
}
}
return d3.range(n).map(function() {
var a = [], i;
for (i = 0; i < m; i++) a[i] = o + o * Math.random();
for (i = 0; i < 5; i++) bump(a);
return a.map(stream_index);
});
}
/* Another layer generator using gamma distributions. */
function stream_waves(n, m) {
return d3.range(n).map(function(i) {
return d3.range(m).map(function(j) {
var x = 20 * j / m - i / 3;
return 2 * x * Math.exp(-.5 * x);
}).map(stream_index);
});
}
function stream_index(d, i) {
return {x: i, y: Math.max(0, d)};
}

View File

@@ -0,0 +1,296 @@
"use strict";
$(document).ready(function() {
/*Line chart start*/
/*These lines are all chart setup. Pick and choose which chart features you want to utilize. */
nv.addGraph(function() {
var chart = nv.models.lineChart()
.margin({ top: 50 })
.margin({ left: 100 }) //Adjust chart margins to give the x-axis some breathing room.
.useInteractiveGuideline(true) //We want nice looking tooltips and a guideline!
.showLegend(true) //Show the legend, allowing users to turn on/off line series.
.showYAxis(true) //Show the y-axis
.showXAxis(true) //Show the x-axis
;
chart.xAxis //Chart x-axis settings
.axisLabel('Time (ms)')
.tickFormat(d3.format(',r'));
chart.yAxis //Chart y-axis settings
.axisLabel('Voltage (v)')
.tickFormat(d3.format('.02f'));
/* Done setting the chart up? Time to render it!*/
var myData = sinAndCos(); //You need data...
d3.select('#linechart').append('svg') //Select the <svg> element you want to render the chart in.
.datum(myData) //Populate the <svg> element with chart data...
.call(chart); //Finally, render the chart!
//Update the chart when window resizes.
nv.utils.windowResize(function() { chart.update() });
return chart;
});
/**************************************
* Simple test data generator
*/
function sinAndCos() {
var sin = [],
sin2 = [],
cos = [];
//Data is represented as an array of {x,y} pairs.
for (var i = 0; i < 100; i++) {
sin.push({ x: i, y: Math.sin(i / 10) });
sin2.push({ x: i, y: Math.sin(i / 10) * 0.25 + 0.5 });
cos.push({ x: i, y: .5 * Math.cos(i / 10) });
}
//Line chart data should be sent as an array of series objects.
return [{
values: sin, //values - represents the array of {x,y} data points
key: 'Sine Wave', //key - the name of the series.
color: '#4C5667' //color - optional: choose your own line color.
}, {
values: cos,
key: 'Cosine Wave',
color: '#11c15b'
}, {
values: sin2,
key: 'Another sine wave',
color: '#ff5252',
area: true //area - set to true if you want this line to turn into a filled area chart.
}];
}
/*Bar chart start*/
nv.addGraph(function() {
var chart = nv.models.discreteBarChart()
.x(function(d) {
return d.label }) //Specify the data accessors.
.y(function(d) {
return d.value })
.staggerLabels(true) //Too many bars and not enough room? Try staggering labels.
/* .tooltips(false) */ //Don't show tooltips
.showValues(true) //...instead, show the bar value right on top of each bar.
/* .transitionDuration(350)*/
;
d3.select('#barchart').append('svg')
.datum(barData())
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
//Each bar represents a single discrete quantity.
function barData() {
return [{
key: "Cumulative Return",
values: [{
"label": "A",
"value": -29.765957771107,
"color": "#FF9F55"
}, {
"label": "B",
"value": 10,
"color": "#FEC811"
}, {
"label": "C",
"value": 32.807804682612,
"color": "#4C5667"
}, {
"label": "D",
"value": 196.45946739256,
"color": "#01C0C8"
}, {
"label": "E",
"value": 0.25434030906893,
"color": "#FF0084"
}, {
"label": "F",
"value": -98.079782601442,
"color": "#007BB6"
}, {
"label": "G",
"value": -13.925743130903,
"color": "#3b5998"
}, {
"label": "H",
"value": -5.1387322875705,
"color": "#B2E0A2"
}]
}]
}
/*Scatter chart start*/
nv.addGraph(function() {
var chart = nv.models.scatterChart()
.showDistX(true) //showDist, when true, will display those little distribution lines on the axis.
.showDistY(true)
/* .transitionDuration(350)*/
.color(d3.scale.category10().range());
//Configure how the tooltip looks.
/* chart.tooltipContent(function(key) {
return '<h3>' + key + '</h3>';
});*/
//Axis settings
chart.xAxis.tickFormat(d3.format('.02f'));
chart.yAxis.tickFormat(d3.format('.02f'));
//We want to show shapes other than circles.
/*chart.scatter.onlyCircles(false);*/
var myData = randomData(4, 40);
d3.select('#scatterchart').append('svg')
.datum(myData)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
/**************************************
* Simple test data generator
*/
function randomData(groups, points) { //# groups,# points per group
var data = [],
shapes = ['circle', 'cross', 'triangle-up', 'triangle-down', 'diamond', 'square'],
random = d3.random.normal();
for (var i = 0; i < groups; i++) {
data.push({
key: 'Group ' + i,
values: []
});
for (var j = 0; j < points; j++) {
data[i].values.push({
x: random(),
y: random(),
size: Math.random() //Configure the size of each scatter point
,
shape: (Math.random() > 0.95) ? shapes[j % 6] : "circle" //Configure the shape of each scatter point.
});
}
}
return data;
}
/*Stacked/Group chart start*/
nv.addGraph(function() {
var chart = nv.models.multiBarChart()
/* .transitionDuration(350)*/
.reduceXTicks(true) //If 'false', every single x-axis tick label will be rendered.
.rotateLabels(0) //Angle to rotate x-axis labels.
.showControls(true) //Allow user to switch between 'Grouped' and 'Stacked' mode.
.groupSpacing(0.1) //Distance between each group of bars.
;
chart.xAxis
.tickFormat(d3.format(',f'));
chart.yAxis
.tickFormat(d3.format(',.1f'));
d3.select('#stackedchart').append('svg')
.datum(stackedData())
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
//Generate some nice data.
function stackedData() {
return stream_layers(3, 10 + Math.random() * 100, .1).map(function(data, i) {
return {
key: 'Stream #' + i,
values: data
};
});
}
/*Regular Pie chart*/
nv.addGraph(function() {
var chart = nv.models.pieChart()
.x(function(d) {
return d.label })
.y(function(d) {
return d.value })
.showLabels(true);
d3.select("#piechart").append('svg')
.datum(pieData())
.transition().duration(350)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
//Donut chart example
nv.addGraph(function() {
var chart = nv.models.pieChart()
.x(function(d) {
return d.label })
.y(function(d) {
return d.value })
.showLabels(true) //Display pie labels
.labelThreshold(.05) //Configure the minimum slice size for labels to show up
.labelType("percent") //Configure what type of data to show in the label. Can be "key", "value" or "percent"
.donut(true) //Turn on Donut mode. Makes pie chart look tasty!
.donutRatio(0.35) //Configure how big you want the donut hole size to be.
;
d3.select("#donutchart").append('svg')
.datum(pieData())
.transition().duration(350)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
//Pie chart example data. Note how there is only a single array of key-value pairs.
function pieData() {
return [{
"label": "One",
"value": 29.765957771107,
"color": "#FB9678"
}, {
"label": "Two",
"value": 0,
"color": "#FF9F55"
}, {
"label": "Three",
"value": 32.807804682612,
"color": "#01C0C8"
}, {
"label": "Four",
"value": 196.45946739256,
"color": "#00C292"
}, {
"label": "Five",
"value": 0.19434030906893,
"color": "#4F5467"
}, {
"label": "Six",
"value": 98.079782601442,
"color": "#4F5467"
}, {
"label": "Seven",
"value": 13.925743130903,
"color": "#000000"
}, {
"label": "Eight",
"value": 5.1387322875705,
"color": "#CB2027"
}];
}
});

View File

@@ -0,0 +1,71 @@
"use strict";
$(document).ready(function() {
setTimeout(function(){
$(window).resize(function() {
barChart();
updatingChart();
dataChart();
});
barChart();
updatingChart();
dataChart();
},350);
/* bar chart */
function barChart() {
$(".bar-colours-1").peity("bar", {
fill: ["rgba(68, 138, 255, 0.65)", "rgba(255, 82, 82, 0.65)"]
});
$(".bar-colours-2").peity("bar", {
fill: ["rgba(83, 109, 254, 0.65)", "rgba(17, 193, 91, 0.65)"]
});
}
function updatingChart() {
/*updating chart*/
var updatingChart = $(".updating-chart").peity("line", { fill: "rgba(0, 188, 212, 0.4)", stroke: "rgb(0, 188, 212)" });
var updatingChart1 = $(".updating-chart1").peity("line", { fill: "rgba(17, 193, 91, 0.32)", stroke: "rgba(17, 193, 91, 0.90)" });
var updatingChart2 = $(".updating-chart2").peity("line", { fill: "rgba(68, 138, 255, 0.45)", stroke: "rgba(68, 138, 255, 0.91)" });
var updatingChart3 = $(".updating-chart3").peity("line", { fill: "rgba(83, 109, 254, 0.39)", stroke: "rgba(83, 109, 254, 0.94)" });
setInterval(function() {
var random = Math.round(Math.random() * 10)
var values = updatingChart.text().split(",")
values.shift()
values.push(random)
updatingChart
.text(values.join(","))
.change()
}, 1000);
}
function dataChart() {
/*DATA-ATTRIBUTES CHARTS */
$(".data-attributes span").peity("donut");
/*Pie Charts*/
$("span.pie_1").peity("pie", {
fill: ["#ffe100", "#282256"]
});
$("span.pie_2").peity("pie", {
fill: ["#ff5252", "#2980B9"]
});
$("span.pie_3").peity("pie", {
fill: ["#785EDD", "#F6CD61"]
});
$("span.pie_4").peity("pie", {
fill: ["#EB9532", "#0F3057"]
});
$("span.pie_5").peity("pie", {
fill: ["#64DDBB", "#42729B"]
});
$("span.pie_6").peity("pie", {
fill: ["#97CE68", "#60646D"]
});
$("span.pie_7").peity("pie", {
fill: ["#00B5B5", "#517FA4"]
});
}
});

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,104 @@
"use strict";
$(document).ready(function() {
setTimeout(function(){
window.addEventListener('load', resizeGraph, false);
window.addEventListener('resize', resizeGraph, false);
function resizeGraph() {
/*Area chart*/
$("#areachart").html('');
var widchart = $("#areachart").width();
var graph = new Rickshaw.Graph({
element: document.querySelector("#areachart"),
width: widchart,
height: 200,
series: [{
color: 'rgba(0, 188, 212, 0.84)',
data: [
{ x: 0, y: 40 },
{ x: 1, y: 49 },
{ x: 2, y: 38 },
{ x: 3, y: 30 },
{ x: 4, y: 32 }
]
}]
});
graph.render();
/*multiple area chart*/
$("#multipleAreachart").html('');
var widMultiChart = $("#multipleAreachart").width();
var graph1 = new Rickshaw.Graph({
element: document.querySelector("#multipleAreachart"),
width: widMultiChart,
height: 200,
renderer: 'area',
stroke: true,
series: [{
data: [{ x: 0, y: 40 }, { x: 1, y: 49 }, { x: 2, y: 30 }],
color: 'rgba(68, 138, 255, 0.62)',
stroke: 'rgba(68, 138, 255, 0.45)'
}, {
data: [{ x: 0, y: 10 }, { x: 1, y: 25 }, { x: 2, y: 45 }],
color: 'rgba(0, 188, 212, 0.52)',
stroke: 'rgba(0, 188, 212, 0.92)'
}]
});
graph1.render();
/*Multiple Bars*/
$("#barchart").html('');
var graph2 = new Rickshaw.Graph({
element: document.querySelector("#barchart"),
renderer: 'bar',
stack: false,
series: [{
data: [{ x: 0, y: 40 }, { x: 1, y: 49 }, { x: 2, y: 30 }],
color: '#536dfe'
}, {
data: [{ x: 0, y: 20 }, { x: 1, y: 24 }, { x: 2, y: 20 }],
color: '#11c15b'
}]
});
graph2.render();
/*Stacked Bars*/
$("#stackedchart").html('');
var graph3 = new Rickshaw.Graph({
element: document.querySelector("#stackedchart"),
renderer: 'bar',
series: [{
data: [{ x: 0, y: 40 }, { x: 1, y: 49 }, { x: 2, y: 60 }, { x: 3, y: 20 }, { x: 4, y: 80 }],
color: '#536dfe'
}, {
data: [{ x: 0, y: 20 }, { x: 1, y: 24 }, { x: 2, y: 50 }, { x: 3, y: 10 }, { x: 4, y: 60 }],
color: '#00bcd4'
}]
});
graph3.render();
$("#interactivehover").html('');
var widchart = $("#power-card-chart2").width();
var graph4 = new Rickshaw.Graph({
element: document.getElementById("interactivehover"),
width: widchart,
height: 200,
renderer: 'line',
series: [{
color: "#ff5252",
data: [{ x: 0, y: 20 }, { x: 1, y: 24 }, { x: 2, y: 50 }, { x: 3, y: 10 }, { x: 4, y: 60 }],
name: 'New York'
}
]
});
graph4.render();
}
resizeGraph();
},150);
});

View File

@@ -0,0 +1,113 @@
"use strict";
$(document).ready(function() {
/*Line*/
setTimeout(function(){
$(".linechart").sparkline([5, 6, 7, 9, 9, 5, 3, 2, 2, 4, 6, 7], {
type: 'line',
width: '100%',
height: '300px',
tooltipClassname: 'chart-sparkline',
lineColor: 'rgba(255, 82, 82, 0.92)',
fillColor: 'rgba(255, 82, 82, 0.50)',
spotColor: '#bdc3c7'
});
/*Bar*/
$(".barchart").sparkline([5, 2, 2, 4, 9, 5, 7, 5, 2, 2, 6], {
type: 'bar',
barWidth: '40px',
height: '300px',
tooltipClassname: 'chart-sparkline',
barColor: 'rgba(17, 193, 91, 0.80)'
});
/*Pie*/
$(".piechart").sparkline([1, 1, 2, 2], {
type: 'pie',
width: '100%',
height: '300px',
sliceColors: ['#ff5252','#448aff','#11c15b','#536dfe'],
tooltipClassname: 'chart-sparkline'
});
/*Mouse Speed*/
var mrefreshinterval = 500; // update display every 500ms
var lastmousex = -1;
var lastmousey = -1;
var lastmousetime;
var mousetravel = 0;
var mpoints = [];
var mpoints_max = 30;
$('body').mousemove(function(e) {
var mousex = e.pageX;
var mousey = e.pageY;
if (lastmousex > -1)
mousetravel += Math.max(Math.abs(mousex - lastmousex), Math.abs(mousey - lastmousey));
lastmousex = mousex;
lastmousey = mousey;
});
var mdraw = function() {
var md = new Date();
var timenow = md.getTime();
if (lastmousetime && lastmousetime != timenow) {
var pps = Math.round(mousetravel / (timenow - lastmousetime) * 1000);
mpoints.push(pps);
if (mpoints.length > mpoints_max)
mpoints.splice(0, 1);
mousetravel = 0;
var mouse_wid = $('#mousespeed').parent('.card-block').parent().width();
var a = mpoints - mouse_wid;
$('#mousespeed').sparkline(mpoints, {
width: '100%',
height: '300px',
tooltipClassname: 'chart-sparkline',
tooltipSuffix: 'pixels per second',
lineColor: 'rgb(83, 109, 254)',
fillColor: 'rgba(83, 109, 254, 0.38)'
});
}
lastmousetime = timenow;
mtimer = setTimeout(mdraw, mrefreshinterval);
}
var mtimer = setTimeout(mdraw, mrefreshinterval); // We could use setInterval instead, but I prefer To Do it this way
$.sparkline_display_visible();
/*custom line chart*/
$(".customchart").sparkline([15, 30, 27, 35, 50, 71, 60], {
type: 'line',
width: '100%',
height: '300px',
tooltipClassname: 'chart-sparkline',
chartRangeMax: '50',
lineColor: '#11c15b',
fillColor: '#11c15b'
});
$(".customchart").sparkline([0, 5, 10, 7, 25, 35, 30], {
type: 'line',
width: '100%',
height: '300px',
composite: '!0',
tooltipClassname: 'chart-sparkline',
chartRangeMax: '40',
lineColor: '#448aff',
fillColor: '#448aff'
});
/* Tristate chart */
$(".tristate").sparkline([1, 1, 0, 1, -1, -1, 1, -1, 0, 0, 1, 1], {
type: 'tristate',
height: '300',
posBarColor: '#448aff',
negBarColor: '#11c15b',
zeroBarColor: '#ff5252',
barWidth: 30
});
},350);
});