Hi,
I would like to generate an interactive chart that takes some parameters from a HTML form and that displays tooltips when a user moves the mouse over some areas.
I tried to combine the codes found in clickbar.php (Simple Clickable Charts) and in financedemo.php (Interactive Financial Chart) but I can't figure out how to make the tooltips part work .
Below is an abstract of my code.
First I created a referentieldemo.php file that displays an HTML form (basically it asks the user to enter a date) and then make a call to referentieldemochart.php to generate the chart.
referentieldemo.php :
--------------------
<html>
<head>
<script language="Javascript">
//Cross browser method to get an object
function getObject(id)
{
if (document.getElementById)
//IE 5.x or NS 6.x or above
return document.getElementById(id);
else if (document.all)
//IE 4.x
return document.all[id];
else
//Netscape 4.x
return document[id];
}
//Update the chart according to user selection
function updateChart()
{
//
//we encode the values of all form elements as query parameters
//
var elements = getObject("Form1").elements;
var url = "referentieldemochart.php?";
for (var i = 0; i < elements.length; ++i)
{
var e = elements[i];
if (e.type == "checkbox")
url = url + e.id + "=" + (e.checked ? "1" : "0") + "&";
else
url = url + e.id + "=" + escape(e.value) + "&";
}
//Now we update the URL of the image to update the chart
getObject("ChartImage").src = url;
//document.write(url);
}
</script>
</head>
<body style="margin:0px">
<table cellspacing="0" cellpadding="0" border="0">
<tr valign="top">
<td style="width:150px; background:#bbddff">
<form id="Form1" action="javascript:updateChart()">
<div class="inputtitle">
<b>Date Debut</b><br />
<input id="DateDebut" name="DateDebut" class="input" style="width:140px;" value="2014-09-30">
</div>
<div class="inputtitle" style="text-align:center">
<input id="Button1" name="Button1" type="submit" class="input" value="Update">
</div>
</form>
</td>
<td>
<div style="font-weight:bold; font-family:arial; font-size:20pt; margin:5px 0px 0px 5px">
Test
</div>
<hr style="border:solid 1px #000080" />
<br />
<img id="ChartImage" align="top" border="0">
</td>
</tr>
</table>
</body>
</html>
referentieldemochart.php :
--------------------------
<?php
require_once("../lib/phpchartdir.php");
require_once("../lib/FinanceChart.php");
# code to retrieve the parameters entered by the user
# and retrieve the data form a MySQL database
...
...
# create the finance chart
$graphique = new XYChart(820, 525, 0xffcccc, 0x000000, 1);
$textBoxObj = $graphique->addTitle("R?f?rentiel des Changements", "timesbi.ttf", 15, 0xffffff);
$textBoxObj->setBackground(0x800000);
$plotAreaObj = $graphique->setPlotArea(40, 55, 750, 440, 0xffffff, 0xeeeeee, LineColor, 0xc0c0c0, 0xc0c0c0);
$plotAreaObj->setGridWidth(2, 1, 1, 1);
$graphique->swapXY();
//$graphique->yAxis->setDateScale(chartTime(2014, 10, 3), chartTime(2014, 10, 16), 86400);
$dateDebutAxe = chartTime(substr($dateDebutFormulaire, 0, 4), substr($dateDebutFormulaire, 5, 2), substr($dateDebutFormulaire, 8, 2));
$dateFinAxe = chartTime(substr($dateFinFormulaire, 0, 4), substr($dateFinFormulaire, 5, 2), substr($dateFinFormulaire, 8, 2));
$graphique->yAxis->setDateScale($dateDebutAxe, $dateFinAxe, 86400);
$graphique->yAxis->setMultiFormat(StartOfMonthFilter(), "<*font=arialbd.ttf*>{value|mmm d}", StartOfDayFilter(), "-{value|d}");
$graphique->setYAxisOnRight();
$graphique->xAxis->setLabels($labels);
$graphique->xAxis->setReverse();
$graphique->xAxis->setTickOffset(0.5);
# add the tooltips data to a BoxWhiskerLayer
$layer = $graphique->addBoxWhiskerLayer2($startDate, $endDate, null, null, null, $colors);
$layer->setXData($taskNo);
$layer->setBorderColor(SameAsMainColor);
$layer->setDataWidth((int)(200 * 4 / 5 / count($labels)));
$layer->addExtraField($infoNumeroDE);
$layer->addExtraField($infoClients);
$layer->addExtraField($infoResume);
# create the image map
$chart1URL = $graphique->makeSession("chart1");
$imageMap = $graphique->getHTMLImageMap("", "", "title='{field0} {field1} {field2}'");
?>
<html>
<body style="margin:5px 0px 0px 5px">
<div style="font-size:18pt; font-family:verdana; font-weight:bold">
Javascript Clickable Chart
</div>
<hr style="border:solid 1px #000080" />
<img src="getchart.php?<?php echo $chart1URL?>" border="0" usemap="#map1">
<map name="map1">
<?php echo $imageMap?>
</map>
<div id="detailInfo" style="margin-left:60px"></div>
</body>
</html>
But this doesn't work.
If I skip the image map part and simply display the chart with :
header("Content-type: image/png");
print($graphique->makeChart2(PNG));
it works. If I put my code in a single php file without the HTML form part, the tooltips are correctly displayed (but then I don't have the possibility to update the chart for a specific date entered by the user).
As you can see I am not a PHP/Javascript/HTML expert. I looked on the forum but didn't find anything related to my problem.
Can anybody help me ?
Thanks a lot in advance,
Fabrice |