pChart 2.0 online documentation

Image maps

Image maps support has been introduced in the 2.1.2 version of the pChart library. Image maps allows you to create client side managed zones based on the contents of your charts. This process is completely dynamic and integrated with the pChart core functions. The image maps sent to the browser can be either managed with standard HTML operation or through a provided javascript that adds some extra visual functions (smooth move of the DIV tag, transparency, ..)

You‘ll find a live example of this feature in the examples/imageMap/ folder of the pChart library.

Server side philosophy

You must first decide where will be stored the imagemap coordinates. As of today there are two ways : in the user session or in a flat temporary file. The session is the most esthetic way but it will only work if you have one single chart using imagemap on your web page. The flat file solution will work in all cases but you must allow your webserver to create temporary files (in the folder you choose).
To initialise the image map collection you have to call the initialiseImageMap() function :

$myPicture->initialiseImageMap("ImageMapBarChart",IMAGE_MAP_STORAGE_FILE,"BarChart","../tmp");

The image maps coordinates are computed while calling a charting function (eg: drawBarChart). To enable it, you must set the RecordImageMap parameter to TRUE :

 $Settings = array("RecordImageMap"=>TRUE); 
 $myPicture->drawBarChart($Settings);

When the client will request the image map, you‘ll just have to pop it out from the store using the dumpImageMap() function :

  $myPicture->dumpImageMap("ImageMapBarChart",IMAGE_MAP_STORAGE_FILE,"BarChart","../tmp");

Client side philosophy

The client will first render the picture from an <IMG.. tag then a javascript will take over (imagemap.js). This script will check if the picture is rendered checking the img DOM object. When the image is rendered and displayed it will download the image map from the server and apply it over the picture. The only thing to do in your HTML page is to instruct the script which IMG tags must be monitored :

 <script src="imagemap.js" type="text/javascript"></script>

<img src="draw.php" id="testPicture" alt="" class="pChartPicture"/>

<script>
  addImage("testPicture","pictureMap","draw.php?ImageMap=get");
</script>

You can use the pChartPicture CSS class to remove the border of the picture that will appears when an imagemap is binded to it. just set the "border: 0px" option to this class. pictureMap is an unique identifier that will be used to import the image map coordinates and bind it to your picture.

Script example

index.html

<html>
<head></head>
<body>
 <script src="imagemap.js" type="text/javascript"></script>

<img src="draw.php" id="testPicture" alt="" class="pChartPicture"/>

<script>
  addImage("testPicture","pictureMap","draw.php?ImageMap=get");
</script>
</body>

draw.php (remember to update the PATH accordingly to your system)

 /* Library settings */
 define("CLASS_PATH", "../../../class");
 define("FONT_PATH", "../../../fonts");

 /* pChart library inclusions */
 include(CLASS_PATH."/pData.class.php");
 include(CLASS_PATH."/pDraw.class.php");
 include(CLASS_PATH."/pImage.class.php");

 /* Create and populate the pData object */
 $MyData = new pData();  
 $MyData->addPoints(array(150,220,300,-250,-420,-200,300,200,100),"Server A");
 $MyData->addPoints(array(140,0,340,-300,-320,-300,200,100,50),"Server B");
 $MyData->setAxisName(0,"Hits");
 $MyData->addPoints(array("January","February","March","April","May","Juin","July","August","September"),"Months");
 $MyData->setSerieDescription("Months","Month");
 $MyData->setAbscissa("Months");

 /* Create the pChart object */
 $myPicture = new pImage(700,230,$MyData);

 /* Retrieve the image map */
 if (isset($_GET["ImageMap"]) || isset($_POST["ImageMap"]))
  $myPicture->dumpImageMap("ImageMapBarChart",IMAGE_MAP_STORAGE_FILE,"BarChart","../tmp");

 /* Set the image map name */
 $myPicture->initialiseImageMap("ImageMapBarChart",IMAGE_MAP_STORAGE_FILE,"BarChart","../tmp");

 /* Turn of Antialiasing */
 $myPicture->Antialias = FALSE;

 /* Draw the background */
 $Settings = array("R"=>170, "G"=>183, "B"=>87, "Dash"=>1, "DashR"=>190, "DashG"=>203, "DashB"=>107);
 $myPicture->drawFilledRectangle(0,0,700,230,$Settings);

 /* Overlay with a gradient */
 $Settings = array("StartR"=>219, "StartG"=>231, "StartB"=>139, "EndR"=>1, "EndG"=>138, "EndB"=>68, "Alpha"=>50);
 $myPicture->drawGradientArea(0,0,700,230,DIRECTION_VERTICAL,$Settings);

 /* Add a border to the picture */
 $myPicture->drawRectangle(0,0,699,229,array("R"=>0,"G"=>0,"B"=>0));

 /* Set the default font */
 $myPicture->setFontProperties(array("FontName"=>FONT_PATH."/pf_arma_five.ttf","FontSize"=>6));

 /* Define the chart area */
 $myPicture->setGraphArea(60,40,650,200);

 /* Draw the scale */
 $scaleSettings = array("GridR"=>200,"GridG"=>200,"GridB"=>200,"DrawSubTicks"=>TRUE,"CycleBackground"=>TRUE);
 $myPicture->drawScale($scaleSettings);

 /* Write the chart legend */
 $myPicture->drawLegend(580,12,array("Style"=>LEGEND_NOBORDER,"Mode"=>LEGEND_HORIZONTAL));

 /* Turn on shadow computing */ 
 $myPicture->setShadow(TRUE,array("X"=>1,"Y"=>1,"R"=>0,"G"=>0,"B"=>0,"Alpha"=>10));

 /* Draw the chart */
 $myPicture->setShadow(TRUE,array("X"=>1,"Y"=>1,"R"=>0,"G"=>0,"B"=>0,"Alpha"=>10));
 $Settings = array("RecordImageMap"=>TRUE);
 $myPicture->drawBarChart($Settings);

 /* Render the picture (choose the best way) */
 $myPicture->autoOutput("../tmp/BarChart.png");

Last updated on 08/04/2011
by Jean-Damien