ChartDirector 7.0 (ASP/COM/VB Edition)

Binary Data Series




This example demonstrates a chart representing binary data series.

A binary data series is a series with elements that can only assume two values. In this example, 0 and 1 are used to represent the two values.

There are plenty of methods to represent binary data series in a chart. In this example, three methods are demonstrated.

Source Code Listing

[Web Version (in ASP)] aspdemo\binaryseries.asp
<%@ language="vbscript" %> <% Set cd = CreateObject("ChartDirector.API") ' The data for the chart dataY = Array(1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 1) dataX = Array(DateSerial(2008, 7, 1) + TimeSerial(0, 0, 0), DateSerial(2008, 7, 1) + TimeSerial(2, _ 17, 2), DateSerial(2008, 7, 1) + TimeSerial(8, 5, 30), DateSerial(2008, 7, 1) + TimeSerial(10, _ 54, 10), DateSerial(2008, 7, 1) + TimeSerial(15, 40, 0), DateSerial(2008, 7, 1) + TimeSerial( _ 18, 22, 20), DateSerial(2008, 7, 1) + TimeSerial(22, 17, 14), DateSerial(2008, 7, 2) + _ TimeSerial(2, 55, 50), DateSerial(2008, 7, 2) + TimeSerial(8, 17, 14), DateSerial(2008, 7, 2) _ + TimeSerial(11, 55, 50), DateSerial(2008, 7, 2) + TimeSerial(13, 17, 14), DateSerial(2008, _ 7, 2) + TimeSerial(17, 55, 50), DateSerial(2008, 7, 2) + TimeSerial(20, 17, 14), DateSerial( _ 2008, 7, 3) + TimeSerial(0, 0, 0)) ' In this example, we only use position 1, 3, 5 for the data series. Positions 0, 2, 4, 6 are empty ' and serve as gaps. labels = Array("", "ON Only Filling", "", _ "<*font,color=cc2200*>ON<*/font*> / <*font,color=00aa22*>OFF<*/font*> Filling", "", _ "Logic Line", "") ' Create a XYChart object of size 600 x 180 pixels Set c = cd.XYChart(600, 180) ' Add a title to the chart using 10 points Arial Bold font. Set top/bottom margins to 12 pixels. Set title = c.addTitle("Binary Data Series Demonstration", "Arial Bold", 10) ' Tentatively set the plotarea at (100, 30) and of size 470 x 120 pixels. Use transparent border. ' Use grey (888888) solid line and light grey (ccccc) dotted line as major and minor vertical grid ' lines. Call c.setPlotArea(100, 30, 470, 120, -1, -1, cd.Transparent).setGridColor(cd.Transparent, _ &H888888, cd.Transparent, c.dashLineColor(&Hcccccc, cd.DotLine)) ' Set axes to transparent Call c.xAxis().setColors(cd.Transparent) Call c.yAxis().setColors(cd.Transparent) ' Set the y axis labels Call c.yAxis().setLabels(labels) ' Set y-axis label style to 8pt Arial Bold Call c.yAxis().setLabelStyle("Arial Bold", 8) ' Set x-axis major and minor tick density to 50 and 5 pixels. ChartDirector auto-scaling will use ' this as the guideline when putting ticks on the x-axis. Call c.xAxis().setTickDensity(50, 5) ' Use "<*font=Arial Bold*>{value|mmm dd}" for the first label of an hour, and "{value|hh:nn}" for ' all other labels. Call c.xAxis().setMultiFormat(cd.StartOfDayFilter(), "<*font=Arial Bold*>{value|mmm dd}", _ cd.AllPassFilter(), "{value|hh:nn}") ' ' A Logic Line can be achieved using a StepLineLayer in ChartDirector ' ' Shift the data by 4.5, so instead of 0 - 1, it is now 4.5 to 5.5, or fluctuate around the y = 5 ' (Logic Line label) position. shiftedLine0 = cd.ArrayMath(dataY).add(4.5).result() ' Add step lines using the original and the reversed data Set layer0 = c.addStepLineLayer(shiftedLine0, &H0000ff) Call layer0.setXData(dataX) ' ' To perform ON/OFF filling, we draw the logic line, and its reverse, and fill the region in between ' ' Shift the data by 2.5, so instead of 0 - 1, it is now 2.5 to 3.5, or fluctuate around the y = 3 ' (ON/OFF Filing label) position. shiftedLine1 = cd.ArrayMath(dataY).add(2.5).result() ' Reverse the data, so the 0 becomes 1 and 1 becomes 0, and shift it as well. reverseShiftedLine1 = cd.ArrayMath(dataY).mul(-1).add(3.5).result() ' Add step lines using the original and the reversed data Set layer1 = c.addStepLineLayer(shiftedLine1, cd.Transparent) Call layer1.addDataSet(reverseShiftedLine1, cd.Transparent) Call layer1.setXData(dataX) ' Fill the region between the two step lines with green (00aa22) or red (cc2200), depending on ' whether the original or the reserve is higher. Call c.addInterLineLayer(layer1.getLine(0), layer1.getLine(1), &H00aa22, &Hcc2200) ' ' The ON Only filling is the same as ON/OFF filling, except the OFF filling color is transparent ' ' Shift the data by 0.5, so instead of 0 - 1, it is now 0.5 to 1.5, or fluctuate around the y = 1 ' (ON Only Filing label) position. shiftedLine2 = cd.ArrayMath(dataY).add(0.5).result() ' Reverse the data, so the 0 becomes 1 and 1 becomes 0, and shift it as well. reverseShiftedLine2 = cd.ArrayMath(dataY).mul(-1).add(1.5).result() ' Add step lines using the original and the reversed data Set layer2 = c.addStepLineLayer(shiftedLine2, cd.Transparent) Call layer2.addDataSet(reverseShiftedLine2, cd.Transparent) Call layer2.setXData(dataX) ' Fill the region between the two step lines with green (00aa22) or transparent, depending on ' whether the original or the reserve is higher. Call c.addInterLineLayer(layer2.getLine(0), layer2.getLine(1), &H00aa22, cd.Transparent) ' Adjust the plot area size, such that the bounding box (inclusive of axes) is 10 pixels from the ' left edge, 10 pixels below the title, 30 pixels from the right edge, and 10 pixels above the ' bottom edge. Call c.packPlotArea(10, title.getHeight() + 10, c.getWidth() - 30, c.getHeight() - 10) ' Output the chart Set viewer = cd.WebChartViewer(Request, "chart1") Call viewer.setChart(c, cd.SVG) %> <!DOCTYPE html> <html> <head> <title>Binary Data Series</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;"> Binary Data Series </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\binaryseries.cls
Public Sub createChart(viewer As Object, chartIndex As Integer) Dim cd As New ChartDirector.API ' The data for the chart Dim dataY() dataY = Array(1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 1) Dim dataX() dataX = Array(DateSerial(2008, 7, 1) + TimeSerial(0, 0, 0), DateSerial(2008, 7, 1) + _ TimeSerial(2, 17, 2), DateSerial(2008, 7, 1) + TimeSerial(8, 5, 30), DateSerial(2008, 7, 1 _ ) + TimeSerial(10, 54, 10), DateSerial(2008, 7, 1) + TimeSerial(15, 40, 0), DateSerial( _ 2008, 7, 1) + TimeSerial(18, 22, 20), DateSerial(2008, 7, 1) + TimeSerial(22, 17, 14), _ DateSerial(2008, 7, 2) + TimeSerial(2, 55, 50), DateSerial(2008, 7, 2) + TimeSerial(8, 17, _ 14), DateSerial(2008, 7, 2) + TimeSerial(11, 55, 50), DateSerial(2008, 7, 2) + TimeSerial( _ 13, 17, 14), DateSerial(2008, 7, 2) + TimeSerial(17, 55, 50), DateSerial(2008, 7, 2) + _ TimeSerial(20, 17, 14), DateSerial(2008, 7, 3) + TimeSerial(0, 0, 0)) ' In this example, we only use position 1, 3, 5 for the data series. Positions 0, 2, 4, 6 are ' empty and serve as gaps. Dim labels() labels = Array("", "ON Only Filling", "", _ "<*font,color=cc2200*>ON<*/font*> / <*font,color=00aa22*>OFF<*/font*> Filling", "", _ "Logic Line", "") ' Create a XYChart object of size 600 x 180 pixels Dim c As XYChart Set c = cd.XYChart(600, 180) ' Add a title to the chart using 10 points Arial Bold font. Set top/bottom margins to 12 pixels. Dim title As ChartDirector.TextBox Set title = c.addTitle("Binary Data Series Demonstration", "arialbd.ttf", 10) ' Tentatively set the plotarea at (100, 30) and of size 470 x 120 pixels. Use transparent ' border. Use grey (888888) solid line and light grey (ccccc) dotted line as major and minor ' vertical grid lines. Call c.setPlotArea(100, 30, 470, 120, -1, -1, cd.Transparent).setGridColor(cd.Transparent, _ &H888888, cd.Transparent, c.dashLineColor(&Hcccccc, cd.DotLine)) ' Set axes to transparent Call c.xAxis().setColors(cd.Transparent) Call c.yAxis().setColors(cd.Transparent) ' Set the y axis labels Call c.yAxis().setLabels(labels) ' Set y-axis label style to 8pt Arial Bold Call c.yAxis().setLabelStyle("arialbd.ttf", 8) ' Set x-axis major and minor tick density to 50 and 5 pixels. ChartDirector auto-scaling will ' use this as the guideline when putting ticks on the x-axis. Call c.xAxis().setTickDensity(50, 5) ' Use "<*font=Arial Bold*>{value|mmm dd}" for the first label of an hour, and "{value|hh:nn}" ' for all other labels. Call c.xAxis().setMultiFormat(cd.StartOfDayFilter(), "<*font=arialbd.ttf*>{value|mmm dd}", _ cd.AllPassFilter(), "{value|hh:nn}") ' ' A Logic Line can be achieved using a StepLineLayer in ChartDirector ' ' Shift the data by 4.5, so instead of 0 - 1, it is now 4.5 to 5.5, or fluctuate around the y = ' 5 (Logic Line label) position. Dim shiftedLine0() shiftedLine0 = cd.ArrayMath(dataY).add(4.5).result() ' Add step lines using the original and the reversed data Dim layer0 As StepLineLayer Set layer0 = c.addStepLineLayer(shiftedLine0, &H0000ff) Call layer0.setXData(dataX) ' ' To perform ON/OFF filling, we draw the logic line, and its reverse, and fill the region in ' between ' ' Shift the data by 2.5, so instead of 0 - 1, it is now 2.5 to 3.5, or fluctuate around the y = ' 3 (ON/OFF Filing label) position. Dim shiftedLine1() shiftedLine1 = cd.ArrayMath(dataY).add(2.5).result() ' Reverse the data, so the 0 becomes 1 and 1 becomes 0, and shift it as well. Dim reverseShiftedLine1() reverseShiftedLine1 = cd.ArrayMath(dataY).mul(-1).add(3.5).result() ' Add step lines using the original and the reversed data Dim layer1 As StepLineLayer Set layer1 = c.addStepLineLayer(shiftedLine1, cd.Transparent) Call layer1.addDataSet(reverseShiftedLine1, cd.Transparent) Call layer1.setXData(dataX) ' Fill the region between the two step lines with green (00aa22) or red (cc2200), depending on ' whether the original or the reserve is higher. Call c.addInterLineLayer(layer1.getLine(0), layer1.getLine(1), &H00aa22, &Hcc2200) ' ' The ON Only filling is the same as ON/OFF filling, except the OFF filling color is transparent ' ' Shift the data by 0.5, so instead of 0 - 1, it is now 0.5 to 1.5, or fluctuate around the y = ' 1 (ON Only Filing label) position. Dim shiftedLine2() shiftedLine2 = cd.ArrayMath(dataY).add(0.5).result() ' Reverse the data, so the 0 becomes 1 and 1 becomes 0, and shift it as well. Dim reverseShiftedLine2() reverseShiftedLine2 = cd.ArrayMath(dataY).mul(-1).add(1.5).result() ' Add step lines using the original and the reversed data Dim layer2 As StepLineLayer Set layer2 = c.addStepLineLayer(shiftedLine2, cd.Transparent) Call layer2.addDataSet(reverseShiftedLine2, cd.Transparent) Call layer2.setXData(dataX) ' Fill the region between the two step lines with green (00aa22) or transparent, depending on ' whether the original or the reserve is higher. Call c.addInterLineLayer(layer2.getLine(0), layer2.getLine(1), &H00aa22, cd.Transparent) ' Adjust the plot area size, such that the bounding box (inclusive of axes) is 10 pixels from ' the left edge, 10 pixels below the title, 30 pixels from the right edge, and 10 pixels above ' the bottom edge. Call c.packPlotArea(10, title.getHeight() + 10, c.getWidth() - 30, c.getHeight() - 10) ' Output the chart Set viewer.Picture = c.makePicture() End Sub