Reference > Methods > AddAttributes Method

SharpPlot.AddAttributes Method

Set property/value pairs for one or more data points or a standard chart object.

Overloads

Description

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. Simple onClick handlers will work as you expect on PNG output, using an associated imagemap. 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. (This capability is only supported in charts rendered as VML and SVG).

Setting properties or handlers on all data-points

This is the simplest call, and would be appropriate if the object was to have all the points or bars behave identically. For example to highlight the outline of the bar under the mouse:

sp.AddAttributes("onMouseOver","this.strokecolor='Red';");
sp.AddAttributes("onMouseOut","this.strokecolor='black';");

A common strategy is to define a standard handler (common to all points) and then to pass a value (or an identifier) to this depending on which point was clicked. A typical handler would be:

sp.AddAttributes("onMouseDown","AddMe(this.value);");

This runs a (previously defined) JavaScript function with the ‘value’ property associated with the point which the user clicked. To distribute these properties across all the points, replace the second argument to the function with either a simple array or an array of arrays (one element per series) giving the parameter values:

sp.AddAttributes("value",Col_Vals);
sp.AddAttributes("value",new string[] {"34","27","16","62});
sp.AddAttributes("product_code",new string[][] {EastIds_DD,EastIds_RR} )

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:

sp.AddAttributes("",''onMouseOver="this.strokecolor='green'; onMouseOut="this.strokecolor='black';");

The series name may be included as a third argument if you have more than one series on the chart, and want the handlers to be applied to one series only. By default they are replicated across all series (unless the second argument is an array of arrays, one per series).

sp.SetSeriesNames(new string[] {"FirstSeries",Second Series"});
sp.AddAttributes("value",new string[] {"34","27","16","6"},"FirstSeries");

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 3 or 4 arguments giving the item number and optional series name, and the specific handler for just that data value:

sp.AddAttributes("onMouseOver","this.strokecolor='green'; ",3,"MyBars");

This would set the handler only on the data point from the 3rd item of the series called “MyBars”. 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:

sp.AddAttributes("onmouseover","evt.target.setAttribute('style','stroke:Red;');",0,"First line");
sp.AddAttributes("onmouseover","evt.target.setAttribute('style','stroke:Lime;');",0,"Second line");
sp.AddAttributes( "onmouseover","evt.target.setAttribute('style','stroke:Blue;');",0,"Third line");
// We can reset any of them with the same call (generic setting)
sp.AddAttributes("onmouseout","evt.target.setAttribute('style','');"

If you don’t explicitly name your series, they will be named “series-1” and so on for you, but explicit names are strongly recommended here as they are then added to the output VML or SVG as item ids, which makes debugging the finished scripts much simpler.

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)

Values ... Value tags on data items

XZones ... Any background regions (also YZones and XYZones)

string GoRed = "this.style.color='Red';";
ch.AddAttributes(ScriptTarget.Heading,"onMouseOver",GoRed);

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.

sp.AddAttributes(ScriptTarget.Key,"ColorMe",new string[] {"","Lime","Fuchsia"})

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 and a good understanding of the SVG DOM.

See also ...

SharpPlot Members


Send comments on this topic
© Dyalog Ltd 2013