81 lines
2.4 KiB
JavaScript
81 lines
2.4 KiB
JavaScript
|
var Script = function () {
|
||
|
|
|
||
|
|
// flot chart (Sin and Cos)
|
||
|
|
|
||
|
|
var metro = {
|
||
|
|
showTooltip: function (x, y, contents) {
|
||
|
|
$('<div class="metro_tips">' + contents + '</div>').css( {
|
||
|
|
position: 'absolute',
|
||
|
|
display: 'none',
|
||
|
|
top: y + 5,
|
||
|
|
left: x + 5
|
||
|
|
}).appendTo("body").fadeIn(200);
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!!$(".plots").offset() ) {
|
||
|
|
var sin = [];
|
||
|
|
var cos = [];
|
||
|
|
|
||
|
|
for (var i = 0; i <= 20; i += 0.5){
|
||
|
|
sin.push([i, Math.sin(i)]);
|
||
|
|
cos.push([i, Math.cos(i)]);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Display the Sin and Cos Functions
|
||
|
|
$.plot($(".plots"), [ { label: "Cos", data: cos }, { label: "Sin", data: sin } ],
|
||
|
|
{
|
||
|
|
colors: ["#4a8bc2", "#de577b"],
|
||
|
|
|
||
|
|
series: {
|
||
|
|
lines: {
|
||
|
|
show: true,
|
||
|
|
lineWidth: 2
|
||
|
|
},
|
||
|
|
points: {show: true},
|
||
|
|
shadowSize: 2
|
||
|
|
},
|
||
|
|
|
||
|
|
grid: {
|
||
|
|
hoverable: true,
|
||
|
|
show: true,
|
||
|
|
borderWidth: 0,
|
||
|
|
labelMargin: 12
|
||
|
|
},
|
||
|
|
|
||
|
|
legend: {
|
||
|
|
show: true,
|
||
|
|
margin: [0,-24],
|
||
|
|
noColumns: 0,
|
||
|
|
labelBoxBorderColor: null
|
||
|
|
},
|
||
|
|
|
||
|
|
yaxis: { min: -1.2, max: 1.2},
|
||
|
|
xaxis: {}
|
||
|
|
});
|
||
|
|
|
||
|
|
// plot tooltip show
|
||
|
|
var previousPoint = null;
|
||
|
|
$(".plots").bind("plothover", function (event, pos, item) {
|
||
|
|
if (item) {
|
||
|
|
if (previousPoint != item.dataIndex) {
|
||
|
|
previousPoint = item.dataIndex;
|
||
|
|
$(".charts_tooltip").fadeOut("fast").promise().done(function(){
|
||
|
|
$(this).remove();
|
||
|
|
});
|
||
|
|
var x = item.datapoint[0].toFixed(2),
|
||
|
|
y = item.datapoint[1].toFixed(2);
|
||
|
|
metro.showTooltip(item.pageX, item.pageY, item.series.label + " of " + x + " = " + y);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$(".metro_tips").fadeOut("fast").promise().done(function(){
|
||
|
|
$(this).remove();
|
||
|
|
});
|
||
|
|
previousPoint = null;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
}();
|