| ||
|
Introducing SharpPlot Your First Chart Recent Updates Sample Charts Tutorials General Tutorials Chart Tutorials SharpPlot Class Properties Structures Enumerations Style examples Glossaries Active Charts VectorMath Class DBUtil Class Get SharpPlot Download SharpPlot Buying SharpPlot SharpPlot Support Upgrading from GraPL Release notes |
Reference > Methods > AddAttributes Method SharpPlot.AddAttributes MethodSet property/value pairs for one or more data points or a standard chart object. Overloads
DescriptionEvery 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-pointsThis 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-valuesIn 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 boilerplateYou can use the ‘target’ element to attach handlers to any of the following standard items: Heading ... The main chart heading 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 See also ... |