ASE Home Page Products Download Purchase Support About ASE
ChartDirector Support
 Forum HomeForum Home   SearchSearch

Message ListMessage List     Post MessagePost Message

  ImageMap tooltips for quartile ranges on stacked bar chart?
Posted by TomW on Apr-26-2013 08:51
| Reply | Monitor
I am needing to create an imagemap for each quartile range in up to three different data
sets.  I have posted my sample code below.  For instance, using the second values in the
Q0-Q4 arrays below in my sample data, I need to be able to mouse over each of the 4
ranges in a given quartile set and see a tooltip of what the min and max are for each.
So, I would need to see one for 89 to 863, then one for 863 to 1328, then 1328 to 1798
and finally 1798 to 2625.  Please let me know if you have any questions or if you require
additional information.

Any help you can provide would be greatly appreciated.

Thanks much!
Tom


<?php
require_once("../../phpincludes/ChartDirector/lib/phpchartdir.php");

$v1 = 1832;

$Q0Data = array(0, 89, 270, 89);
$Q1Data = array(0, 863, 1293, 1221);
$Q2Data = array(0, 1328, 1593, 1577);
$Q3Data = array(0, 1798, 1908, 1900);
$Q4Data = array(0, 2625, 3649, 3649);

# The labels for the chart
$labels = array("My Numbers", "Group 1", "Group 2", "Group 3");

# Create a XYChart object
$c = new XYChart(280, 220);

# Set the plotarea
$plotAreaObj = $c->setPlotArea(45, 40, 200, 108);

# Add a title to the chart
$c->addTitle("My Numbers vs Quartile Ranges","arialbd.ttf", 8);

# Set the labels on the x axis
$labelsObj = $c->xAxis->setLabels($labels);
$labelsObj->setFontStyle("arial.ttf");

# Set the font for the y axis labels
$c->yAxis->setLabelStyle("arial.ttf");

$c->yAxis->setLabelFormat("{value|,}");
$c->yAxis()->setLinearScale(0,4000);

$layer1 = $c->addBoxLayer($Q4Data, $Q3Data, 0x28c414, "1st");
$layer2 = $c->addBoxLayer($Q3Data, $Q2Data, 0x9999ff, "2nd");
$layer3 = $c->addBoxLayer($Q2Data, $Q1Data, 0xe3e643, "3rd");
$layer4 = $c->addBoxLayer($Q1Data, $Q0Data, 0xff0000, "4th");

$layer1->setBorderColor(1, softLighting(Left));
$layer2->setBorderColor(1, softLighting(Left));
$layer3->setBorderColor(1, softLighting(Left));
$layer4->setBorderColor(1, softLighting(Left));

# Add a bar chart layer
$barLayerObj = $c->addBarLayer3($v1,0x005ce6);
$barLayerObj->setBorderColor(Transparent, softLighting(Left));

# Enable bar label for the whole bar
$barLayerObj->setAggregateLabelStyle();
$barLayerObj->setAggregateLabelFormat("{value|0,}");

# Add legend box
$b = $c->addLegend(145, 190, false, "arial.ttf", 8);
$b->setAlignment(Center);

# Output the chart
header("Content-type: image/png");
print($c->makeChart2(PNG));
?>

  Re: ImageMap tooltips for quartile ranges on stacked bar chart?
Posted by Peter Kwan on Apr-27-2013 10:17
| Reply | Monitor
Hi TomW,

To make a chart with tooltips, you would need to structure the code to produce both the chart image and the HTML image map (for the tooltips). There are some examples in the "Clickable Charts" section of the ChartDirector documentation. See:

http://www.advsofteng.com/doc/cdphp.htm#clickablecharts.htm

I have modified your code as follows. The tooltip for the bar is configured as "{xLabel}: {value}" (which shows the "My Numbers: 1832"), while the tooltip for the floating boxes are configured as "{bottom} to {top}" (which shows something like "863 to 1328"). Note that the code below uses "getchart.php", which is a standard utility script included in the ChartDirector sample code (in "ChartDirector/phpdemo/getchart.php"). Please copy "getchart.php" to the same directory as your script.

Hope this can help.

Regards
Peter Kwan


<?php
require_once../../phpincludes/ChartDirector/lib/phpchartdir.php");

$v1 = 1832;

$Q0Data = array(0, 89, 270, 89);
$Q1Data = array(0, 863, 1293, 1221);
$Q2Data = array(0, 1328, 1593, 1577);
$Q3Data = array(0, 1798, 1908, 1900);
$Q4Data = array(0, 2625, 3649, 3649);

# The labels for the chart
$labels = array("My Numbers", "Group 1", "Group 2", "Group 3");

# Create a XYChart object
$c = new XYChart(280, 220);

# Set the plotarea
$plotAreaObj = $c->setPlotArea(45, 40, 200, 108);

# Add a title to the chart
$c->addTitle("My Numbers vs Quartile Ranges","arialbd.ttf", 8);

# Set the labels on the x axis
$labelsObj = $c->xAxis->setLabels($labels);
$labelsObj->setFontStyle("arial.ttf");

# Set the font for the y axis labels
$c->yAxis->setLabelStyle("arial.ttf");

$c->yAxis->setLabelFormat("{value|,}");
$c->yAxis()->setLinearScale(0,4000);

$layer1 = $c->addBoxLayer($Q4Data, $Q3Data, 0x28c414, "1st");
$layer2 = $c->addBoxLayer($Q3Data, $Q2Data, 0x9999ff, "2nd");
$layer3 = $c->addBoxLayer($Q2Data, $Q1Data, 0xe3e643, "3rd");
$layer4 = $c->addBoxLayer($Q1Data, $Q0Data, 0xff0000, "4th");

$layer1->setBorderColor(1, softLighting(Left));
$layer2->setBorderColor(1, softLighting(Left));
$layer3->setBorderColor(1, softLighting(Left));
$layer4->setBorderColor(1, softLighting(Left));

# Add a bar chart layer
$barLayerObj = $c->addBarLayer3($v1,0x005ce6);
$barLayerObj->setBorderColor(Transparent, softLighting(Left));

# Enable bar label for the whole bar
$barLayerObj->setAggregateLabelStyle();
$barLayerObj->setAggregateLabelFormat("{value|0,}");

$barLayerObj->setHTMLImageMap("", "", "title='{xLabel}: {value}'");

# Add legend box
$b = $c->addLegend(145, 190, false, "arial.ttf", 8);
$b->setAlignment(Center);

# Create the image and save it in a temporary location
$chart1URL = $c->makeSession("chart1");

# Create an image map for the chart
$imageMap = $c->getHTMLImageMap("", "", "title='{bottom} to {top}'");
?>
<html>
<body>
<img src="getchart.php?<?php echo $chart1URL?>" border="0" usemap="#map1">
<map name="map1">
<?php echo $imageMap?>
</map>
</body>
</html>

  Re: ImageMap tooltips for quartile ranges on stacked bar chart?
Posted by TomW on Apr-27-2013 22:49
| Reply | Monitor
Peter, thanks very much!!  I will try this when I am back in the office on Monday.  Have a
great weekend!

Tom

  Re: ImageMap tooltips for quartile ranges on stacked bar chart?
Posted by TomW on Apr-30-2013 04:29
| Reply | Monitor
Peter,

Just wanted to let you know that it's working perfectly.

Thank you again!!
Tom