cleaned JS for tooltips

This commit is contained in:
Martynas Mickevicius
2010-07-22 14:30:02 +03:00
parent bcbd662f48
commit e3736762ae
2 changed files with 81 additions and 81 deletions

View File

@@ -1,7 +1,9 @@
/* /*
pMap - a JavaScript to add image map support to pChart graphs! pMap - a JavaScript to add image map support to pChart graphs!
Copyright (C) 2008 Jean-Damien POGOLOTTI Copyright (C) 2008 Jean-Damien POGOLOTTI
Copyright (C) 2010 Martynas Mickevicius
Version 1.1 last updated on 08/20/08 Version 1.1 last updated on 08/20/08
Version 1.2 last updated on 07/22/10
http://pchart.sourceforge.net http://pchart.sourceforge.net
@@ -19,51 +21,32 @@
along with this program. If not, see <http://www.gnu.org/licenses/>. along with this program. If not, see <http://www.gnu.org/licenses/>.
*/ */
var pMap_IE = document.all?true:false; var imageMap = {
var pMap_ImageMap = new Array(); 'mouseMoved': function(event, cont) {
var pMap_ImageID = ""; // get mouse coordinated relative to image
var pMap_MouseX = 0; mouseX = event.pageX - cont.offsetLeft;
var pMap_MouseY = 0; mouseY = event.pageY - cont.offsetTop;
var pMap_CurrentKey = -1;
var pMap_URL = "";
var pMap_Tries = 0;
var pMap_MaxTries = 5;
var pMap_HTTP_Timeout = 1000;
var pMap_MUTEX = false;
var pMap_MUTEX_Timeout = 100;
if (!pMap_IE) { document.captureEvents(Event.MOUSEMOVE); } //console.log("X: " + mouseX + ", Y: " + mouseY);
function getMousePosition(e) //return;
{
/* Protect against event storm */
if (pMap_MUTEX) { return(0);}
pMap_MUTEX = true;
setTimeout("pMap_MUTEX=false",pMap_MUTEX_Timeout);
/* Determine mouse position over the chart */
if (pMap_IE)
{ pMap_MouseX = event.clientX + document.body.scrollLeft; pMap_MouseY = event.clientY + document.body.scrollTop; }
else
{ pMap_MouseX = e.pageX; pMap_MouseY = e.pageY; }
pMap_MouseX -= document.getElementById(pMap_ImageID).offsetLeft;
pMap_MouseY -= document.getElementById(pMap_ImageID).offsetTop;
/* Check if we are flying over a map zone /* Check if we are flying over a map zone
* Lets use the following method to check if a given * Lets use the following method to check if a given
* point is in any convex polygon. * point is in any convex polygon.
* http://www.programmingforums.org/post168124-3.html * http://www.programmingforums.org/post168124-3.html
*/ */
Found = false; found = false;
for (Key in pMap_ImageMap) for (key in this.imageMap)
{ {
Values = Key.split("--"); values = key.split("--");
SeriesName = Values[0]; seriesName = values[0];
SeriesValue = Values[1]; seriesValue = values[1];
SignSum = 0;
for (i = 0; i <= pMap_ImageMap[Key].length - 1; i++) signSum = 0;
for (i = 0; i <= this.imageMap[key].length - 1; i++)
{ {
if (i == pMap_ImageMap[Key].length - 1) if (i == this.imageMap[key].length - 1)
{ {
index1 = i; index1 = i;
index2 = 0; index2 = 0;
@@ -73,34 +56,51 @@
index1 = i; index1 = i;
index2 = i+1; index2 = i+1;
} }
result = getDeterminant( result = this.getDeterminant(
pMap_ImageMap[Key][index1][0], this.imageMap[key][index1][0],
pMap_ImageMap[Key][index1][1], this.imageMap[key][index1][1],
pMap_ImageMap[Key][index2][0], this.imageMap[key][index2][0],
pMap_ImageMap[Key][index2][1], this.imageMap[key][index2][1],
pMap_MouseX, mouseX,
pMap_MouseY mouseY
); );
if (result > 0) { SignSum += 1; } else { SignSum += -1; } if (result > 0) { signSum += 1; } else { signSum += -1; }
} }
//console.log(Key+": "+SignSum); //console.log(Key+": "+SignSum);
if (Math.abs(SignSum) == pMap_ImageMap[Key].length) if (Math.abs(signSum) == this.imageMap[key].length)
{ {
Found = true; found = true;
if ( pMap_CurrentKey != Key ) if (this.currentKey != key)
{ overlib(SeriesValue, CAPTION, SeriesName, WIDTH, 80); pMap_CurrentKey = Key; } {
overlib(seriesValue, CAPTION, seriesName, WIDTH, 80);
this.currentKey = key;
} }
} }
if ( !Found && pMap_CurrentKey != -1 ) { nd(); pMap_CurrentKey = -1; }
} }
if (!found && this.currentKey != -1 )
{
nd();
this.currentKey = -1;
}
},
function getDeterminant(X1, Y1, X2, Y2, X3, Y3) 'getDeterminant': function (X1, Y1, X2, Y2, X3, Y3) {
{
return (X2*Y3 - X3*Y2) - (X1*Y3 - X3*Y1) + (X1*Y2 - X2*Y1); return (X2*Y3 - X3*Y2) - (X1*Y3 - X3*Y1) + (X1*Y2 - X2*Y1);
} },
function LoadImageMap(ID, map) 'loadImageMap': function(map) {
{ imageMap.imageMap = JSON.parse(map);
pMap_ImageID = ID; },
pMap_ImageMap = JSON.parse(map);
'init': function() {
$("img#chart").bind('mousemove',function(e) {
imageMap.mouseMoved(e, this);
});
this.currentKey = -1;
} }
};
$(document).ready(function() {
imageMap.init()
});

View File

@@ -134,10 +134,10 @@ abstract class PMA_pChart_Chart extends PMA_Chart
$this->prepareChart(); $this->prepareChart();
$this->render(); $this->render();
$returnData = '<img id="chart" src="data:image/png;base64,'.$this->imageEncoded.'" OnMouseMove="getMousePosition(event);" OnMouseOut="nd();"/>'; $returnData = '<img id="chart" src="data:image/png;base64,'.$this->imageEncoded.'" />';
$returnData .= ' $returnData .= '
<script type="text/javascript"> <script type="text/javascript">
LoadImageMap("chart", \''.json_encode($this->getImageMap()).'\'); imageMap.loadImageMap(\''.json_encode($this->getImageMap()).'\');
</script> </script>
'; ';