Watch, Follow, &
Connect with Us

For forums, blogs and more please visit our
Developer Tools Community.


Welcome, Guest
Guest Settings
Help

Thread: Does TeeChart for PHP do client-side image maps?


This question is answered. Helpful answers available: 2. Correct answers available: 1.


Permlink Replies: 5 - Last Post: Sep 25, 2014 5:13 AM Last Post By: Yeray Alonso
David Marcus

Posts: 18
Registered: 8/16/98
Does TeeChart for PHP do client-side image maps?  
Click to report abuse...   Click to reply to this thread Reply
  Posted: Sep 23, 2014 7:55 AM
I'm looking for a replacement for JpGraph, since it is no longer supported. Does TeeChart for PHP do client-side image maps? Here is an example:

http://www.ratingscentral.com/HistoryGraph.php?PlayerID=61708

You can mouse over the points, see text associated with the point, and click on the point to go to another webpage.

If TeeChart can't do this, I would appreciate suggestions of other packages that can produce such a graph.
Yeray Alonso

Posts: 75
Registered: 6/12/11
Re: Does TeeChart for PHP do client-side image maps?  
Click to report abuse...   Click to reply to this thread Reply
  Posted: Sep 24, 2014 1:08 AM   in response to: David Marcus in response to: David Marcus
Hello David,

David Marcus wrote:
I'm looking for a replacement for JpGraph, since it is no longer supported. Does TeeChart for PHP do client-side image maps? Here is an example:

http://www.ratingscentral.com/HistoryGraph.php?PlayerID=61708

You can mouse over the points, see text associated with the point, and click on the point to go to another webpage.

If TeeChart can't do this, I would appreciate suggestions of other packages that can produce such a graph.

TeeChart for PHP generates the charts serverside so I'm afraid it doesn't support clientside interactivity.
However, between the other TeeChart versions supporting different levels of interactivity on web applications, let me highlight TeeChart HTML5/JavaScript: This is our newest TeeChart version, fully written in javascript and supporting full interactivity. I'd suggest you to see the demos here and here.
--
Best Regards

Yeray Alonso
Steema Support Central
Follow us in Twitter and Facebook

"Important note: If you are a TeeChart registered customer,
please post your support questions at Steema's Support
monitored Forums for a prompter reply."
http://support.steema.com
David Marcus

Posts: 18
Registered: 8/16/98
Re: Does TeeChart for PHP do client-side image maps?  
Click to report abuse...   Click to reply to this thread Reply
  Posted: Sep 24, 2014 5:03 AM   in response to: Yeray Alonso in response to: Yeray Alonso
Yeray Alonso wrote:
TeeChart for PHP generates the charts serverside so I'm afraid it doesn't support clientside interactivity.

Yeray,

JpGraph isn't generating JavaScript. It is generating HTML:

<map name="__mapname73525__" id="__mapname73525__" >
<area shape="circle" coords="70,178,4" href="EventDetail.php?EventID=11409#P61708" title="497&plusmn;74 9/12/2010 TTTV 10/11 LK1" alt="497&plusmn;74 9/12/2010 TTTV 10/11 LK1" />
<area shape="circle" coords="74,216,4" href="EventDetail.php?EventID=11223#P61708" title="457&plusmn;64 9/26/2010 TTTV MM 10/11 U13HVR" alt="457&plusmn;64 9/26/2010 TTTV MM 10/11 U13HVR" />
<area shape="circle" coords="79,258,4" href="EventDetail.php?EventID=11231#P61708" title="412&plusmn;49 10/9/2010 TTTV MM 10/11 U15K" alt="412&plusmn;49 10/9/2010 TTTV MM 10/11 U15K" />
...
</map><img src="GraphImage.php?_jpg_csimd=1&amp;PlayerID=61708" ismap="ismap" usemap="#__mapname73525__" height="500" alt="Rating History" />

I'm not wedded to HTML. Can TeeChart HTML5/JavaScript produce a similar graph to what I have now?

David
Yeray Alonso

Posts: 75
Registered: 6/12/11
Re: Does TeeChart for PHP do client-side image maps?  
Click to report abuse...   Click to reply to this thread Reply
  Posted: Sep 25, 2014 2:35 AM   in response to: David Marcus in response to: David Marcus
Hi David,

David Marcus wrote:
JpGraph isn't generating JavaScript. It is generating HTML:

<map name="__mapname73525__" id="__mapname73525__" >
<area shape="circle" coords="70,178,4" href="EventDetail.php?EventID=11409#P61708" title="497&plusmn;74 9/12/2010 TTTV 10/11 LK1" alt="497&plusmn;74 9/12/2010 TTTV 10/11 LK1" />
<area shape="circle" coords="74,216,4" href="EventDetail.php?EventID=11223#P61708" title="457&plusmn;64 9/26/2010 TTTV MM 10/11 U13HVR" alt="457&plusmn;64 9/26/2010 TTTV MM 10/11 U13HVR" />
<area shape="circle" coords="79,258,4" href="EventDetail.php?EventID=11231#P61708" title="412&plusmn;49 10/9/2010 TTTV MM 10/11 U15K" alt="412&plusmn;49 10/9/2010 TTTV MM 10/11 U15K" />
...
</map><img src="GraphImage.php?_jpg_csimd=1&amp;PlayerID=61708" ismap="ismap" usemap="#__mapname73525__" height="500" alt="Rating History" />

