ChartDirector General - View Thread 1267773839

ChartDirector General

Forum Home

Search

Message List Post Message

[Mar-05-2010 15:23] scrolldemo and tooltip map (mirku)
- [Mar-05-2010 23:48] Re: scrolldemo and tooltip map (Peter Kwan)
  - [Mar-06-2010 15:43] Re: scrolldemo and tooltip map (Mirku)

scrolldemo and tooltip map

Posted by mirku on Mar-05-2010 15:23

hello!
Here is a sample of modified (from the zoomscrolldemo)code that uses some values from a database and then plots them to a XY linechart using the WebChartViewer object with the possibility to use the scroll on the X axis!
I also use a javascript called "wz_tooltip.js" for showing a tooltip with the mapped values from the image chart!

The chart displays fine and the scroll is working but the tooltip is not working as it should be.
On the first load of the chart "createFirstChart($viewer);" the tooltip is displayed correctly for the values of the portion of the chart that is shown but when a scroll on the X axis is performed and the chart is redraw the tooltip is not working any more.
why? i don't know

. Maybe the image map name changes ??

I also added the source code of the html generated by the browser where you can clearly see the image mapped points!

Thank you!

zoomscrolldemo.php

<?php
require_once("phpchartdir.php");

#DB connection 
$linksql=mssql_connect("someserver","someuser","somepassword") or die("Link error!"); 
$dbsql=mssql_select_db("poids",$linksql) or die("DB select error!"); 
$selectsql="some table";
$tablesql=$selectsql; // Table name 
$mssql="select * from $tablesql";
$resultsql=mssql_query($mssql,$linksql) or $resultsql=1;
$i=0;
while($row=mssql_fetch_array($resultsql))
 {  

		   $index[$i]=$row[0];
		   $data[$i]=$row[4];
		   $i++;
}
#/
#/ We need to handle 3 types of request:
#/ - initial request for the full web page
#/ - partial update (AJAX chart update) to update the chart without reloading the page
#/ - full page update for old browsers that does not support partial updates
#/

# The total date range of all data.
$startDate = null;
$endDate = null;

# The date range of the data that we zoomed into (visible on the chart).
$viewPortStartDate = null;
$viewPortEndDate = null;

#/ <summary>
#/ Handles the initial request
#/ </summary>
#/ <param name="WebChartViewer">The WebChartViewer object to handle the chart.</param>
function createFirstChart(&$viewer) {

    global $startDate, $endDate, $viewPortStartDate, $viewPortEndDate,$index;

    # Initialize the Javascript ChartViewer
    $viewer->setMouseUsage(MouseUsageScroll);

    
    $endDate =count($index)-1; 
    $startDate = $index[0];

    # Initially set the view port to show data for the first year
    $viewPortStartDate = $index[0];
    $viewPortEndDate = $index[50];

    # We store the scroll range as custom Javascript ChartViewer attributes, so the range can be
    # retrieved later in partial or full update requests
    $viewer->setCustomAttr("startDate", $startDate);
    $viewer->setCustomAttr("endDate", $endDate);

    # In this demo, we set the maximum zoom-in to 10 days
    $viewer->setZoomInWidthLimit(0.1);

    # Draw the chart
    drawChart($viewer);
}


#/ <summary>
#/ Handles partial update (AJAX chart update)
#/ </summary>
#/ <param name="WebChartViewer">The WebChartViewer object to handle the chart.</param>
function processPartialUpdate(&$viewer) {

    global $startDate, $endDate, $viewPortStartDate, $viewPortEndDate;

    # Retrieve the overall date range from custom Javascript ChartViewer attributes.
    $startDate = $viewer->getCustomAttr("startDate");
    $endDate = $viewer->getCustomAttr("endDate");

    # Now we need to determine the visible date range selected by the user. There are two
    # possibilities. The user may use the zoom/scroll features of the Javascript ChartViewer to
    # select the range, or s/he may use the start date / end date select boxes to select the date
    # range.

    if ($viewer->isViewPortChangedEvent()) {
        # Is a view port change event from the Javascript ChartViewer, so we should get the selected
        # date range from the ChartViewer view port settings.
        $duration = $endDate - $startDate;
        $viewPortStartDate = $startDate + (int)(0.9 + $viewer->getViewPortLeft() * $duration);
        $viewPortEndDate = $viewPortStartDate + (int)(0.9 + $viewer->getViewPortWidth() * $duration)
            ;
    } 

    # Draw the chart
    drawChart($viewer);
 
}


