|
 addExtraField and javascript problems |
| Posted by knewby on Feb-13-2011 03:26 |
|
Hi -
This is my 1st time working with ChartDirector and javascript and I am stuck. I can make lovely charts that are not clickable or drillable with php, but have failed to make a chart that is clickable and drillable.
This chart plots time on the x axis, width on the left y axis, and weight on the right y axis. I used jsclick.php as an example.
1. I have a problem with my tooltip: I want it to show HourMin, StripWidth, and SpentWeight. (x axis, left y axis, right y axis)
2. I can't get addExtraField to work either: When my chart is displayed, the table of extra info does not display on a mouse-over. I want the extra info to display CellType. (I had to comment out the addExtraField statements because they cause my chart to not display.)
3. In some other posts, you mention browser script debugging tools. Where does one enable these?
I've attached my code. Any help is greatly appreciated!!!!! Thank you.
knewby
|
| Re: addExtraField and javascript problems |
| Posted by Peter Kwan on Feb-15-2011 07:40 |
|
Hi knewby,
The image map generated by ChartDirector is for the "data represention objects" (bar segments for bar chart, line segments for line chart, slices for pie chart, etc) on the chart. You may use {value} to show the data value of the bars, lines, etc..
If you want to show tooltips of different format for different layers, you may use setHTMLImageMap to configure a different tooltip format for each layer. For example:
#tooltip for line layer
$toolTip = "title='Time={xLabel}, Width={value|0}in'";
$lineLayerObj->setHTMLImageMap("", "", "$showText$hideText$toolTip");
#tooltip for bar layer
$toolTip = "title='Time={xLabel}, Weight={value|0}kg'";
$barLayerObj->setHTMLImageMap("", "", "$showText$hideText$toolTip");
#the tooltip configuration is taken from setHTMLImageMap above.
$imageMap = $c->getHTMLImageMap("xystub.php");
If you want to show something that is unrelated to the data representation (eg. you want to show the data for the line layer or some other unrelated values when the mouse is over the bar), then you may use extra fields. For your case, you display both tooltips and the pop up HTML table, so you may need two extra fields. A general example is like:
#Set up whatever tooltips you like. They can contain things unrelated to the data representation
for ($i = 0; $i < count($HourMin); ++$i)
$myToolTips[$i] = "Time=" . $HourMin[$i] . ", Width=" . $StripWidth[$i] . "in, Weight=" . $SpentWeight[$i] . "kg";
#Configuration on bar layer
$barLayerObj->addExtraField($myToolTips); #this is {field0}
$barLayerObj->addExtraField($CellType); #this is {field1}
#Configuration on line layer (assume it is the same as the bar layer)
$lineLayerObj->addExtraField($myToolTips); #this is {field0}
$lineLayerObj->addExtraField($CellType); #this is {field1}
#Show tooltips and pop up HTML table
$showText = "onmouseover='showInfo(\\"{field1}\\");' ";
$hideText = "onmouseout='showInfo(null);' ";
$toolTip = "title='{field0}'";
$imageMap = $c->getHTMLImageMap("xystub.php", "", "$showText$hideText$toolTip");
Note that there is an error in your existing Javascript code. The line:
content += "<tr><td><b>Cell Type</b></td><td>" + CellType + </td></tr>";
should be:
content += "<tr><td><b>Cell Type</b></td><td>" + CellType + "</td></tr>";
Note that if you just want to show some tooltips when the mouse is at an arbitrary position on the chart (eg, when the mouse is just on an empty position on the plot area and is not over the bar or the line), you just need to handle the standard Javascript onmousemove event and show anything you like based on the mouse position.
For script debugging, you may refer to your browser documentation. Debugging is a feature of the browser. Each browser (and each version of the browser) has different debugging methods. Personally, I usually used FireBox with the FireBug plug-in. You may also use IE with Visual Studio if you like or IE with the Microsoft Script Debugger.
Hope this can help.
Regards
Peter Kwan |
| Re: addExtraField and javascript problems |
| Posted by slaniwani on Feb-16-2011 23:39 |
|
Hi Peter maybe you can help me as well with ExtraFields.
Iam including two extraFields :
layer3.addExtraField(selected_unit)
layer3.addExtraField(MYSQL_DB)
in selected_unit is only one textstring for example : Units or Seconds
in MYSQL_DB, its a text string as well.
My "showText"
showText = "onmouseover='showInfo(\\"{x|dd/mm/yy hh:nn:ss a}\\", {value}, \\"{field0}\\", \\"{field1}\\");' "
<script type="text/javascript">
//
//Client side script function to show and hide detail information.
//
function showInfo(chart_peaktime, chart_peaks, selected_unit, MYSQL_DB) {
var obj;
if (document.getElementById)
//IE 5.x
obj = document.getElementById('detailInfo');
else
//IE 4.x
obj = document.all['detailInfo'];
if (!chart_peaktime)
{
obj.style.visibility = "hidden";
return;
}
var content = "<table border='1' cellpadding='3' style='font-size:10pt; " +
"font-family:verdana; background-color:#CCCCFF' width='480'>";
content += "<tr><td><b>Peak-Time:</b></td><td width='300'>" + chart_peaktime + "</td></tr>";
content += "<tr><td><b>Value:</b></td><td>" + chart_peaks + "</td></tr>";
content += "<tr><td><b>Unit of Measure:</b></td><td>" + selected_unit + "</td></tr>";
content += "<tr><td><b>Affected Database:</b></td><td>" + MYSQL_DB + "</td></tr>";
content += "</table>";
obj.innerHTML = content;
obj.style.visibility = "visible";
}
</script>
and I only get these as the Output:
Its only the first letter of the textstring.
U = Units
s = sbr
.....I dont know where the bug is.
|
| Re: addExtraField and javascript problems |
| Posted by Peter Kwan on Feb-17-2011 10:18 |
|
Hi slaniwani,
The extra field is used if you have an array of text strings, with each text string associated with a single data point.
If you only have one text string used for all data points, there is no need to use extra field. You can just put the text string in your image map directly.
For example:
showText = "onmouseover='showInfo(\\"{x|dd/mm/yy hh:nn:ss a}\\", {value}, \\"" + selected_unit + "\\", \\"" + MYSQL_DB + "\\");' "
Hope this can help.
Regards
Peter Kwan |
| Re: addExtraField and javascript problems |
| Posted by slaniwani on Feb-17-2011 16:59 |
|
You always have the correct answer.
Is there something you dont know?!:)
Thank you Peter.
Its working great. |
| Re: addExtraField and javascript problems |
| Posted by knewby on Feb-18-2011 00:30 |
|
| Thank you so very much Peter for your perfect and patient advice and solutions!!! |
|
Forum Home
Search
Message List
Post Message
(knewby)