575 lines
14 KiB
JavaScript
575 lines
14 KiB
JavaScript
jQuery(document).ready(function() {
|
|
|
|
function showTooltip(x, y, contents) {
|
|
jQuery('<div id="tooltip" class="tooltipflot">' + contents + '</div>').css( {
|
|
position: 'absolute',
|
|
display: 'none',
|
|
top: y + 5,
|
|
left: x + 5
|
|
}).appendTo("body").fadeIn(200);
|
|
}
|
|
|
|
/*****SIMPLE CHART*****/
|
|
|
|
var flash = [[0, 2], [1, 6], [2,3], [3, 8], [4, 5], [5, 13], [6, 8]];
|
|
var html5 = [[0, 5], [1, 4], [2,4], [3, 1], [4, 9], [5, 10], [6, 13]];
|
|
|
|
var plot = jQuery.plot(jQuery("#basicflot"),
|
|
[ { data: flash,
|
|
label: "Flash",
|
|
color: "#1CAF9A"
|
|
},
|
|
{ data: html5,
|
|
label: "HTML5",
|
|
color: "#428BCA"
|
|
}
|
|
],
|
|
{
|
|
series: {
|
|
lines: {
|
|
show: true,
|
|
fill: true,
|
|
lineWidth: 1,
|
|
fillColor: {
|
|
colors: [ { opacity: 0.5 },
|
|
{ opacity: 0.5 }
|
|
]
|
|
}
|
|
},
|
|
points: {
|
|
show: true
|
|
},
|
|
shadowSize: 0
|
|
},
|
|
legend: {
|
|
position: 'nw'
|
|
},
|
|
grid: {
|
|
hoverable: true,
|
|
clickable: true,
|
|
borderColor: '#ddd',
|
|
borderWidth: 1,
|
|
labelMargin: 10,
|
|
backgroundColor: '#fff'
|
|
},
|
|
yaxis: {
|
|
min: 0,
|
|
max: 15,
|
|
color: '#eee'
|
|
},
|
|
xaxis: {
|
|
color: '#eee'
|
|
}
|
|
});
|
|
|
|
var previousPoint = null;
|
|
jQuery("#basicflot").bind("plothover", function (event, pos, item) {
|
|
jQuery("#x").text(pos.x.toFixed(2));
|
|
jQuery("#y").text(pos.y.toFixed(2));
|
|
|
|
if(item) {
|
|
if (previousPoint != item.dataIndex) {
|
|
previousPoint = item.dataIndex;
|
|
|
|
jQuery("#tooltip").remove();
|
|
var x = item.datapoint[0].toFixed(2),
|
|
y = item.datapoint[1].toFixed(2);
|
|
|
|
showTooltip(item.pageX, item.pageY,
|
|
item.series.label + " of " + x + " = " + y);
|
|
}
|
|
|
|
} else {
|
|
jQuery("#tooltip").remove();
|
|
previousPoint = null;
|
|
}
|
|
|
|
});
|
|
|
|
jQuery("#basicflot").bind("plotclick", function (event, pos, item) {
|
|
if (item) {
|
|
plot.highlight(item.series, item.datapoint);
|
|
}
|
|
});
|
|
|
|
|
|
/***** USING OTHER SYMBOLS *****/
|
|
|
|
var firefox = [[0, 5], [1, 8], [2,6], [3, 11], [4, 7], [5, 13], [6, 9], [7,8], [8,10], [9,9],[10,13]];
|
|
var chrome = [[0, 3], [1, 6], [2,4], [3, 9], [4, 5], [5, 11], [6, 7], [7,6], [8,8], [9,7],[10,11]];
|
|
|
|
var plot2 = jQuery.plot(jQuery("#basicflot2"),
|
|
[ { data: firefox,
|
|
label: "Firefox",
|
|
color: "#D9534F",
|
|
points: {
|
|
symbol: "square"
|
|
}
|
|
},
|
|
{ data: chrome,
|
|
label: "Chrome",
|
|
color: "#428BCA",
|
|
lines: {
|
|
fill: true
|
|
},
|
|
points: {
|
|
symbol: 'diamond',
|
|
lineWidth: 2
|
|
}
|
|
}
|
|
],
|
|
{
|
|
series: {
|
|
lines: {
|
|
show: true,
|
|
lineWidth: 2
|
|
},
|
|
points: {
|
|
show: true
|
|
},
|
|
shadowSize: 0
|
|
},
|
|
legend: {
|
|
position: 'nw'
|
|
},
|
|
grid: {
|
|
hoverable: true,
|
|
clickable: true,
|
|
borderColor: '#ddd',
|
|
borderWidth: 1,
|
|
labelMargin: 10,
|
|
backgroundColor: '#fff'
|
|
},
|
|
yaxis: {
|
|
min: 0,
|
|
max: 15,
|
|
color: '#eee'
|
|
},
|
|
xaxis: {
|
|
color: '#eee',
|
|
max: 10
|
|
}
|
|
});
|
|
|
|
var previousPoint2 = null;
|
|
jQuery("#basicflot2").bind("plothover", function (event, pos, item) {
|
|
jQuery("#x").text(pos.x.toFixed(2));
|
|
jQuery("#y").text(pos.y.toFixed(2));
|
|
|
|
if(item) {
|
|
if (previousPoint2 != item.dataIndex) {
|
|
previousPoint2 = item.dataIndex;
|
|
|
|
jQuery("#tooltip").remove();
|
|
var x = item.datapoint[0].toFixed(2),
|
|
y = item.datapoint[1].toFixed(2);
|
|
|
|
showTooltip(item.pageX, item.pageY,
|
|
item.series.label + " of " + x + " = " + y);
|
|
}
|
|
|
|
} else {
|
|
jQuery("#tooltip").remove();
|
|
previousPoint2 = null;
|
|
}
|
|
|
|
});
|
|
|
|
jQuery("#basicflot2").bind("plotclick", function (event, pos, item) {
|
|
if (item) {
|
|
plot2.highlight(item.series, item.datapoint);
|
|
}
|
|
});
|
|
|
|
|
|
/***** TRACKING WITH CROSSHAIR *****/
|
|
|
|
var sin = [], cos = [];
|
|
for (var i = 0; i < 14; i += 0.1) {
|
|
sin.push([i, Math.sin(i)]);
|
|
cos.push([i, Math.cos(i)]);
|
|
}
|
|
|
|
var plot3 = jQuery.plot("#trackingchart", [
|
|
{ data: sin, label: "sin(x) = -0.00", color: '#666' },
|
|
{ data: cos, label: "cos(x) = -0.00", color: '#999' }
|
|
], {
|
|
series: {
|
|
lines: {
|
|
show: true,
|
|
lineWidth: 2,
|
|
},
|
|
shadowSize: 0
|
|
},
|
|
legend: {
|
|
show: false
|
|
},
|
|
crosshair: {
|
|
mode: "xy",
|
|
color: '#D9534F'
|
|
},
|
|
grid: {
|
|
borderColor: '#ddd',
|
|
borderWidth: 1,
|
|
labelMargin: 10
|
|
},
|
|
yaxis: {
|
|
color: '#eee'
|
|
},
|
|
xaxis: {
|
|
color: '#eee'
|
|
}
|
|
});
|
|
|
|
var legends = jQuery("#trackingchart .legendLabel");
|
|
|
|
legends.each(function () {
|
|
// fix the widths so they don't jump around
|
|
jQuery(this).css('width', jQuery(this).width());
|
|
});
|
|
|
|
var updateLegendTimeout = null;
|
|
var latestPosition = null;
|
|
|
|
function updateLegend() {
|
|
|
|
updateLegendTimeout = null;
|
|
|
|
var pos = latestPosition;
|
|
|
|
var axes = plot3.getAxes();
|
|
if (pos.x < axes.xaxis.min || pos.x > axes.xaxis.max ||
|
|
pos.y < axes.yaxis.min || pos.y > axes.yaxis.max) {
|
|
return;
|
|
}
|
|
|
|
var i, j, dataset = plot3.getData();
|
|
for (i = 0; i < dataset.length; ++i) {
|
|
|
|
var series = dataset[i];
|
|
|
|
// Find the nearest points, x-wise
|
|
for (j = 0; j < series.data.length; ++j) {
|
|
if (series.data[j][0] > pos.x) {
|
|
break;
|
|
}
|
|
}
|
|
|
|
// Now Interpolate
|
|
var y,
|
|
p1 = series.data[j - 1],
|
|
p2 = series.data[j];
|
|
|
|
if (p1 == null) {
|
|
y = p2[1];
|
|
} else if (p2 == null) {
|
|
y = p1[1];
|
|
} else {
|
|
y = p1[1] + (p2[1] - p1[1]) * (pos.x - p1[0]) / (p2[0] - p1[0]);
|
|
}
|
|
|
|
legends.eq(i).text(series.label.replace(/=.*/, "= " + y.toFixed(2)));
|
|
}
|
|
}
|
|
|
|
jQuery("#trackingchart").bind("plothover", function (event, pos, item) {
|
|
latestPosition = pos;
|
|
if (!updateLegendTimeout) {
|
|
updateLegendTimeout = setTimeout(updateLegend, 50);
|
|
}
|
|
});
|
|
|
|
|
|
/***** REAL TIME UPDATES *****/
|
|
|
|
var data = [], totalPoints = 50;
|
|
|
|
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 = 1000;
|
|
|
|
var plot4 = jQuery.plot("#realtimechart", [ getRandomData() ], {
|
|
colors: ["#F0AD4E"],
|
|
series: {
|
|
lines: {
|
|
fill: true,
|
|
lineWidth: 0
|
|
},
|
|
shadowSize: 0 // Drawing is faster without shadows
|
|
},
|
|
grid: {
|
|
borderColor: '#ddd',
|
|
borderWidth: 1,
|
|
labelMargin: 10
|
|
},
|
|
xaxis: {
|
|
color: '#eee'
|
|
},
|
|
yaxis: {
|
|
min: 0,
|
|
max: 100,
|
|
color: '#eee'
|
|
}
|
|
});
|
|
|
|
function update() {
|
|
|
|
plot4.setData([getRandomData()]);
|
|
|
|
// Since the axes don't change, we don't need to call plot.setupGrid()
|
|
plot4.draw();
|
|
setTimeout(update, updateInterval);
|
|
}
|
|
|
|
update();
|
|
|
|
|
|
/***** BAR CHART *****/
|
|
|
|
var bardata = [ ["Jan", 10], ["Feb", 23], ["Mar", 18], ["Apr", 13], ["May", 17], ["Jun", 30], ["Jul", 26], ["Aug", 16], ["Sep", 17], ["Oct", 5], ["Nov", 8], ["Dec", 15] ];
|
|
|
|
jQuery.plot("#barchart", [ bardata ], {
|
|
series: {
|
|
lines: {
|
|
lineWidth: 1
|
|
},
|
|
bars: {
|
|
show: true,
|
|
barWidth: 0.5,
|
|
align: "center",
|
|
lineWidth: 0,
|
|
fillColor: "#428BCA"
|
|
}
|
|
},
|
|
grid: {
|
|
borderColor: '#ddd',
|
|
borderWidth: 1,
|
|
labelMargin: 10
|
|
},
|
|
xaxis: {
|
|
mode: "categories",
|
|
tickLength: 0
|
|
}
|
|
});
|
|
|
|
|
|
/***** PIE CHART *****/
|
|
|
|
var piedata = [
|
|
{ label: "Series 1", data: [[1,10]], color: '#D9534F'},
|
|
{ label: "Series 2", data: [[1,30]], color: '#1CAF9A'},
|
|
{ label: "Series 3", data: [[1,90]], color: '#F0AD4E'},
|
|
{ label: "Series 4", data: [[1,70]], color: '#428BCA'},
|
|
{ label: "Series 5", data: [[1,80]], color: '#5BC0DE'}
|
|
];
|
|
|
|
jQuery.plot('#piechart', piedata, {
|
|
series: {
|
|
pie: {
|
|
show: true,
|
|
radius: 1,
|
|
label: {
|
|
show: true,
|
|
radius: 2/3,
|
|
formatter: labelFormatter,
|
|
threshold: 0.1
|
|
}
|
|
}
|
|
},
|
|
grid: {
|
|
hoverable: true,
|
|
clickable: true
|
|
}
|
|
});
|
|
|
|
function labelFormatter(label, series) {
|
|
return "<div style='font-size:8pt; text-align:center; padding:2px; color:white;'>" + label + "<br/>" + Math.round(series.percent) + "%</div>";
|
|
}
|
|
|
|
|
|
/***** MORRIS CHARTS *****/
|
|
|
|
new Morris.Line({
|
|
// ID of the element in which to draw the chart.
|
|
element: 'line-chart',
|
|
// Chart data records -- each entry in this array corresponds to a point on
|
|
// the chart.
|
|
data: [
|
|
{ y: '2006', a: 30, b: 20 },
|
|
{ y: '2007', a: 75, b: 65 },
|
|
{ y: '2008', a: 50, b: 40 },
|
|
{ y: '2009', a: 75, b: 65 },
|
|
{ y: '2010', a: 50, b: 40 },
|
|
{ y: '2011', a: 75, b: 65 },
|
|
{ y: '2012', a: 100, b: 90 }
|
|
],
|
|
xkey: 'y',
|
|
ykeys: ['a', 'b'],
|
|
labels: ['Series A', 'Series B'],
|
|
lineColors: ['#D9534F', '#428BCA'],
|
|
lineWidth: '2px',
|
|
hideHover: true
|
|
});
|
|
|
|
new Morris.Area({
|
|
// ID of the element in which to draw the chart.
|
|
element: 'area-chart',
|
|
// Chart data records -- each entry in this array corresponds to a point on
|
|
// the chart.
|
|
data: [
|
|
{ y: '2006', a: 30, b: 20 },
|
|
{ y: '2007', a: 75, b: 65 },
|
|
{ y: '2008', a: 50, b: 40 },
|
|
{ y: '2009', a: 75, b: 65 },
|
|
{ y: '2010', a: 50, b: 40 },
|
|
{ y: '2011', a: 75, b: 65 },
|
|
{ y: '2012', a: 100, b: 90 }
|
|
],
|
|
xkey: 'y',
|
|
ykeys: ['a', 'b'],
|
|
labels: ['Series A', 'Series B'],
|
|
lineColors: ['#1CAF9A', '#F0AD4E'],
|
|
lineWidth: '1px',
|
|
fillOpacity: 0.8,
|
|
smooth: false,
|
|
hideHover: true
|
|
});
|
|
|
|
new Morris.Bar({
|
|
// ID of the element in which to draw the chart.
|
|
element: 'bar-chart',
|
|
// Chart data records -- each entry in this array corresponds to a point on
|
|
// the chart.
|
|
data: [
|
|
{ y: '2006', a: 30, b: 20 },
|
|
{ y: '2007', a: 75, b: 65 },
|
|
{ y: '2008', a: 50, b: 40 },
|
|
{ y: '2009', a: 75, b: 65 },
|
|
{ y: '2010', a: 50, b: 40 },
|
|
{ y: '2011', a: 75, b: 65 },
|
|
{ y: '2012', a: 100, b: 90 }
|
|
],
|
|
xkey: 'y',
|
|
ykeys: ['a', 'b'],
|
|
labels: ['Series A', 'Series B'],
|
|
lineWidth: '1px',
|
|
fillOpacity: 0.8,
|
|
smooth: false,
|
|
hideHover: true
|
|
});
|
|
|
|
new Morris.Bar({
|
|
// ID of the element in which to draw the chart.
|
|
element: 'stacked-chart',
|
|
// Chart data records -- each entry in this array corresponds to a point on
|
|
// the chart.
|
|
data: [
|
|
{ y: '2006', a: 30, b: 20 },
|
|
{ y: '2007', a: 75, b: 65 },
|
|
{ y: '2008', a: 50, b: 40 },
|
|
{ y: '2009', a: 75, b: 65 },
|
|
{ y: '2010', a: 50, b: 40 },
|
|
{ y: '2011', a: 75, b: 65 },
|
|
{ y: '2012', a: 100, b: 90 }
|
|
],
|
|
xkey: 'y',
|
|
ykeys: ['a', 'b'],
|
|
labels: ['Series A', 'Series B'],
|
|
barColors: ['#1CAF9A', '#428BCA'],
|
|
lineWidth: '1px',
|
|
fillOpacity: 0.8,
|
|
smooth: false,
|
|
stacked: true,
|
|
hideHover: true
|
|
});
|
|
|
|
new Morris.Donut({
|
|
element: 'donut-chart',
|
|
data: [
|
|
{label: "Download Sales", value: 12},
|
|
{label: "In-Store Sales", value: 30},
|
|
{label: "Mail-Order Sales", value: 20}
|
|
]
|
|
});
|
|
|
|
new Morris.Donut({
|
|
element: 'donut-chart2',
|
|
data: [
|
|
{label: "Chrome", value: 30},
|
|
{label: "Firefox", value: 20},
|
|
{label: "Opera", value: 20},
|
|
{label: "Safari", value: 20},
|
|
{label: "Internet Explorer", value: 10}
|
|
],
|
|
colors: ['#D9534F','#1CAF9A','#428BCA','#5BC0DE','#428BCA']
|
|
});
|
|
|
|
|
|
/***** SPARKLINE CHARTS *****/
|
|
|
|
jQuery('#sparkline').sparkline([4,3,3,1,4,3,2,2,3], {
|
|
type: 'bar',
|
|
height:'30px',
|
|
barColor: '#428BCA'
|
|
});
|
|
|
|
jQuery('#sparkline2').sparkline([4,3,3,1,4,3,2,2,3], {
|
|
type: 'line',
|
|
height:'33px',
|
|
width: '50px',
|
|
lineColor: false,
|
|
fillColor: '#1CAF9A'
|
|
});
|
|
|
|
jQuery('#sparkline3').sparkline([4,3,3,1,4,3,2,2,3], {
|
|
type: 'pie',
|
|
height:'33px',
|
|
sliceColors: ['#F0AD4E','#428BCA','#D9534F','#1CAF9A','#5BC0DE']
|
|
});
|
|
|
|
jQuery('#sparkline4').sparkline([4,3,3,5,4,3,2,5,3], {
|
|
type: 'line',
|
|
height:'33px',
|
|
width: '50px',
|
|
lineColor: '#5BC0DE',
|
|
fillColor: false
|
|
});
|
|
|
|
jQuery('#sparkline4').sparkline([3,6,6,2,6,5,3,2,1], {
|
|
type: 'line',
|
|
height:'33px',
|
|
width: '50px',
|
|
lineColor: '#D9534F',
|
|
fillColor: false,
|
|
composite: true
|
|
});
|
|
|
|
|
|
}); |