[Web Version (in ASP)] aspdemo\linecompare.asp
<%@ language="vbscript" %>
<%
Set cd = CreateObject("ChartDirector.API")
' The data for the upper and lower bounding lines
upperY = Array(60, 60, 100, 100, 60, 60)
lowerY = Array(40, 40, 80, 80, 40, 40)
zoneX = Array(0, 2.5, 3.5, 5.5, 6.5, 10)
' The data for the spline curve
curveY = Array(50, 44, 54, 48, 58, 50, 90, 85, 104, 82, 96, 90, 74, 52, 35, 58, 46, 54, 48, 52, 50)
curveX = Array(0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5, 5.5, 6, 6.5, 7, 7.5, 8, 8.5, 9, 9.5, 10)
' Create a XYChart object of size 600 x 300 pixels, with a light grey (cccccc) background, black
' border, and 1 pixel 3D border effect.
Set c = cd.XYChart(600, 300, &Hcccccc, &H000000, 1)
' Set default directory for loading images from current script directory
Call c.setSearchPath(Server.MapPath("."))
' Set the plotarea at (55, 58) and of size 520 x 195 pixels, with white background. Turn on both
' horizontal and vertical grid lines with light grey color (cccccc)
Call c.setPlotArea(55, 58, 520, 195, &Hffffff, -1, -1, &Hcccccc, &Hcccccc)
' Add a legend box at (55, 32) (top of the chart) with horizontal layout. Use 9pt Arial Bold font.
' Set the background and border color to Transparent.
Call c.addLegend(55, 32, False, "Arial Bold", 9).setBackground(cd.Transparent)
' Add a title box to the chart using 15pt Times Bold Italic font. The title is in CDML and includes
' embedded images for highlight. The text is white (ffffff) on a black background, with a 1 pixel 3D
' border.
Call c.addTitle( _
"<*block,valign=absmiddle*><*img=star.png*><*img=star.png*> Performance Enhancer " & _
"<*img=star.png*><*img=star.png*><*/*>", "Times New Roman Bold Italic", 15, &Hffffff _
).setBackground(&H000000, -1, 1)
' Add a title to the y axis
Call c.yAxis().setTitle("Temperature")
' Add a title to the x axis using CMDL
Call c.xAxis().setTitle("<*block,valign=absmiddle*><*img=clock.png*> Elapsed Time (hour)<*/*>")
' Set the axes width to 2 pixels
Call c.xAxis().setWidth(2)
Call c.yAxis().setWidth(2)
' Add a purple (800080) spline layer to the chart with a line width of 2 pixels
Set splineLayer = c.addSplineLayer(curveY, &H800080, "Molecular Temperature")
Call splineLayer.setXData(curveX)
Call splineLayer.setLineWidth(2)
' Add a line layer to the chart with two dark green (338033) data sets, and a line width of 2 pixels
Set lineLayer = c.addLineLayer2()
Call lineLayer.addDataSet(upperY, &H338033, "Target Zone")
Call lineLayer.addDataSet(lowerY, &H338033)
Call lineLayer.setXData(zoneX)
Call lineLayer.setLineWidth(2)
' Color the zone between the upper zone line and lower zone line as semi-transparent light green
' (8099ff99)
Call c.addInterLineLayer(lineLayer.getLine(0), lineLayer.getLine(1), &H8099ff99, &H8099ff99)
' If the spline line gets above the upper zone line, color to area between the lines red (ff0000)
Call c.addInterLineLayer(splineLayer.getLine(0), lineLayer.getLine(0), &Hff0000, cd.Transparent)
' If the spline line gets below the lower zone line, color to area between the lines blue (0000ff)
Call c.addInterLineLayer(splineLayer.getLine(0), lineLayer.getLine(1), cd.Transparent, &H0000ff)
' Add a custom CDML text at the bottom right of the plot area as the logo
Call c.addText(575, 250, _
"<*block,valign=absmiddle*><*img=small_molecule.png*> <*block*><*font=Times New Roman Bold " & _
"Italic,size=10,color=804040*>Molecular<*br*>Engineering<*/*>").setAlignment(cd.BottomRight)
' 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("", "", "title='Temperature at hour {x}: {value} C'")
%>
<!DOCTYPE html>
<html>
<head>
<title>Line with Target Zone</title>
<!-- Include ChartDirector Javascript Library to support chart interactions -->
<script type="text/javascript" src="cdjcv.js"></script>
</head>
<body style="margin:5px 0px 0px 5px">
<div style="font:bold 18pt verdana;">
Line with Target Zone
</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>
[Windows Version (in Visual Basic)] vbdemo\linecompare.cls
Public Sub createChart(viewer As Object, chartIndex As Integer)
Dim cd As New ChartDirector.API
' The data for the upper and lower bounding lines
Dim upperY()
upperY = Array(60, 60, 100, 100, 60, 60)
Dim lowerY()
lowerY = Array(40, 40, 80, 80, 40, 40)
Dim zoneX()
zoneX = Array(0, 2.5, 3.5, 5.5, 6.5, 10)
' The data for the spline curve
Dim curveY()
curveY = Array(50, 44, 54, 48, 58, 50, 90, 85, 104, 82, 96, 90, 74, 52, 35, 58, 46, 54, 48, _
52, 50)
Dim curveX()
curveX = Array(0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5, 5.5, 6, 6.5, 7, 7.5, 8, 8.5, 9, 9.5, _
10)
' Create a XYChart object of size 600 x 300 pixels, with a light grey (cccccc) background, black
' border, and 1 pixel 3D border effect.
Dim c As XYChart
Set c = cd.XYChart(600, 300, &Hcccccc, &H000000, 1)
' Set the plotarea at (55, 58) and of size 520 x 195 pixels, with white background. Turn on both
' horizontal and vertical grid lines with light grey color (cccccc)
Call c.setPlotArea(55, 58, 520, 195, &Hffffff, -1, -1, &Hcccccc, &Hcccccc)
' Add a legend box at (55, 32) (top of the chart) with horizontal layout. Use 9pt Arial Bold
' font. Set the background and border color to Transparent.
Call c.addLegend(55, 32, False, "arialbd.ttf", 9).setBackground(cd.Transparent)
' Add a title box to the chart using 15pt Times Bold Italic font. The title is in CDML and
' includes embedded images for highlight. The text is white (ffffff) on a black background, with
' a 1 pixel 3D border.
Call c.addTitle( _
"<*block,valign=absmiddle*><*img=star.png*><*img=star.png*> Performance Enhancer " & _
"<*img=star.png*><*img=star.png*><*/*>", "timesbi.ttf", 15, &Hffffff).setBackground( _
&H000000, -1, 1)
' Add a title to the y axis
Call c.yAxis().setTitle("Temperature")
' Add a title to the x axis using CMDL
Call c.xAxis().setTitle( _
"<*block,valign=absmiddle*><*img=clock.png*> Elapsed Time (hour)<*/*>")
' Set the axes width to 2 pixels
Call c.xAxis().setWidth(2)
Call c.yAxis().setWidth(2)
' Add a purple (800080) spline layer to the chart with a line width of 2 pixels
Dim splineLayer As SplineLayer
Set splineLayer = c.addSplineLayer(curveY, &H800080, "Molecular Temperature")
Call splineLayer.setXData(curveX)
Call splineLayer.setLineWidth(2)
' Add a line layer to the chart with two dark green (338033) data sets, and a line width of 2
' pixels
Dim lineLayer As LineLayer
Set lineLayer = c.addLineLayer2()
Call lineLayer.addDataSet(upperY, &H338033, "Target Zone")
Call lineLayer.addDataSet(lowerY, &H338033)
Call lineLayer.setXData(zoneX)
Call lineLayer.setLineWidth(2)
' Color the zone between the upper zone line and lower zone line as semi-transparent light green
' (8099ff99)
Call c.addInterLineLayer(lineLayer.getLine(0), lineLayer.getLine(1), &H8099ff99, &H8099ff99)
' If the spline line gets above the upper zone line, color to area between the lines red
' (ff0000)
Call c.addInterLineLayer(splineLayer.getLine(0), lineLayer.getLine(0), &Hff0000, _
cd.Transparent)
' If the spline line gets below the lower zone line, color to area between the lines blue
' (0000ff)
Call c.addInterLineLayer(splineLayer.getLine(0), lineLayer.getLine(1), cd.Transparent, _
&H0000ff)
' Add a custom CDML text at the bottom right of the plot area as the logo
Call c.addText(575, 250, _
"<*block,valign=absmiddle*><*img=small_molecule.png*> <*block*>" & _
"<*font=timesbi.ttf,size=10,color=804040*>Molecular<*br*>Engineering<*/*>").setAlignment( _
cd.BottomRight)
' Output the chart
Set viewer.Picture = c.makePicture()
'include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("clickable", "", _
"title='Temperature at hour {x}: {value} C'")
End Sub
© 2021 Advanced Software Engineering Limited. All rights reserved.
