Binary Data Series

[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