CDML Tooltip

[Web Version (in ASP)] aspdemo\cdmltooltip.asp
<%@ language="vbscript" %>
<%
Set cd = CreateObject("ChartDirector.API")

'
' Data for 4 scatter layers to demonstrate various tooltip styles
'

dataX0 = Array(1, 1, 2, 2)
dataY0 = Array(3, 4, 3, 4)

dataX1 = Array(3, 3, 4, 4)
dataY1 = Array(3, 4, 3, 4)

dataX2 = Array(1, 1, 2, 2)
dataY2 = Array(1, 2, 1, 2)

dataX3 = Array(3, 3, 4, 4)
dataY3 = Array(1, 2, 1, 2)

' Create a XYChart object of size 550 x 390 pixels
Set c = cd.XYChart(550, 390)

' Set the plotarea at (30, 40) and size 300 x 300 pixels. Use a gradient color background, light
' grey (c0c0c0) border, and light grey horizontal and vertical grid lines.
Call c.setPlotArea(30, 40, 300, 300, c.linearGradientColor(0, 30, 0, 330, &Hf9fcff, &Haaccff), -1, _
    &Hc0c0c0, &Hc0c0c0, &Hc0c0c0)

' Add a legend box at the right side of the plot area. Use 10pt Arial Bold font and set background
' and border colors to Transparent.
Call c.addLegend(c.getPlotArea().getRightX() + 20, c.getPlotArea().getTopY(), True, _
    "Arial Bold Italic", 10).setBackground(cd.Transparent)

' Add a title to the chart using 18pt Times Bold Itatic font
Call c.addTitle("CDML Tooltip Demonstration", "Times New Roman Bold Italic", 18)

' Set the axes line width to 3 pixels, and ensure the auto axis labels are integers.
Call c.xAxis().setWidth(3)
Call c.yAxis().setWidth(3)
Call c.yAxis().setMinTickInc(1)
Call c.yAxis().setMinTickInc(1)

' Add a scatter chart layer with 19 pixel red (ff3333) sphere symbols. Use default CDML tooltip
' style.
Set layer0 = c.addScatterLayer(dataX0, dataY0, "Default CDML Tooltip", cd.GlassSphere2Shape, 19, _
    &Hff3333)
Call layer0.setHTMLImageMap("", "", "title='<*cdml*>{dataSetName}<*br*>X = {x}, Y = {value}'")

' Add a scatter chart layer with 19 pixel green (33ff33) sphere symbols. Cconfigure the CDML tooltip
' to use a background background with text of different colors and fonts.
Set layer1 = c.addScatterLayer(dataX1, dataY1, "Dark Style Tooltip", cd.GlassSphere2Shape, 19, _
    &H33ff33)
Call layer1.setHTMLImageMap("", "", _
    "title='<*cdml style=""background:#000000; padding:5px; border-radius:3px; " & _
    "font-size:8pt""*><*span style=""font:bold italic 100% Arial; color:#FFFF00""*>" & _
    "{dataSetName}<*/span*><*br*><*span style=""font:bold 100% Arial; color:#FFFFFF""*>X = " & _
    "{x}, Y = {value}<*/span*>'")

' Add a scatter chart layer with 19 pixels sky blue (66ccff) symbols. Configure the CDML tooltip to
' ue a translucent background.
Set layer2 = c.addScatterLayer(dataX2, dataY2, "Translucent Tooltip", cd.GlassSphere2Shape, 19, _
    &H66ccff)
Call layer2.setHTMLImageMap("", "", _
    "title='<*cdml class=""translucentToolTip""*><*b*><*u*>{dataSetName}<*/u*><*/b*><*br*>X = " & _
    "{x}, Y = {value}'")

' Add a scatter chart layer with 19 pixels sky blue (ffff00) symbols. Use standard tooltips provided
' by the GUI framework.
Set layer3 = c.addScatterLayer(dataX3, dataY3, "Classical Tooltip", cd.GlassSphere2Shape, 19, _
    &Hffff00)
Call layer3.setHTMLImageMap("", "", "title='[{dataSetName}] X = {x}, Y = {value}'")

' Output the chart
Set viewer = cd.WebChartViewer(Request, "chart1")
Call viewer.setChart(c, cd.SVG)

' Include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("")
%>

<!DOCTYPE html>
<html>
<head>
    <title>CDML Tooltips</title>
    <!-- Include ChartDirector Javascript Library to support chart interactions -->
    <script type="text/javascript" src="cdjcv.js"></script>
    <style>
        .translucentToolTip { background:rgba(255,255,0,0.6); padding:5px; border-radius:3px; font:8pt Arial; }
    </style>
</head>
<body style="margin:5px 0px 0px 5px">
    <div style="font:bold 18pt verdana;">
        CDML Tooltips
    </div>
    <hr style="border:solid 1px #000080; background:#000080" />
    <div style="font:10pt verdana; margin-bottom:1.5em">
        <a href="viewsource.asp?file=<%= Request("SCRIPT_NAME") %>">View Chart Source Code</a>
    </div>
    <!-- ****** Here is the chart image ****** -->
    <%= viewer.renderHTML() %>
</body>
</html>