I'm not wedded to HTML. Can TeeChart HTML5/JavaScript produce a similar graph to what I have now?

The code to produce a chart similar to this with TeeChart HTML/Javascript would of course be different than what you posted above.
An example of the series onClick usage with TeeChart HTML/Javascript can be found in the full reference demo mentioned above. Concretely, you can directly open the [url=http://www.steema.com/files/public/teechart/html5/v2012.12.14.1.4/demos/series/seriesonclick.htm]series onClick example[/url] and see the code of the page. In your case, you just should show the line pen with drawLine=true and open the page you wish at onClick event. Ie:

<!DOCTYPE html>
<html>
<head>
<title>TeeChart JavaScript Line Series Example with onClick event and toolTips</title>
 
<link type="text/css" href="../../jquery/css/ui-lightness/jquery-ui-1.8.17.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="../../jquery/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../../jquery/js/jquery-ui-1.8.17.custom.min.js"></script>
 
<!--[if lt IE 9]>
    <script src="../../src/excanvas/excanvas_text.js"></script>
    <script src="../../src/excanvas/canvas.text.js"></script>
<![endif]-->
 
<script src="../../src/teechart.js" type="text/javascript"></script>
<script type="text/javascript">
var Chart1;
function draw() {
  Chart1=new Tee.Chart("canvas");
 
  Chart1.legend.visible=false;
  Chart1.axes.bottom.labels.rotation=90;
  
  Chart1.axes.left.title.text="Rating";
  Chart1.axes.bottom.title.text="Date";
  Chart1.title.text="Rating History";
  
  var xy=new Tee.Line();
  xy.pointer.visible=true;
  xy.pointer.style="ellipse";
  xy.pointer.height=7;
  xy.pointer.width=7;
  xy.cursor="pointer";
  xy.hover.line=false;
 
  Chart1.addSeries(xy);
  
  myDates=["9/12/2010", "9/26/2010", "10/9/2010", "10/30/2010", "1/29/2011", /*more values*/ "9/21/2014"];
  myValues=[497, 457, 412, 361, 350, /*more values*/ 519];
  myLinks=["11409#P61708", "11223#P61708", "11231#P61708", "11413#P61708", "11225#P61708", /*more values*/ "15508#P61708"];
  myLabels=["497&plusmn;74 9/12/2010 TTTV 10/11 LK1", "457&plusmn;64 9/26/2010 TTTV MM 10/11 U13HVR", 
                     "412&plusmn;49 10/9/2010 TTTV MM 10/11 U15K", "361&plusmn;39 10/30/2010 TTTV 10/11 LK2",
                     "350&plusmn;49 1/29/2011 TTTV MM 10/11 U13FVR", /*more values*/ "519&plusmn;41 9/21/2014 TTTV 14/15 LK1"];
  
  xy.data.x=new Array(myDates.length);
  for (t=0; t<myDates.length; t++) {
    xy.data.x[t] = new Date(myDates[t]);
	xy.data.values[t] = myValues[t];
  }
 
  xy.marks.ongettext=function(xy,index,res){
    return myLabels[index];
  }
  
  tip=new Tee.ToolTip(Chart1);
  tip.format.font.style="16px Tahoma";
  tip.render="canvas";
 
  Chart1.tools.add(tip);
  
  xy.onclick=function(series,index,x,y) {
    url="http://www.ratingscentral.com/EventDetail.php?EventID=" + myLinks[index];
    window.location = url;
  }
  
  Chart1.draw();
}
 
</script>
</head>
 
<body onload="draw()">
 
<center>
<br><canvas id="canvas" width="600" height="400">
This browser does not seem to support HTML5 Canvas.
</canvas>
</center>
</body>
</html>


--
Best Regards

Yeray Alonso
Steema Support Central
Follow us in Twitter and Facebook

"Important note: If you are a TeeChart registered customer,
please post your support questions at Steema's Support
monitored Forums for a prompter reply."
http://support.steema.com
David Marcus

Posts: 18
Registered: 8/16/98
Re: Does TeeChart for PHP do client-side image maps?  
Click to report abuse...   Click to reply to this thread Reply
  Posted: Sep 25, 2014 4:34 AM   in response to: Yeray Alonso in response to: Yeray Alonso
Thank you. What do the "if lt IE 9" lines do?
Yeray Alonso

Posts: 75
Registered: 6/12/11
Re: Does TeeChart for PHP do client-side image maps?  
Click to report abuse...   Click to reply to this thread Reply
  Posted: Sep 25, 2014 5:13 AM   in response to: David Marcus in response to: David Marcus
Hi David,

David Marcus wrote:
Thank you. What do the "if lt IE 9" lines do?

It activates excanvas when the browser is IE<9 to make HTML5 to work on these browsers.
--
Best Regards

Yeray Alonso
Steema Support Central
Follow us in Twitter and Facebook

"Important note: If you are a TeeChart registered customer,
please post your support questions at Steema's Support
monitored Forums for a prompter reply."
http://support.steema.com
Legend
Helpful Answer (5 pts)
Correct Answer (10 pts)

Server Response from: ETNAJIVE02