Nevron .NET Vision Documentation
HTML Image Map

This topic applies only for non-AJAX modes.

Nevron Chart and Diagram components for .NET can send an HTML image map to the client browser which allows you to build web applications with drill down capabilities. Image maps are also very convenient because they are supported by all browsers and because they have less security restrictions than other response types (for example when generating SVG response the client browser must permit the creation of ActiveX controls.

The HTML Image map is represented by the NHtmlImageMapResponse class.

The image maps generated by the Nevron Components support the following features:

 

  1. Browser redirection - you can navigate the client browser or open a new browser window when the user clicks on some chart object.
  2. Tooltips - the client side image map can display tooltips when the user moves the mouse over the objects in the scene.
  3. Mouse cursor - the image map can also change the default cursor. This can be very useful if you want to visually prompt the user that something will happen if he clicks with the mouse over the selected object. The combination of a tooltip and mouse cursor change makes the image map much more user friendly.
  4. Custom attributes for the image map areas. This allows you to inject custom client side script in the image map generated by the component as well as to override the standard client side scripts. For more information on this feature check out the Injecting custom client side script topic.
  5. Custom script injected in the page.
  6. Server side events (postback) - server side events are described in detail in the "HTML image map with postback" topic.

 

The following code dynamically changes the response to HTML image map:

C#
Copy Code
NHtmlImageMapResponse imageMap = new NHtmlImageMapResponse();
//[theComponent] is a valid instance of either NChartControl or NDrawingView
[theComponent].ServerSettings.BrowserResponseSettings.DefaultResponse = imageMap;
Visual Basic
Copy Code
Dim imageMap NHtmlImageMapResponse As New NHtmlImageMapResponse()
'[theComponent] is a valid instance of either NChartControl or NDrawingView
[theComponent].ServerSettings.BrowserResponseSettings.DefaultResponse = imageMap
Note that the image map will be based on a PNG image. The chart server control will now respond with an HTML image map provided that you did not specify any browser matching rules that map to a different response type.

 

Specifying URLs

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:

C#
Copy Code
//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;
Visual Basic
Copy Code
'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.

Specifying tooltips

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:

C#
Copy Code
NInteractivityStyle interactivityStyle = myNode.InteractivityStyle;
interactivityStyle.Tooltip.Text = "My Tooltip Text";
Visual Basic
Copy Code
Dim interactivityStyle As NInteractivityStyle = myNode.InteractivityStyle
interactivityStyle.Tooltip.Text = "My Tooltip Text"
Specifying mouse cursors

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:

C#
Copy Code
NHtmlImageMapResponse imageMap = new NHtmlImageMapResponse();
imageMap.ClientScript = ClientScript.VBScript;
//[theComponent] is a valid instance of either NChartControl or NDrawingView
[theComponent].ServerSettings.BrowserResponseSettings.DefaultResponse = imageMap;
Visual Basic
Copy Code
Dim imageMap As New NHtmlImageMapResponse()
imageMap.ClientSideScript = ClientSideScript.VBScript
'[theComponent] is a valid instance of either NChartControl or NDrawingView
[theComponent].ServerSettings.BrowserResponseSettings.DefaultResponse = imageMap
Injecting Custom Client Side Script

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.

Examining a Sample Script

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

HTML
Copy Code
<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. 

 

 


©2017. Nevron Software LLC.

Send Feedback