first
This commit is contained in:
@@ -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
Reference in New Issue
Block a user