ChartDirector 7.0 (ASP/COM/VB Edition)
Uneven Data Points
Source Code Listing
<%@ language="vbscript" %>
<%
Set cd = CreateObject("ChartDirector.API")
' Data points which more unevenly spaced in time
data0Y = Array(62, 69, 53, 58, 84, 76, 49, 61, 64, 77, 79)
data0X = Array(DateSerial(2007, 1, 1), DateSerial(2007, 1, 2), DateSerial(2007, 1, 5), DateSerial( _
2007, 1, 7), DateSerial(2007, 1, 10), DateSerial(2007, 1, 14), DateSerial(2007, 1, 17), _
DateSerial(2007, 1, 18), DateSerial(2007, 1, 19), DateSerial(2007, 1, 20), DateSerial(2007, 1, _
21))
' Data points which are evenly spaced in a certain time range
data1Y = Array(36, 25, 28, 38, 20, 30, 27, 35, 65, 60, 40, 73, 62, 90, 75, 72)
data1Start = DateSerial(2007, 1, 1)
data1End = DateSerial(2007, 1, 16)
' Data points which are evenly spaced in another time range, in which the spacing is different from
' the above series
data2Y = Array(25, 15, 30, 23, 32, 55, 45)
data2Start = DateSerial(2007, 1, 9)
data2End = DateSerial(2007, 1, 21)
' Create a XYChart object of size 600 x 400 pixels. Use a vertical gradient color from light blue
' (99ccff) to white (ffffff) spanning the top 100 pixels as background. Set border to grey (888888).
' Use rounded corners. Enable soft drop shadow.
Set c = cd.XYChart(600, 400)
Call c.setBackground(c.linearGradientColor(0, 0, 0, 100, &H99ccff, &Hffffff), &H888888)
Call c.setRoundedFrame()
Call c.setDropShadow()
' Add a title using 18pt Times New Roman Bold Italic font. Set top margin to 16 pixels.
Call c.addTitle("Product Line Order Backlog", "Times New Roman Bold Italic", 18).setMargin2(0, 0, _
16, 0)
' Set the plotarea at (60, 80) and of 510 x 275 pixels in size. Use transparent border and dark grey
' (444444) dotted grid lines
Set plotArea = c.setPlotArea(60, 80, 510, 275, -1, -1, cd.Transparent, c.dashLineColor(&H444444, _
&H0101), -1)
' Add a legend box where the top-center is anchored to the horizontal center of the plot area at y =
' 45. Use horizontal layout and 10 points Arial Bold font, and transparent background and border.
Set legendBox = c.addLegend(plotArea.getLeftX() + plotArea.getWidth() / 2, 45, False, _
"Arial Bold", 10)
Call legendBox.setAlignment(cd.TopCenter)
Call legendBox.setBackground(cd.Transparent, cd.Transparent)
' Set x-axis tick density to 75 pixels and y-axis tick density to 30 pixels. ChartDirector
' auto-scaling will use this as the guidelines when putting ticks on the x-axis and y-axis.
Call c.yAxis().setTickDensity(30)
Call c.xAxis().setTickDensity(75)
' Set all axes to transparent
Call c.xAxis().setColors(cd.Transparent)
Call c.yAxis().setColors(cd.Transparent)
' Set the x-axis margins to 15 pixels, so that the horizontal grid lines can extend beyond the
' leftmost and rightmost vertical grid lines
Call c.xAxis().setMargin(15, 15)
' Set axis label style to 8pt Arial Bold
Call c.xAxis().setLabelStyle("Arial Bold", 8)
Call c.yAxis().setLabelStyle("Arial Bold", 8)
Call c.yAxis2().setLabelStyle("Arial Bold", 8)
' Add axis title using 10pt Arial Bold Italic font
Call c.yAxis().setTitle("Backlog in USD millions", "Arial Bold Italic", 10)
' Add the first data series
Set layer0 = c.addLineLayer2()
Call layer0.addDataSet(data0Y, &Hff0000, "Quantum Computer").setDataSymbol(cd.GlassSphere2Shape, _
11)
Call layer0.setXData(data0X)
Call layer0.setLineWidth(3)
' Add the second data series
Set layer1 = c.addLineLayer2()
Call layer1.addDataSet(data1Y, &H00ff00, "Atom Synthesizer").setDataSymbol(cd.GlassSphere2Shape, _
11)
Call layer1.setXData2(data1Start, data1End)
Call layer1.setLineWidth(3)
' Add the third data series
Set layer2 = c.addLineLayer2()
Call layer2.addDataSet(data2Y, &Hff6600, "Proton Cannon").setDataSymbol(cd.GlassSphere2Shape, 11)
Call layer2.setXData2(data2Start, data2End)
Call layer2.setLineWidth(3)
' 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='Backlog of {dataSetName} at {x|mm/dd/yyyy}: US$ {value}M'")
%>
<!DOCTYPE html>
<html>
<head>
<title>Uneven Data Points </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;">
Uneven Data Points
</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>
Public Sub createChart(viewer As Object, chartIndex As Integer)
Dim cd As New ChartDirector.API
' Data points which more unevenly spaced in time
Dim data0Y()
data0Y = Array(62, 69, 53, 58, 84, 76, 49, 61, 64, 77, 79)
Dim data0X()
data0X = Array(DateSerial(2007, 1, 1), DateSerial(2007, 1, 2), DateSerial(2007, 1, 5), _
DateSerial(2007, 1, 7), DateSerial(2007, 1, 10), DateSerial(2007, 1, 14), DateSerial(2007, _
1, 17), DateSerial(2007, 1, 18), DateSerial(2007, 1, 19), DateSerial(2007, 1, 20), _
DateSerial(2007, 1, 21))
' Data points which are evenly spaced in a certain time range
Dim data1Y()
data1Y = Array(36, 25, 28, 38, 20, 30, 27, 35, 65, 60, 40, 73, 62, 90, 75, 72)
Dim data1Start As Date
data1Start = DateSerial(2007, 1, 1)
Dim data1End As Date
data1End = DateSerial(2007, 1, 16)
' Data points which are evenly spaced in another time range, in which the spacing is different
' from the above series
Dim data2Y()
data2Y = Array(25, 15, 30, 23, 32, 55, 45)
Dim data2Start As Date
data2Start = DateSerial(2007, 1, 9)
Dim data2End As Date
data2End = DateSerial(2007, 1, 21)
' Create a XYChart object of size 600 x 400 pixels. Use a vertical gradient color from light
' blue (99ccff) to white (ffffff) spanning the top 100 pixels as background. Set border to grey
' (888888). Use rounded corners. Enable soft drop shadow.
Dim c As XYChart
Set c = cd.XYChart(600, 400)
Call c.setBackground(c.linearGradientColor(0, 0, 0, 100, &H99ccff, &Hffffff), &H888888)
Call c.setRoundedFrame()
Call c.setDropShadow()
' Add a title using 18pt Times New Roman Bold Italic font. Set top margin to 16 pixels.
Call c.addTitle("Product Line Order Backlog", "timesbi.ttf", 18).setMargin2(0, 0, 16, 0)
' Set the plotarea at (60, 80) and of 510 x 275 pixels in size. Use transparent border and dark
' grey (444444) dotted grid lines
Dim plotArea As PlotArea
Set plotArea = c.setPlotArea(60, 80, 510, 275, -1, -1, cd.Transparent, c.dashLineColor( _
&H444444, &H0101), -1)
' Add a legend box where the top-center is anchored to the horizontal center of the plot area at
' y = 45. Use horizontal layout and 10 points Arial Bold font, and transparent background and
' border.
Dim legendBox As LegendBox
Set legendBox = c.addLegend(plotArea.getLeftX() + plotArea.getWidth() / 2, 45, False, _
"arialbd.ttf", 10)
Call legendBox.setAlignment(cd.TopCenter)
Call legendBox.setBackground(cd.Transparent, cd.Transparent)
' Set x-axis tick density to 75 pixels and y-axis tick density to 30 pixels. ChartDirector
' auto-scaling will use this as the guidelines when putting ticks on the x-axis and y-axis.
Call c.yAxis().setTickDensity(30)
Call c.xAxis().setTickDensity(75)
' Set all axes to transparent
Call c.xAxis().setColors(cd.Transparent)
Call c.yAxis().setColors(cd.Transparent)
' Set the x-axis margins to 15 pixels, so that the horizontal grid lines can extend beyond the
' leftmost and rightmost vertical grid lines
Call c.xAxis().setMargin(15, 15)
' Set axis label style to 8pt Arial Bold
Call c.xAxis().setLabelStyle("arialbd.ttf", 8)
Call c.yAxis().setLabelStyle("arialbd.ttf", 8)
Call c.yAxis2().setLabelStyle("arialbd.ttf", 8)
' Add axis title using 10pt Arial Bold Italic font
Call c.yAxis().setTitle("Backlog in USD millions", "arialbi.ttf", 10)
' Add the first data series
Dim layer0 As LineLayer
Set layer0 = c.addLineLayer2()
Call layer0.addDataSet(data0Y, &Hff0000, "Quantum Computer").setDataSymbol( _
cd.GlassSphere2Shape, 11)
Call layer0.setXData(data0X)
Call layer0.setLineWidth(3)
' Add the second data series
Dim layer1 As LineLayer
Set layer1 = c.addLineLayer2()
Call layer1.addDataSet(data1Y, &H00ff00, "Atom Synthesizer").setDataSymbol( _
cd.GlassSphere2Shape, 11)
Call layer1.setXData2(data1Start, data1End)
Call layer1.setLineWidth(3)
' Add the third data series
Dim layer2 As LineLayer
Set layer2 = c.addLineLayer2()
Call layer2.addDataSet(data2Y, &Hff6600, "Proton Cannon").setDataSymbol(cd.GlassSphere2Shape, _
11)
Call layer2.setXData2(data2Start, data2End)
Call layer2.setLineWidth(3)
' Output the chart
Set viewer.Picture = c.makePicture()
'include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("clickable", "", _
"title='Backlog of {dataSetName} at {x|mm/dd/yyyy}: US$ {value}M'")
End Sub