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

Message ListMessage List     Post MessagePost Message

  How to create an interactive chart with tooltips (PHP)
Posted by Fabrice Fayolle on Sep-25-2014 21:47
| Reply | Monitor
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

  Re: How to create an interactive chart with tooltips (PHP)
Posted by Peter Kwan on Sep-26-2014 02:21
| Reply | Monitor
Hi Fabrice,

There is an example at:

http://www.chartdir.com/forum/download_thread.php?bn=chartdir_support&thread=1120733629#N1120828686

In brief, instead of:

<img id="ChartImage" align="top" border="0">

try to change it to:

<IFRAME WIDTH='840' HEIGHT='600' FRAMEBORDER="No" SCROLLING="No" id="ChartImage">

It is beacuse the <IMG> tag is only for displaying images. For your case, referentieldemochart.php does not output an image. It outputs HTML that contains an image. For HTML, you may use <IFRAME> to reference it.

Hope this can help.

Regards
Peter Kwan

  Re: How to create an interactive chart with tooltips (PHP)
Posted by Fabrice Fayolle on Sep-26-2014 16:11
| Reply | Monitor
Thanks a lot for your help.

It now works as expected :-)

Fabrice