To change the URL associated with a particular chart element you must modify the UrlLink property of the NInteractivityStyle object attached to it. For example consider that you have a label prompting the user to click on it in order to be redirected to another page:

//get the interactivity style for an object
//using common object model this style is available either on a diagram node or a chart node

NInteractivityStyle interactivityStyle = myNode.InteractivityStyle;
interactivityStyle.UrlLink.Url = "moreinfo.htm";
interactivityStyle.UrlLink.OpenInNewWindow = false;

'get the interactivity style for an object
'using common object model this style is available either on a diagram node or a chart node

Dim interactivityStyle As NInteractivityStyle =  myNode.InteractivityStyle
interactivityStyle.UrlLink.Url = "moreinfo.htm"
interactivityStyle.UrlLink.OpenInNewWindow = False

That's it now you have a label that will redirect the browser to the moreinfo.htm page that must reside in the same directory on the server as the aspx page containing the control. You can of course also specify absolute URLs such us www.microsoft.com or www.nevron.com. Note that you can also instruct the browser to open a new window instead of redirecting the current page to the URL. This is achieved when you set the OpenInNewWindow property to true. The above programming pattern is valid for all chart elements.

Tooltips can come very handy when you want to display some additional information about an element. The code needed to assign tooltips is the same as the code required to assign a URL, except that this time you must touch the Tooltip property of the NInteractivityStyle object. The following code illustrates this:

NInteractivityStyle interactivityStyle = myNode.InteractivityStyle;
interactivityStyle.Tooltip.Text = "My Tooltip Text";

Dim interactivityStyle As NInteractivityStyle = myNode.InteractivityStyle
interactivityStyle.Tooltip.Text = "My Tooltip Text"

By default all mouse cursor properties in the chart evaluate to CursorType.Default. If you want to change the mouse cursor associated with some chart element you must modify the Cursor property of the NInteractivityStyle object. The tooltips, cursors and URL redirection features can be used together to produce image maps.

You can also control the accuracy of the image map by changing the GridCellSize property of the NHtmlImageMapResponse object defining the granularity of the image grid. By increasing this value you reduce the accuracy of the image map, but gain speed because the image grid contains less cells which makes it easier to process. The default value is 5 pixels. You may consider to decrease this value if your image is small or the chart contains many data items. On the other hand when you generate large images it is better to set a bigger value.

Finally you can also change the client side script used to encode the image map. By default it is JScript but you can also use VBScript:

NHtmlImageMapResponse imageMap = new NHtmlImageMapResponse();
imageMap.ClientScript = ClientScript.VBScript;
//[theComponent] is a valid instance of either NChartControl or NDrawingView
[theComponent].ServerSettings.BrowserResponseSettings.DefaultResponse = imageMap;

Dim imageMap As New NHtmlImageMapResponse()
imageMap.ClientSideScript = ClientSideScript.VBScript
'[theComponent] is a valid instance of either NChartControl or NDrawingView
[theComponent].ServerSettings.BrowserResponseSettings.DefaultResponse = imageMap

Up to this point we used the image maps generated by the component which contained script that was automatically generated and cannot be modified. This includes the script generated by the component for tooltips, postback events, browser redirection and cursor change.

In real world applications however these interactivity features may not be sufficient because there is no ability to integrate the client side script of the image map with the rest of the page and thus to achieve higher levels of interactivity. In cases when you need this you must inject custom client side script in the generated image map.

This is achieved with the help of the the CustomMapAreaAttribute property of the NInteractivityStyle object attached to every chart element.

To better understand script injection lets take a look at a simple image map generated by Nevron Chart for .NET:

<script LANGUAGE="JScript">
 function RedirectBrowser_c91a8ee998ae4a2692b29bc8e26d5852_0()
 {
  window.location.href = "CarSales.aspx";
 }

 function RedirectBrowser_c91a8ee998ae4a2692b29bc8e26d5852_1()
 {
  window.location.href = "TrainSales.aspx";
 }

 //...

</script>

<map name="MAP_NChart_aa81608a-0395-435d-84ea-90038b540525">
 <area shape="poly" coords="some poly coordinates" onclick="RedirectBrowser_c91a8ee998ae4a2692b29bc8e26d5852_0()" title="Click here to jump to Cars sales page">
 <area shape="poly" coords="some poly coordinates" onclick="RedirectBrowser_c91a8ee998ae4a2692b29bc8e26d5852_1()" title="Click here to jump to Trains sales page">
 <!-- ... -->
 <area shape="poly" coords="" onmousemove="E0MM()">
</map>

As you can see the interactivity is achieved by setting the onclick and title attributes applied on each area tag. The onclick attribute actually redirects to a function performing the onclick task. When the CustomMapAreaAttribute property is not an empty string the component does not generate these default attributes and replaces them with the script you specified from the property.