#/ <summary>
#/ Handles full update
#/ </summary>
#/ <param name="WebChartViewer">The WebChartViewer object to handle the chart.</param>
function processFullUpdate(&$viewer) {
    # A full chart update is essentially the same as a partial chart update. The main difference is
    # that in a full chart update, the start date / end date select boxes are in Form Post
    # variables, while in partial chart update, they are in Javascript ChartViewer custom
    # attributes.
    #
    # So a simple implementation of the full chart update is to copy the Form Post values to the
    # Javascript ChartViewer custom attributes, and then call the partial chart update.


    # Now can use partial chart update
    processPartialUpdate($viewer);
}


#/ <summary>
#/ Draw the chart
#/ </summary>
#/ <param name="WebChartViewer">The WebChartViewer object to handle the chart.</param>
function drawChart(&$viewer) {

    global $startDate, $endDate, $viewPortStartDate, $viewPortEndDate,$index,$data;

    #
    # Validate and adjust the view port dates.
    #

    # Verify if the view port dates are within limits
    $totalDuration = $endDate - $startDate;
    $minDuration = $viewer->getZoomInWidthLimit() * $totalDuration;
    if ($viewPortStartDate < $startDate) {
        $viewPortStartDate = $startDate;
    }
    if ($endDate - $viewPortStartDate < $minDuration) {
        $viewPortStartDate = $endDate - $minDuration;
    }
    if ($viewPortEndDate > $endDate) {
        $viewPortEndDate = $endDate;
    }
    if ($viewPortEndDate - $viewPortStartDate < $minDuration) {
        $viewPortEndDate = $viewPortStartDate + $minDuration;
    }

    # Adjust the view port to reflect the selected date range
    $viewer->setViewPortWidth(($viewPortEndDate - $viewPortStartDate) / $totalDuration);
    $viewer->setViewPortLeft(($viewPortStartDate - $startDate) / $totalDuration);

    #
    # Now we have the date range, we can get the necessary data. In this demo, we just use a random
    # number generator. In practice, you may get the data from a database or XML or by other means.
    # (See "Using Data Sources with ChartDirector" in the ChartDirector documentation if you need
    # some sample code on how to read data from database to array variables.)
    #

    # Emulate getting the random data from the table
    $timeStamps = $index;
   

    if (count($timeStamps) >= 520) {
        #
        # Zoomable chart with high zooming ratios often need to plot many thousands of points when
        # fully zoomed out. However, it is usually not needed to plot more data points than the
        # pixel resolution of the chart. Plotting too many points may cause the points and the lines
        # to overlap on the same pixel. So rather than increasing resolution, this reduces the
        # clarity of the chart. It is better to aggregate the data first if there are too many
        # points.
        #
        # In our current example, the chart plot area only has 520 pixels in width and is using a 2
        # pixel line width. So if there are more than 520 data points, we aggregate the data using
        # the ChartDirector aggregation utility method.
        #
        # If in your real application, you do not have too many data points, you may remove the
        # following code altogether.
        #

        # Set up an aggregator to aggregate the data based on regular sized slots
        $m = new ArrayMath($timeStamps);
        $m->selectRegularSpacing(count($timeStamps) / 260);

        # For the timestamps, take the first timestamp on each slot
        $timeStamps = $m->aggregate($timeStamps, AggregateFirst);

        # For the data values, take the averages
        $data = $m->aggregate($data, AggregateAvg);
        
    }

    #
    # Now we have obtained the data, we can plot the chart.
    #

    #================================================================================
    # Step 1 - Configure overall chart appearance.
    #================================================================================

    # Create an XYChart object 600 x 300 pixels in size, with pale blue (0xf0f0ff) background, black
    # (000000) rounded border, 1 pixel raised effect.
    $c = new XYChart(1600, 500, 0xf0f0ff, 0x000000);
    $c->setRoundedFrame();

    # Set the plotarea at (52, 60) and of size 520 x 192 pixels. Use white (ffffff) background.
    # Enable both horizontal and vertical grids by setting their colors to grey (cccccc). Set
    # clipping mode to clip the data lines to the plot area.
    $c->setPlotArea(55, 60, 1500, 400, 0xffffff, -1, -1, 0xcccccc, 0xcccccc);
    $c->setClipping();

    # Add a top title to the chart using 15 pts Times New Roman Bold Italic font, with a light blue
    # (ccccff) background, black (000000) border, and a glass like raised effect.
    $textBoxObj = $c->addTitle("Demonstration", "timesbi.ttf", 15);
    $textBoxObj->setBackground(0xccccff, 0x000000, glassEffect());

    # background.
    $textBoxObj->setBackground(0xccccff);

    # Add a legend box at the top of the plot area with 9pts Arial Bold font with flow layout.
    $legendObj = $c->addLegend(50, 33, false, "arialbd.ttf", 9);
    $legendObj->setBackground(Transparent, Transparent);

    # Set axes width to 2 pixels
    $c->xAxis->setWidth(2);
    $c->yAxis->setWidth(2);

    # Add a title to the y-axis
    $c->yAxis->setTitle("data Kg", "arialbd.ttf", 10);

    #================================================================================
    # Step 2 - Add data to chart
    #================================================================================

    #
    # In this example, we represent the data by lines. You may modify the code below if you want to
    # use other representations (areas, scatter plot, etc).
    #

    # Add a line layer for the lines, using a line width of 2 pixels
    $layer = $c->addLineLayer2();
    $layer->setLineWidth(2);

    # Now we add the 3 data series to a line layer, using the color red (ff0000), green (00cc00) and
    # blue (0000ff)
    $layer->setXData($timeStamps);
    $layer->addDataSet($data, 0xff0000, "data");
    

    #================================================================================
    # Step 3 - Set up x-axis scale
    #================================================================================

    # Set x-axis date scale to the view port date range. ChartDirector auto-scaling will
    # automatically determine the ticks on the axis.
    $c->xAxis->setDateScale($viewPortStartDate, $viewPortEndDate);
    $c->xAxis->setLabelFormat("{value}");

   #================================================================================
    # Step 4 - Set up y-axis scale
    #================================================================================

  
    #================================================================================
    # Step 5 - Output the chart
    #================================================================================

    # Create the image and save it in a temporary location
    $chartQuery = $c->makeSession($viewer->getId());
    # Client side Javascript to show detail information "onmouseover"
    $showText = "onmouseover=\\"this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('{xLabel}', {value}));\\" ";

    # Include tool tip for the chart
    $imageMap = $c->getHTMLImageMap("", "","$showText");

    # Set the chart URL, image map, and chart metrics to the viewer. For the image map, we use
    # delayed delivery and with compression, so the chart image will show up quicker.
    $viewer->setImageUrl("getchart.php?".$chartQuery);
    $viewer->setImageMap($imageMap);
    $viewer->setChartMetrics($c->getChartMetrics());
}





