| Search Locate Previous Next | Contents |
Every VML or SVG object is a namespace, so you can set arbitrary variables for each chart data item (typically you would set its value), or on headings, keys etc. You can set any of the standard JavaScript event handlers here, for example onMouseOver and onMouseOut to have data items highlight as you track the mouse over them. If you want to set the text of headings or other chart items, you can refer to them by the standard names listed as viewer hotspots, but be sure hotspots are turned on before you start to build the chart.
Setting properties on all data-points
© Each object acts as a namespace, so we can set arbitrary variables chJSet'value'vv © This just highlights the bar the mouse is over chJSet'onMouseOver' 'this.strokecolor=''green'';' chJSet'onMouseOut' 'this.strokecolor=''black'';' © Note the use of 'this' to pass the value for the correct bar chJSet'onMouseDown' 'AddMe(this.value);' chBar vv
To pass arrays of values, replace the second argument to the function with either a simple array or an array of arrays:
chJSet 'value' (34 27 16 6) chJSet 'product_code' (3 4½¼12)
The second example would be typical for a barchart, where a product identifier could be associated with each bar segment to assist with a subsequent database query.
Another possibility is to use ‘unnamed’ properties, in which case the entire property value is written into the output stream exactly as it appears. This could be used to set a collection of properties in a single call:
chJSet '' 'onMouseOver="this.strokecolor=''green''; onMouseOut="this.strokecolor=''black'';"'
Setting properties on selected data-values
In all the examples above, the argument is passed as a 2-element set. An alternative syntax is to pass 4 arguments giving the (row,col) in the data series and the specific handler for just that data value:
chJSet 'onMouseOver' 'this.strokecolor=''green''; ' 3 2
This would set the handler only on the data point from the 3rd row of the second series. A useful ‘special’ setting is that if you give a handler for row=0, this is interpreted as the ‘line’ in a chart with both lines and markers. You could use this to highlight the line the mouse is over, without affecting the markers. Here is an example (using the SVG style) which highlights any of 3 lines – note that the highlight is cancelled by a generic call as it is the same for all of them:
chJSet 'onmouseover' 'evt.target.setAttribute('style','stroke:Red;');' 0 1
chJSet 'onmouseover' 'evt.target.setAttribute('style','stroke:Lime;');' 0 2
chJSet 'onmouseover' 'evt.target.setAttribute('style','stroke:Blue;');' 0 3
© We can reset any of them with the same call (generic setting)
chJSet'onmouseout' 'evt.target.setAttribute('style','');'
If you want to set a generic handler which is over-ridden for a selection of specific handlers, be careful to put the generic setting first and follow it with the selective settings.
Setting properties on chart boilerplate
You can use the ‘target’ element to attach handlers to any of the following standard items:
Heading ... The main chart heading
Subhead ... The subsidiary heading
Footnote ... The chart footer
Pagelabels ... The page-label array
XCaption ... The X-axis caption
YCaption ... The Y-axis caption
XLabels ... The set of all X-axis labels
YLabels ... The set of all Y-axis labels
Key ... The set of chart keys (series marker and text)
If you name a target with multiple elements (such as the Key) you may pass an array of handlers, which will be associated with individual elements of the given item. An option here would be to pass an array of values (one per key element) and also attach a single Javascript fragment to all the keys which used the value to process accordingly.
chJSet'ColorMe'('' 'Lime' 'Fuchsia')0 0 'Key'
Note that you must specify (0,0) as the row/col indices here, which are ignored in this case.
The sample function Jscript has some simple ideas to show some of the possibilities. For more information on JavaScript, see any good textbook, such as the “Rhino” book from O’Reilly. Please note that scripting is possible on SVG charts, but requires considerably more JavaScript expertise.