first
This commit is contained in:
@@ -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*/
|
||||
|
||||
});
|
||||
@@ -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'
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
});
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
}]
|
||||
]);
|
||||
|
||||
});
|
||||
@@ -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;
|
||||
|
||||
}));
|
||||
@@ -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);
|
||||
@@ -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 + " – ");
|
||||
});
|
||||
|
||||
//real-time update
|
||||
$(function() {
|
||||
|
||||
// We use an inline data source in the example, usually data would
|
||||
// be fetched from a server
|
||||
|
||||
var data = [],
|
||||
totalPoints = 300;
|
||||
|
||||
function getRandomData() {
|
||||
|
||||
if (data.length > 0)
|
||||
data = data.slice(1);
|
||||
|
||||
// Do a random walk
|
||||
|
||||
while (data.length < totalPoints) {
|
||||
|
||||
var prev = data.length > 0 ? data[data.length - 1] : 50,
|
||||
y = prev + Math.random() * 10 - 5;
|
||||
|
||||
if (y < 0) {
|
||||
y = 0;
|
||||
} else if (y > 100) {
|
||||
y = 100;
|
||||
}
|
||||
|
||||
data.push(y);
|
||||
}
|
||||
|
||||
// Zip the generated y values with the x values
|
||||
|
||||
var res = [];
|
||||
for (var i = 0; i < data.length; ++i) {
|
||||
res.push([i, data[i]])
|
||||
}
|
||||
|
||||
return res;
|
||||
}
|
||||
|
||||
// Set up the control widget
|
||||
|
||||
var updateInterval = 30;
|
||||
$("#updateInterval").val(updateInterval).change(function() {
|
||||
var v = $(this).val();
|
||||
if (v && !isNaN(+v)) {
|
||||
updateInterval = +v;
|
||||
if (updateInterval < 1) {
|
||||
updateInterval = 1;
|
||||
} else if (updateInterval > 2000) {
|
||||
updateInterval = 2000;
|
||||
}
|
||||
$(this).val("" + updateInterval);
|
||||
}
|
||||
});
|
||||
|
||||
var plot = $.plot("#realtimeupdate", [getRandomData()], {
|
||||
series: {
|
||||
shadowSize: 0 // Drawing is faster without shadows
|
||||
},
|
||||
yaxis: {
|
||||
min: 0,
|
||||
max: 100
|
||||
},
|
||||
xaxis: {
|
||||
show: false
|
||||
}
|
||||
});
|
||||
|
||||
function update() {
|
||||
|
||||
plot.setData([getRandomData()]);
|
||||
|
||||
// Since the axes don't change, we don't need to call plot.setupGrid()
|
||||
|
||||
plot.draw();
|
||||
setTimeout(update, updateInterval);
|
||||
}
|
||||
|
||||
update();
|
||||
|
||||
// Add the Flot version string to the footer
|
||||
|
||||
$("#footer").prepend("Flot " + $.plot.version + " – ");
|
||||
});
|
||||
|
||||
|
||||
//Percentiles
|
||||
$(function() {
|
||||
|
||||
var males = { "8%": [
|
||||
[2, 20.0],
|
||||
[3, 30.3],
|
||||
[4, 40.0],
|
||||
[5, 50.5],
|
||||
[6, 60.7],
|
||||
[7, 70.6],
|
||||
[8, 80.6],
|
||||
[9, 90.3],
|
||||
[10, 100.3],
|
||||
[11, 110.4],
|
||||
[12, 146.5],
|
||||
[13, 151.7],
|
||||
[14, 159.9],
|
||||
[15, 165.4],
|
||||
[16, 167.8],
|
||||
[17, 168.7],
|
||||
[18, 169.5],
|
||||
[19, 168.0]
|
||||
], "90%": [
|
||||
[2, 96.8],
|
||||
[3, 105.2],
|
||||
[4, 113.9],
|
||||
[5, 120.8],
|
||||
[6, 127.0],
|
||||
[7, 133.1],
|
||||
[8, 139.1],
|
||||
[9, 143.9],
|
||||
[10, 151.3],
|
||||
[11, 161.1],
|
||||
[12, 164.8],
|
||||
[13, 173.5],
|
||||
[14, 179.0],
|
||||
[15, 182.0],
|
||||
[16, 186.9],
|
||||
[17, 185.2],
|
||||
[18, 186.3],
|
||||
[19, 186.6]
|
||||
], "25%": [
|
||||
[2, 89.2],
|
||||
[3, 94.9],
|
||||
[4, 104.4],
|
||||
[5, 111.4],
|
||||
[6, 117.5],
|
||||
[7, 120.2],
|
||||
[8, 127.1],
|
||||
[9, 132.9],
|
||||
[10, 136.8],
|
||||
[11, 144.4],
|
||||
[12, 149.5],
|
||||
[13, 154.1],
|
||||
[14, 163.1],
|
||||
[15, 169.2],
|
||||
[16, 170.4],
|
||||
[17, 171.2],
|
||||
[18, 172.4],
|
||||
[19, 170.8]
|
||||
], "10%": [
|
||||
[2, 86.9],
|
||||
[3, 92.6],
|
||||
[4, 99.9],
|
||||
[5, 107.0],
|
||||
[6, 114.0],
|
||||
[7, 113.5],
|
||||
[8, 123.6],
|
||||
[9, 129.2],
|
||||
[10, 133.0],
|
||||
[11, 140.6],
|
||||
[12, 145.2],
|
||||
[13, 149.7],
|
||||
[14, 158.4],
|
||||
[15, 163.5],
|
||||
[16, 166.9],
|
||||
[17, 167.5],
|
||||
[18, 167.1],
|
||||
[19, 165.3]
|
||||
], "mean": [
|
||||
[2, 91.9],
|
||||
[3, 98.5],
|
||||
[4, 107.1],
|
||||
[5, 114.4],
|
||||
[6, 120.6],
|
||||
[7, 124.7],
|
||||
[8, 131.1],
|
||||
[9, 136.8],
|
||||
[10, 142.3],
|
||||
[11, 150.0],
|
||||
[12, 154.7],
|
||||
[13, 161.9],
|
||||
[14, 168.7],
|
||||
[15, 173.6],
|
||||
[16, 175.9],
|
||||
[17, 176.6],
|
||||
[18, 176.8],
|
||||
[19, 176.7]
|
||||
], "75%": [
|
||||
[2, 94.5],
|
||||
[3, 102.1],
|
||||
[4, 110.8],
|
||||
[5, 117.9],
|
||||
[6, 124.0],
|
||||
[7, 129.3],
|
||||
[8, 134.6],
|
||||
[9, 141.4],
|
||||
[10, 147.0],
|
||||
[11, 156.1],
|
||||
[12, 160.3],
|
||||
[13, 168.3],
|
||||
[14, 174.7],
|
||||
[15, 178.0],
|
||||
[16, 180.2],
|
||||
[17, 181.7],
|
||||
[18, 181.3],
|
||||
[19, 182.5]
|
||||
], "85%": [
|
||||
[2, 96.2],
|
||||
[3, 103.8],
|
||||
[4, 111.8],
|
||||
[5, 119.6],
|
||||
[6, 125.6],
|
||||
[7, 131.5],
|
||||
[8, 138.0],
|
||||
[9, 143.3],
|
||||
[10, 149.3],
|
||||
[11, 159.8],
|
||||
[12, 162.5],
|
||||
[13, 171.3],
|
||||
[14, 177.5],
|
||||
[15, 180.2],
|
||||
[16, 183.8],
|
||||
[17, 183.4],
|
||||
[18, 183.5],
|
||||
[19, 185.5]
|
||||
], "50%": [
|
||||
[2, 91.9],
|
||||
[3, 98.2],
|
||||
[4, 106.8],
|
||||
[5, 114.6],
|
||||
[6, 120.8],
|
||||
[7, 125.2],
|
||||
[8, 130.3],
|
||||
[9, 137.1],
|
||||
[10, 141.5],
|
||||
[11, 149.4],
|
||||
[12, 153.9],
|
||||
[13, 162.2],
|
||||
[14, 169.0],
|
||||
[15, 174.8],
|
||||
[16, 176.0],
|
||||
[17, 176.8],
|
||||
[18, 176.4],
|
||||
[19, 177.4]
|
||||
] };
|
||||
|
||||
var females = { "15%": [
|
||||
[2, 84.8],
|
||||
[3, 93.7],
|
||||
[4, 100.6],
|
||||
[5, 105.8],
|
||||
[6, 113.3],
|
||||
[7, 119.3],
|
||||
[8, 124.3],
|
||||
[9, 131.4],
|
||||
[10, 136.9],
|
||||
[11, 143.8],
|
||||
[12, 149.4],
|
||||
[13, 151.2],
|
||||
[14, 152.3],
|
||||
[15, 155.9],
|
||||
[16, 154.7],
|
||||
[17, 157.0],
|
||||
[18, 156.1],
|
||||
[19, 155.4]
|
||||
], "90%": [
|
||||
[2, 95.6],
|
||||
[3, 104.1],
|
||||
[4, 111.9],
|
||||
[5, 119.6],
|
||||
[6, 127.6],
|
||||
[7, 133.1],
|
||||
[8, 138.7],
|
||||
[9, 147.1],
|
||||
[10, 152.8],
|
||||
[11, 161.3],
|
||||
[12, 166.6],
|
||||
[13, 167.9],
|
||||
[14, 169.3],
|
||||
[15, 170.1],
|
||||
[16, 172.4],
|
||||
[17, 169.2],
|
||||
[18, 171.1],
|
||||
[19, 172.4]
|
||||
], "25%": [
|
||||
[2, 87.2],
|
||||
[3, 95.9],
|
||||
[4, 101.9],
|
||||
[5, 107.4],
|
||||
[6, 114.8],
|
||||
[7, 121.4],
|
||||
[8, 126.8],
|
||||
[9, 133.4],
|
||||
[10, 138.6],
|
||||
[11, 146.2],
|
||||
[12, 152.0],
|
||||
[13, 153.8],
|
||||
[14, 155.7],
|
||||
[15, 158.4],
|
||||
[16, 157.0],
|
||||
[17, 158.5],
|
||||
[18, 158.4],
|
||||
[19, 158.1]
|
||||
], "10%": [
|
||||
[2, 84.0],
|
||||
[3, 91.9],
|
||||
[4, 99.2],
|
||||
[5, 105.2],
|
||||
[6, 112.7],
|
||||
[7, 118.0],
|
||||
[8, 123.3],
|
||||
[9, 130.2],
|
||||
[10, 135.0],
|
||||
[11, 141.1],
|
||||
[12, 148.3],
|
||||
[13, 150.0],
|
||||
[14, 150.7],
|
||||
[15, 154.3],
|
||||
[16, 153.6],
|
||||
[17, 155.6],
|
||||
[18, 154.7],
|
||||
[19, 153.1]
|
||||
], "mean": [
|
||||
[2, 90.2],
|
||||
[3, 98.3],
|
||||
[4, 105.2],
|
||||
[5, 112.2],
|
||||
[6, 119.0],
|
||||
[7, 125.8],
|
||||
[8, 131.3],
|
||||
[9, 138.6],
|
||||
[10, 144.2],
|
||||
[11, 151.3],
|
||||
[12, 156.7],
|
||||
[13, 158.6],
|
||||
[14, 160.5],
|
||||
[15, 162.1],
|
||||
[16, 162.9],
|
||||
[17, 162.2],
|
||||
[18, 163.0],
|
||||
[19, 163.1]
|
||||
], "75%": [
|
||||
[2, 93.2],
|
||||
[3, 101.5],
|
||||
[4, 107.9],
|
||||
[5, 116.6],
|
||||
[6, 122.8],
|
||||
[7, 129.3],
|
||||
[8, 135.2],
|
||||
[9, 143.7],
|
||||
[10, 148.7],
|
||||
[11, 156.9],
|
||||
[12, 160.8],
|
||||
[13, 163.0],
|
||||
[14, 165.0],
|
||||
[15, 165.8],
|
||||
[16, 168.7],
|
||||
[17, 166.2],
|
||||
[18, 167.6],
|
||||
[19, 168.0]
|
||||
], "85%": [
|
||||
[2, 94.5],
|
||||
[3, 102.8],
|
||||
[4, 110.4],
|
||||
[5, 119.0],
|
||||
[6, 125.7],
|
||||
[7, 131.5],
|
||||
[8, 137.9],
|
||||
[9, 146.0],
|
||||
[10, 151.3],
|
||||
[11, 159.9],
|
||||
[12, 164.0],
|
||||
[13, 166.5],
|
||||
[14, 167.5],
|
||||
[15, 168.5],
|
||||
[16, 171.5],
|
||||
[17, 168.0],
|
||||
[18, 169.8],
|
||||
[19, 170.3]
|
||||
], "50%": [
|
||||
[2, 90.2],
|
||||
[3, 98.1],
|
||||
[4, 105.2],
|
||||
[5, 111.7],
|
||||
[6, 118.2],
|
||||
[7, 125.6],
|
||||
[8, 130.5],
|
||||
[9, 138.3],
|
||||
[10, 143.7],
|
||||
[11, 151.4],
|
||||
[12, 156.7],
|
||||
[13, 157.7],
|
||||
[14, 161.0],
|
||||
[15, 162.0],
|
||||
[16, 162.8],
|
||||
[17, 162.2],
|
||||
[18, 162.8],
|
||||
[19, 163.3]
|
||||
] };
|
||||
|
||||
var dataset = [
|
||||
{ label: "Female mean", data: females["mean"], lines: { show: true }, color: "rgb(255,50,50)" },
|
||||
{ id: "f15%", data: females["1%"], lines: { show: true, lineWidth: 0, fill: false }, color: "rgb(255,50,50)" },
|
||||
{ id: "f25%", data: females["3%"], lines: { show: true, lineWidth: 0, fill: 0.2 }, color: "rgb(255,50,50)", fillBetween: "f15%" },
|
||||
{ id: "f50%", data: females["6%"], lines: { show: true, lineWidth: 0.5, fill: 0.4, shadowSize: 0 }, color: "rgb(255,50,50)", fillBetween: "f25%" },
|
||||
{ id: "f75%", data: females["8%"], lines: { show: true, lineWidth: 0, fill: 0.4 }, color: "rgb(255,50,50)", fillBetween: "f50%" },
|
||||
{ id: "f85%", data: females["12%"], lines: { show: true, lineWidth: 0, fill: 0.2 }, color: "rgb(255,50,50)", fillBetween: "f75%" },
|
||||
|
||||
{ label: "Male mean", data: males["mean"], lines: { show: true }, color: "#01C0C8producxt" },
|
||||
{ id: "m15%", data: males["10%"], lines: { show: true, lineWidth: 0, fill: false }, color: "#99E6E9" },
|
||||
{ id: "m25%", data: males["12%"], lines: { show: true, lineWidth: 0, fill: 0.2 }, color: "#99E6E9", fillBetween: "m15%" },
|
||||
{ id: "m50%", data: males["20%"], lines: { show: true, lineWidth: 0.5, fill: 0.4, shadowSize: 0 }, color: "rgb(50,50,255)", fillBetween: "m25%" },
|
||||
{ id: "m75%", data: males["22%"], lines: { show: true, lineWidth: 0, fill: 0.4 }, color: "#99E6E9", fillBetween: "m50%" },
|
||||
{ id: "m85%", data: males["25%"], lines: { show: true, lineWidth: 0, fill: 0.2 }, color: "#99E6E9", fillBetween: "m75%" }
|
||||
];
|
||||
|
||||
$.plot($("#percentiles"), dataset, {
|
||||
xaxis: {
|
||||
tickDecimals: 0
|
||||
},
|
||||
yaxis: {
|
||||
tickFormatter: function(v) {
|
||||
return v + " cm";
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
position: "se"
|
||||
}
|
||||
});
|
||||
|
||||
// Add the Flot version string to the footer
|
||||
|
||||
$("#footer").prepend("Flot " + $.plot.version + " – ");
|
||||
});
|
||||
|
||||
});
|
||||
@@ -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);
|
||||
@@ -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);
|
||||
@@ -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);
|
||||
12
safekiso-server/modules/base/wwwroot/admindek/pages/chart/float/jquery.flot.tooltip.min.js
vendored
Normal file
12
safekiso-server/modules/base/wwwroot/admindek/pages/chart/float/jquery.flot.tooltip.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@@ -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);
|
||||
}
|
||||
});
|
||||
@@ -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();};}));
|
||||
@@ -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;}}});});
|
||||
@@ -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);
|
||||
@@ -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)};
|
||||
}
|
||||
|
||||
@@ -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"
|
||||
}];
|
||||
}
|
||||
|
||||
});
|
||||
@@ -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
@@ -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);
|
||||
});
|
||||
@@ -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);
|
||||
});
|
||||
Reference in New Issue
Block a user