# Create the WebChartViewer object
$viewer = new WebChartViewer("chart1");
if ($viewer->isPartialUpdateRequest()) {
    # Is a partial update request (AJAX chart update)
    processPartialUpdate($viewer);
    # Since it is a partial update, there is no need to output the entire web page. We stream the
    # chart and then terminate the script immediately.
    print($viewer->partialUpdateChart());
    exit();
} else if ($viewer->isFullUpdateRequest()) {
    # Is a full update request
    processFullUpdate($viewer);
} else {
    # Is a initial request
    createFirstChart($viewer);
}


?>
<html>
<head>
    <script>

function tooltipp(Xvalue,Yvalue)
{return Yvalue + " Kg - " + Xvalue;}
</script>
    <script language="Javascript" src="cdjcv.js"></script>
    <style>
        div.chartPushButtonSelected { padding:5px; background:#ccffcc; cursor:hand; }
        div.chartPushButton { padding:5px; cursor:hand; }
        td.chartPushButton { font-family:Verdana; font-size:9pt; cursor:pointer; border-bottom:#000000 1px solid; }
    </style>
</head>
<body leftMargin="0" topMargin="0" onload="initJsChartViewer()">
<script>
// Initialize browser side Javascript controls
function initJsChartViewer()
{
    // Check if the Javascript ChartViewer library is loaded
    if (!window.JsChartViewer)
        return;

    // Get the Javascript ChartViewer object
    var viewer = JsChartViewer.get('<?php echo $viewer->getId()?>');

    
   
    // Detect if browser is capable of support partial update (AJAX chart update)
    if (JsChartViewer.canSupportPartialUpdate())
    {
        // Browser can support partial update, so connect the view port change event and
        // the submit button to trigger a partial update
        viewer.attachHandler("ViewPortChanged", viewer.partialUpdate);

    }
    else
        // Browser cannot support partial update - so use full page update
         viewer.attachHandler("ViewPortChanged", function() { document.forms[0].submit(); });
}

</script>

<?php echo $viewer->renderHTML()
?>
       
<script language="JavaScript" type="text/javascript" src="wz_tooltip.js"></script>
</body>
</html>

wz_tooltip.js
17.07 Kb

html source.txt

<html>
<head>
    <script>

function tooltipp(Xvalue,Yvalue)
{return Yvalue + " Kg - " + Xvalue;}
</script>
    <script language="Javascript" src="cdjcv.js"></script>
    <style>
        div.chartPushButtonSelected { padding:5px; background:#ccffcc; cursor:hand; }
        div.chartPushButton { padding:5px; cursor:hand; }
        td.chartPushButton { font-family:Verdana; font-size:9pt; cursor:pointer; border-bottom:#000000 1px solid; }
    </style>
</head>
<body leftMargin="0" topMargin="0" onload="initJsChartViewer()">
<script>
// Initialize browser side Javascript controls
function initJsChartViewer()
{
    // Check if the Javascript ChartViewer library is loaded
    if (!window.JsChartViewer)
        return;

    // Get the Javascript ChartViewer object
    var viewer = JsChartViewer.get('chart1');

    
   
    // Detect if browser is capable of support partial update (AJAX chart update)
    if (JsChartViewer.canSupportPartialUpdate())
    {
        // Browser can support partial update, so connect the view port change event and
        // the submit button to trigger a partial update
        viewer.attachHandler("ViewPortChanged", viewer.partialUpdate);

    }
    else
        // Browser cannot support partial update - so use full page update
         viewer.attachHandler("ViewPortChanged", function() { document.forms[0].submit(); });
}

</script>

<input type='hidden' id='chart1_JsChartViewerState' name='chart1_JsChartViewerState' value='0*551*6010*215*0.100000000000000012*15003*4004*06*0.3289473684210526524**endDate**153startDate**1' /><input type='hidden' id='chart1_callBackURL' name='chart1_callBackURL' value='/chartdemo/zoomscrolldemo.php?cdLoopBack=1' /><map id='map_chart1' name='map_chart1'><area shape="poly" coords="50,365,65,256,75,256,60,365" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 688));" >
<area shape="poly" coords="70,251,85,142,100,146,100,156,85,152,70,261" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('2', 718));" >
<area shape="poly" coords="100,146,115,150,130,182,130,192,115,160,100,156" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 717));" >
<area shape="poly" coords="130,182,145,215,160,215,160,225,145,225,130,192" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('4', 708));" >
<area shape="poly" coords="160,215,175,215,190,204,190,214,175,225,160,225" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 708));" >
<area shape="poly" coords="190,204,205,193,220,171,220,181,205,203,190,214" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('6', 711));" >
<area shape="poly" coords="220,171,235,150,250,157,250,167,235,160,220,181" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 717));" >
<area shape="poly" coords="250,157,265,164,280,175,280,185,265,174,250,167" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('8', 715));" >
<area shape="poly" coords="280,175,295,186,310,208,310,218,295,196,280,185" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 712));" >
<area shape="poly" coords="310,208,325,230,340,219,340,229,325,240,310,218" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('10', 706));" >
<area shape="poly" coords="340,219,355,208,370,186,370,196,355,218,340,229" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 709));" >
<area shape="poly" coords="370,186,385,164,400,149,400,159,385,174,370,196" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('12', 715));" >
<area shape="poly" coords="400,149,415,135,430,146,430,156,415,145,400,159" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 719));" >
<area shape="poly" coords="430,146,445,157,460,168,460,178,445,167,430,156" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('14', 716));" >
<area shape="poly" coords="460,168,475,179,490,193,490,203,475,189,460,178" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 713));" >
<area shape="poly" coords="490,193,505,208,520,193,520,203,505,218,490,203" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('16', 709));" >
<area shape="poly" coords="520,193,535,179,550,189,550,199,535,189,520,203" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 713));" >
<area shape="poly" coords="550,189,565,200,580,185,580,195,565,210,550,199" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('18', 710));" >
<area shape="poly" coords="580,185,595,171,610,178,610,188,595,181,580,195" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 714));" >
<area shape="poly" coords="610,178,625,186,640,189,640,199,625,196,610,188" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('20', 712));" >
<area shape="poly" coords="640,189,655,193,670,244,670,254,655,203,640,199" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 711));" >
<area shape="poly" coords="670,244,685,295,700,287,700,297,685,305,670,254" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('22', 697));" >
<area shape="poly" coords="700,287,715,280,730,215,730,225,715,290,700,297" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 699));" >
<area shape="poly" coords="730,215,745,150,760,146,760,156,745,160,730,225" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('24', 717));" >
<area shape="poly" coords="760,146,775,142,790,146,790,156,775,152,760,156" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 718));" >
<area shape="poly" coords="790,146,805,150,820,197,820,207,805,160,790,156" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('26', 717));" >
<area shape="poly" coords="820,197,835,244,850,258,850,268,835,254,820,207" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 704));" >
<area shape="poly" coords="850,258,865,273,880,284,880,294,865,283,850,268" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('28', 700));" >
<area shape="poly" coords="880,284,895,295,910,298,910,308,895,305,880,294" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 697));" >
<area shape="poly" coords="910,298,925,302,940,215,940,225,925,312,910,308" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('30', 696));" >
<area shape="poly" coords="940,215,955,128,970,117,970,127,955,138,940,225" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 720));" >
<area shape="poly" coords="970,117,985,106,1000,128,1000,138,985,116,970,127" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('32', 723));" >
<area shape="poly" coords="1000,128,1015,150,1030,175,1030,185,1015,160,1000,138" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 717));" >
<area shape="poly" coords="1030,175,1045,200,1060,225,1060,235,1045,210,1030,185" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('34', 710));" >
<area shape="poly" coords="1060,225,1075,251,1090,222,1090,232,1075,261,1060,235" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 703));" >
<area shape="poly" coords="1090,222,1105,193,1120,156,1120,166,1105,203,1090,232" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('36', 711));" >
<area shape="poly" coords="1120,156,1135,120,1150,131,1150,141,1135,130,1120,166" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 721));" >
<area shape="poly" coords="1150,131,1165,142,1180,186,1180,196,1165,152,1150,141" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('38', 718));" >
<area shape="poly" coords="1180,186,1195,230,1210,237,1210,247,1195,240,1180,196" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 706));" >
<area shape="poly" coords="1210,237,1225,244,1240,237,1240,247,1225,254,1210,247" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('40', 704));" >
<area shape="poly" coords="1240,237,1255,230,1270,190,1270,200,1255,240,1240,247" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 706));" >
<area shape="poly" coords="1270,190,1285,150,1300,146,1300,156,1285,160,1270,200" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('42', 717));" >
<area shape="poly" coords="1300,146,1315,142,1330,171,1330,181,1315,152,1300,156" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 718));" >
<area shape="poly" coords="1330,171,1345,200,1360,207,1360,217,1345,210,1330,181" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('44', 710));" >
<area shape="poly" coords="1360,207,1375,215,1390,175,1390,185,1375,225,1360,217" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 708));" >
<area shape="poly" coords="1390,175,1405,135,1420,127,1420,137,1405,145,1390,185" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('46', 719));" >
<area shape="poly" coords="1420,127,1435,120,1450,164,1450,174,1435,130,1420,137" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 721));" >
<area shape="poly" coords="1450,164,1465,208,1480,222,1480,232,1465,218,1450,174" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('48', 709));" >
<area shape="poly" coords="1480,222,1495,237,1510,273,1510,283,1495,247,1480,232" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 705));" >
<area shape="poly" coords="1510,273,1525,310,1540,262,1540,272,1525,320,1510,283" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('50', 695));" >
<area shape="poly" coords="1540,262,1555,215,1570,193,1570,203,1555,225,1540,272" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 708));" >
<area shape="poly" coords="1570,193,1585,171,1600,160,1600,170,1585,181,1570,203" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 714));" >
<area shape="poly" coords="1600,160,1615,150,1630,150,1630,160,1615,160,1600,170" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 717));" >
<area shape="poly" coords="1630,150,1645,150,1660,157,1660,167,1645,160,1630,160" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 717));" >
<area shape="poly" coords="1660,157,1675,164,1690,171,1690,181,1675,174,1660,167" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 715));" >
<area shape="poly" coords="1690,171,1705,179,1720,189,1720,199,1705,189,1690,181" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 713));" >
<area shape="poly" coords="1720,189,1735,200,1750,207,1750,217,1735,210,1720,199" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 710));" >
<area shape="poly" coords="1750,207,1765,215,1780,215,1780,225,1765,225,1750,217" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 708));" >
<area shape="poly" coords="1780,215,1795,215,1810,204,1810,214,1795,225,1780,225" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 708));" >
<area shape="poly" coords="1810,204,1825,193,1840,193,1840,203,1825,203,1810,214" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 711));" >
<area shape="poly" coords="1840,193,1855,193,1870,178,1870,188,1855,203,1840,203" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 711));" >
<area shape="poly" coords="1870,178,1885,164,1900,146,1900,156,1885,174,1870,188" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 715));" >
<area shape="poly" coords="1900,146,1915,128,1930,186,1930,196,1915,138,1900,156" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 720));" >
<area shape="poly" coords="1930,186,1945,244,1960,215,1960,225,1945,254,1930,196" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 704));" >
<area shape="poly" coords="1960,215,1975,186,1990,193,1990,203,1975,196,1960,225" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 712));" >
<area shape="poly" coords="1990,193,2005,200,2020,189,2020,199,2005,210,1990,203" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 710));" >
<area shape="poly" coords="2020,189,2035,179,2050,149,2050,159,2035,189,2020,199" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 713));" >
<area shape="poly" coords="2050,149,2065,120,2080,120,2080,130,2065,130,2050,159" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 721));" >
<area shape="poly" coords="2080,120,2095,120,2110,171,2110,181,2095,130,2080,130" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 721));" >
<area shape="poly" coords="2110,171,2125,222,2140,240,2140,250,2125,232,2110,181" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 707));" >
<area shape="poly" coords="2140,240,2155,259,2170,222,2170,232,2155,269,2140,250" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 702));" >
<area shape="poly" coords="2170,222,2185,186,2200,175,2200,185,2185,196,2170,232" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 712));" >
<area shape="poly" coords="2200,175,2215,164,2230,138,2230,148,2215,174,2200,185" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 715));" >
<area shape="poly" coords="2230,138,2245,113,2260,124,2260,134,2245,123,2230,148" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 722));" >
<area shape="poly" coords="2260,124,2275,135,2290,157,2290,167,2275,145,2260,134" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 719));" >
<area shape="poly" coords="2290,157,2305,179,2320,204,2320,214,2305,189,2290,167" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 713));" >
<area shape="poly" coords="2320,204,2335,230,2350,222,2350,232,2335,240,2320,214" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 706));" >
<area shape="poly" coords="2350,222,2365,215,2380,207,2380,217,2365,225,2350,232" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 708));" >
<area shape="poly" coords="2380,207,2395,200,2410,193,2410,203,2395,210,2380,217" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 710));" >
<area shape="poly" coords="2410,193,2425,186,2440,182,2440,192,2425,196,2410,203" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 712));" >
<area shape="poly" coords="2440,182,2455,179,2470,193,2470,203,2455,189,2440,192" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 713));" >
<area shape="poly" coords="2470,193,2485,208,2500,204,2500,214,2485,218,2470,203" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 709));" >
<area shape="poly" coords="2500,204,2515,200,2530,207,2530,217,2515,210,2500,214" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 710));" >
<area shape="poly" coords="2530,207,2545,215,2560,189,2560,199,2545,225,2530,217" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 708));" >
<area shape="poly" coords="2560,189,2575,164,2590,160,2590,170,2575,174,2560,199" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 715));" >
<area shape="poly" coords="2590,160,2605,157,2620,149,2620,159,2605,167,2590,170" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 716));" >
<area shape="poly" coords="2620,149,2635,142,2650,164,2650,174,2635,152,2620,159" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 718));" >
<area shape="poly" coords="2650,164,2665,186,2680,197,2680,207,2665,196,2650,174" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 712));" >
<area shape="poly" coords="2680,197,2695,208,2710,215,2710,225,2695,218,2680,207" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 709));" >
<area shape="poly" coords="2710,215,2725,222,2740,211,2740,221,2725,232,2710,225" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 707));" >
<area shape="poly" coords="2740,211,2755,200,2770,200,2770,210,2755,210,2740,221" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 710));" >
<area shape="poly" coords="2770,200,2785,200,2800,164,2800,174,2785,210,2770,210" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 710));" >
<area shape="poly" coords="2800,164,2815,128,2830,113,2830,123,2815,138,2800,174" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 720));" >
<area shape="poly" coords="2830,113,2845,99,2860,109,2860,119,2845,109,2830,123" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 724));" >
<area shape="poly" coords="2860,109,2875,120,2890,142,2890,152,2875,130,2860,119" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 721));" >
<area shape="poly" coords="2890,142,2905,164,2920,182,2920,192,2905,174,2890,152" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 715));" >
<area shape="poly" coords="2920,182,2935,200,2950,196,2950,206,2935,210,2920,192" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 710));" >
<area shape="poly" coords="2950,196,2965,193,2980,171,2980,181,2965,203,2950,206" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 711));" >
<area shape="poly" coords="2980,171,2995,150,3010,146,3010,156,2995,160,2980,181" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 717));" >
<area shape="poly" coords="3010,146,3025,142,3040,156,3040,166,3025,152,3010,156" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 718));" >
<area shape="poly" coords="3040,156,3055,171,3070,200,3070,210,3055,181,3040,166" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 714));" >
<area shape="poly" coords="3070,200,3085,230,3100,233,3100,243,3085,240,3070,210" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 706));" >
<area shape="poly" coords="3100,233,3115,237,3130,222,3130,232,3115,247,3100,243" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 705));" >
<area shape="poly" coords="3130,222,3145,208,3160,208,3160,218,3145,218,3130,232" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 709));" >
<area shape="poly" coords="3160,208,3175,208,3190,215,3190,225,3175,218,3160,218" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 709));" >
<area shape="poly" coords="3190,215,3205,222,3220,222,3220,232,3205,232,3190,225" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 707));" >
<area shape="poly" coords="3220,222,3235,222,3250,211,3250,221,3235,232,3220,232" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 707));" >
<area shape="poly" coords="3250,211,3265,200,3280,196,3280,206,3265,210,3250,221" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 710));" >
<area shape="poly" coords="3280,196,3295,193,3310,200,3310,210,3295,203,3280,206" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 711));" >
<area shape="poly" coords="3310,200,3325,208,3340,182,3340,192,3325,218,3310,210" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 709));" >
<area shape="poly" coords="3340,182,3355,157,3370,142,3370,152,3355,167,3340,192" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 716));" >
<area shape="poly" coords="3370,142,3385,128,3400,128,3400,138,3385,138,3370,152" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 720));" >
<area shape="poly" coords="3400,128,3415,128,3430,120,3430,130,3415,138,3400,138" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 720));" >
<area shape="poly" coords="3430,120,3445,113,3460,113,3460,123,3445,123,3430,130" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 722));" >
<area shape="poly" coords="3460,113,3475,113,3490,116,3490,126,3475,123,3460,123" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 722));" >
<area shape="poly" coords="3490,116,3505,120,3520,131,3520,141,3505,130,3490,126" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 721));" >
<area shape="poly" coords="3520,131,3535,142,3550,160,3550,170,3535,152,3520,141" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 718));" >
<area shape="poly" coords="3550,160,3565,179,3580,179,3580,189,3565,189,3550,170" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 713));" >
<area shape="poly" coords="3580,179,3595,179,3610,139,3610,149,3595,189,3580,189" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 713));" >
<area shape="poly" coords="3610,139,3625,99,3640,142,3640,152,3625,109,3610,149" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 724));" >
<area shape="poly" coords="3640,142,3655,186,3670,175,3670,185,3655,196,3640,152" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 712));" >
<area shape="poly" coords="3670,175,3685,164,3700,193,3700,203,3685,174,3670,185" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 715));" >
<area shape="poly" coords="3700,193,3715,222,3730,193,3730,203,3715,232,3700,203" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 707));" >
<area shape="poly" coords="3730,193,3745,164,3760,157,3760,167,3745,174,3730,203" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 715));" >
<area shape="poly" coords="3760,157,3775,150,3790,164,3790,174,3775,160,3760,167" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 717));" >
<area shape="poly" coords="3790,164,3805,179,3820,200,3820,210,3805,189,3790,174" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 713));" >
<area shape="poly" coords="3820,200,3835,222,3850,215,3850,225,3835,232,3820,210" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 707));" >
<area shape="poly" coords="3850,215,3865,208,3880,197,3880,207,3865,218,3850,225" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 709));" >
<area shape="poly" coords="3880,197,3895,186,3910,222,3910,232,3895,196,3880,207" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 712));" >
<area shape="poly" coords="3910,222,3925,259,3940,197,3940,207,3925,269,3910,232" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 702));" >
<area shape="poly" coords="3940,197,3955,135,3970,149,3970,159,3955,145,3940,207" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 719));" >
<area shape="poly" coords="3970,149,3985,164,4000,146,4000,156,3985,174,3970,159" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 715));" >
<area shape="poly" coords="4000,146,4015,128,4030,124,4030,134,4015,138,4000,156" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 720));" >
<area shape="poly" coords="4030,124,4045,120,4060,124,4060,134,4045,130,4030,134" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 721));" >
<area shape="poly" coords="4060,124,4075,128,4090,146,4090,156,4075,138,4060,134" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 720));" >
<area shape="poly" coords="4090,146,4105,164,4120,167,4120,177,4105,174,4090,156" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 715));" >
<area shape="poly" coords="4120,167,4135,171,4150,160,4150,170,4135,181,4120,177" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 714));" >
<area shape="poly" coords="4150,160,4165,150,4180,179,4180,189,4165,160,4150,170" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 717));" >
<area shape="poly" coords="4180,179,4195,208,4210,186,4210,196,4195,218,4180,189" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 709));" >
<area shape="poly" coords="4210,186,4225,164,4240,164,4240,174,4225,174,4210,196" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 715));" >
<area shape="poly" coords="4240,164,4255,164,4270,167,4270,177,4255,174,4240,174" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 715));" >
<area shape="poly" coords="4270,167,4285,171,4300,207,4300,217,4285,181,4270,177" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 714));" >
<area shape="poly" coords="4300,207,4315,244,4330,204,4330,214,4315,254,4300,217" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 704));" >
<area shape="poly" coords="4330,204,4345,164,4360,178,4360,188,4345,174,4330,214" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 715));" >
<area shape="poly" coords="4360,178,4375,193,4390,182,4390,192,4375,203,4360,188" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 711));" >
<area shape="poly" coords="4390,182,4405,171,4420,149,4420,159,4405,181,4390,192" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 714));" >
<area shape="poly" coords="4420,149,4435,128,4450,149,4450,159,4435,138,4420,159" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 720));" >
<area shape="poly" coords="4450,149,4465,171,4480,189,4480,199,4465,181,4450,159" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 714));" >
<area shape="poly" coords="4480,189,4495,208,4510,226,4510,236,4495,218,4480,199" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 709));" >
<area shape="poly" coords="4510,226,4525,244,4540,251,4540,261,4525,254,4510,236" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 704));" >
<area shape="poly" coords="4540,251,4555,259,4570,331,4570,341,4555,269,4540,261" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 702));" >
<area shape="poly" coords="4570,331,4585,404,4600,367,4600,377,4585,414,4570,341" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 682));" >
<area shape="poly" coords="4600,367,4615,331,4630,356,4630,366,4615,341,4600,377" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 692));" >
<area shape="poly" coords="4625,361,4640,387,4650,387,4635,361" onmouseover="this.T_SHADOWWIDTH=8;this.T_DELAY=10;this.T_FONTSIZE='15px';return escape(tooltipp('', 685));" >
</map><img id='chart1' src='getchart.php?img=chart1&id=2094e9e2574309e5a54207083121c38b4b90ae4d18421&' border='0' usemap='#map_chart1'>       
<script language="JavaScript" type="text/javascript" src="wz_tooltip.js"></script>
</body>
</html>

Re: scrolldemo and tooltip map

Posted by Peter Kwan on Mar-05-2010 23:48

Hi mirku,

If the chart changes, the image map obviously must change. Otherwise, the image map will not match with the chart.

For your case, may be your "wz_tooltips.js" does not support image maps that are modified on the fly. Currently, your code is using AJAX techniques to scroll the chart, which means the page does not refresh when the chart and image map is being updated. I know some tooltip libraries will "scan" the page when it is initially loaded to set up the tooltips, but will never scan the page again. So when the image map is updated, the tooltip library may not know.

May be you can contact the support staff of the "wz_tooltips.js" to see how it works, and whether it supports image maps that are updated using AJAX (without the page reloading).

Regards
Peter Kwan

Re: scrolldemo and tooltip map
Posted by Mirku on Mar-06-2010 15:43	\| Reply \| Monitor
OK,thanks! I'll ask them! i will post the solution here!