Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Pie problem with jQuery V1.8 #72

Closed
wants to merge 5 commits into from
Closed

Pie problem with jQuery V1.8 #72

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e39e33a
convert drawings to plugin
jumjum123 Jul 31, 2012
59cf7a6
change findnearby to work on Plugins
jumjum123 Jul 31, 2012
139f100
change highlighting to work on Plugins
jumjum123 Jul 31, 2012
35960ff
add edit function
jumjum123 Jul 31, 2012
56818be
changed for working with jQuery V1.8
jumjum123 Aug 29, 2012
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion examples/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,10 @@ <h1>Flot Examples</h1>
<ul>
<li><a href="turning-series.html">Turning series on/off</a></li>
<li><a href="selection.html">Rectangular selection support and zooming</a> and <a href="zooming.html">zooming with overview</a> (both with selection plugin)</li>
<li><a href="interacting.html">Interacting with the data points</a></li>
<li><a href="interacting.html">Interacting with the data points</a> and <a href="interacting_bars.html">with bars</a></li>
<li><a href="navigate.html">Panning and zooming</a> (with navigation plugin)</li>
<li><a href="resize.html">Automatically redraw when window is resized</a> (with resize plugin)</li>
<li><a href="interacting_edit.html">Editing points by drag and drop</a></li>
</ul>

<p>Various features:</p>
Expand Down
101 changes: 101 additions & 0 deletions examples/interacting_Bars.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples</title>
<link href="layout.css" rel="stylesheet" type="text/css">
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="../jquery.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
</head>
<body>
<h1>Flot Examples</h1>

<div id="placeholder" style="width:600px;height:300px"></div>

<p>One of the goals of Flot is to support user interactions. Try
pointing and clicking on the points.</p>

<p>
<label><input id="enablePosition" type="checkbox">Show mouse position</label>
<span id="hoverdata"></span>
<span id="clickdata"></span>
</p>

<p>A tooltip is easy to build with a bit of jQuery code and the
data returned from the plot.</p>

<p><label><input id="enableTooltip" type="checkbox">Enable tooltip</label></p>

<script type="text/javascript">
$(function () {
var sin = [], cos = [], bar = [] ;
for (var i = 0; i < 14; i += 0.5) {
sin.push([i, Math.sin(i)]);
cos.push([i, Math.cos(i)]);
}
for (var i = 0; i < 14; i++)
{ bar.push([i,i/30]); }
bar.push([10.5,0.3]);

var plot = $.plot($("#placeholder"),
[ { data: sin, label: "sin(x)", lines: { show:true} }
, { data: cos, label: "cos(x)", points: {show:true} }
, { data:bar, label: "bars(x)", bars: {show: true, barWidth:0.3 } }
]
, {
grid: { hoverable: true, clickable: true },
yaxis: { min: -1.2, max: 1.2 }
});

function showTooltip(x, y, contents) {
$('<div id="tooltip">' + contents + '</div>').css( {
position: 'absolute',
display: 'none',
top: y + 5,
left: x + 5,
border: '1px solid #fdd',
padding: '2px',
'background-color': '#fee',
opacity: 0.80
}).appendTo("body").fadeIn(200);
}

var previousPoint = null;
$("#placeholder").bind("plothover", function (event, pos, item) {
if ($("#enablePosition:checked").length > 0) {
var str = "(" + pos.x.toFixed(2) + ", " + pos.y.toFixed(2) + ")";
$("#hoverdata").text(str);
}

if ($("#enableTooltip:checked").length > 0) {
if (item) {
if (previousPoint != item.dataIndex) {
previousPoint = item.dataIndex;

$("#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 {
$("#tooltip").remove();
previousPoint = null;
}
}
});

$("#placeholder").bind("plotclick", function (event, pos, item) {
if (item) {
$("#clickdata").text(" - click point " + item.dataIndex + " in " + item.series.label);
plot.highlight(item.series, item.datapoint);
}
});
});
</script>

</body>
</html>
100 changes: 100 additions & 0 deletions examples/interacting_edit.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples</title>
<link href="layout.css" rel="stylesheet" type="text/css">
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="../jquery.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
</head>
<body>
<h1>Flot Examples</h1>

<div id="placeholder" style="width:600px;height:300px"></div>

<p>One of the goals of Flot is to support user interactions. Try
pointing and clicking on the points.</p>
<p>Next drag and drop a point to somewhere inside the chart, and see feedback in bold (below)</p>
<p id="hoverdata">Mouse hovers at
(<span id="x">0</span>, <span id="y">0</span>).
<br><span id="clickdata"></span>
<br><span id="dragdropdata"></span></p>

<p>A tooltip is easy to build with a bit of jQuery code and the
data returned from the plot.</p>

<p><input id="enableTooltip" type="checkbox">Enable tooltip</p>

<script type="text/javascript">
$(function () {
var sin = [], cos = [];
for (var i = 0; i < 14; i += 0.5) {
sin.push([i, Math.sin(i)]);
cos.push([i, Math.cos(i)]);
}

var plot = $.plot($("#placeholder"),
[ { data: sin, label: "sin(x)"}, { data: cos, label: "cos(x)" } ], {
series: { editMode: 'xy',
lines: { show: true },
points: { show: true }
},
grid: { hoverable: true, clickable: true, editable: true },
yaxis: { min: -1.2, max: 1.2 }
});
function showTooltip(x, y, contents) {
$('<div id="tooltip">' + contents + '</div>').css( {
position: 'absolute',
display: 'none',
top: y + 5,
left: x + 5,
border: '1px solid #fdd',
padding: '2px',
'background-color': '#fee',
opacity: 0.80
}).appendTo("body").fadeIn(200);
}

var previousPoint = null;
$("#placeholder").bind("plothover", function (event, pos, item) {
$("#x").text(pos.x.toFixed(2));
$("#y").text(pos.y.toFixed(2));

if ($("#enableTooltip:checked").length > 0) {
if (item) {
if (previousPoint != item.dataIndex) {
previousPoint = item.dataIndex;

$("#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 {
$("#tooltip").remove();
previousPoint = null;
}
}
});

$("#placeholder").bind("plotclick", function (event, pos, item) {
if (item) {
$("#clickdata").html("<i> You clicked point " + item.dataIndex + " in " + item.series.label + ".</i>");
plot.highlight(item.series, item.datapoint);
}
});
$("#placeholder").bind("datadrop", function(event,pos,item) {
var txt = "Datapoint(" + item.seriesIndex + "," + item.dataIndex + ") dragged";
txt+= "\nfrom " + item.datapoint[0].toFixed(2) + " , " + item.datapoint[1].toFixed(2);
txt+= "\nto " + pos.x1.toFixed(2) + " , " + pos.y1.toFixed(2);
$("#dragdropdata").html("<b>" + txt + "</b>");
})
});
</script>

</body>
</html>
Loading