Using csDrawGraph to generate a pie chart with an image map.

This is an example of generating an HTML image map for a pie chart. The values on this chart don't mean anything, it is just a demonstration. The hotspots are the pie sectors, the labels that identify the data areas, and the legend entries.

Data 1Data 1Data 2Data 2Data 3Data 3Data 1Data 1Data 2Data 2Data 3Data 3

The example code can be downloaded but you must also have the trial csDrawGraph component installed for it to run. Here are the files.

Download the trial csDrawGraph component - csdgt.zip (3 MB)

Download the demo scripts - imagemap.zip (38 KB)

For a description of the code Click Here.

function createCookie(name,value,days) { if (days) { var date = new Date(); date.setTime(date.getTime()+(days*24*60*60*1000)); var expires = "; expires="+date.toGMTString(); } else var expires = ""; document.cookie = name+"="+value+expires+"; path=/"; } function readCookie(name) { var nameEQ = name + "="; var ca = document.cookie.split(';'); for(var i=0;i < ca.length;i++) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1,c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); } return null; } function eraseCookie(name) { createCookie(name,"",-1); } function AcceptCookies() { createCookie("cookie-site","true",120); createCookie("cookie-tracking","true",120); createCookie("cookie-remarketing","true",120); document.getElementById("overlay").style.display = "none"; } ]]>

Cookies

This site uses cookies for functionality, traffic analysis and for targeted advertising. Click the Accept button to accept our Cookie Policy. The Cookie Policy page offers configuration for a reduced set of cookies for this site.