ASE Home Page Products Download Purchase Support About ASE
ChartDirector Support
 Forum HomeForum Home   SearchSearch

Message ListMessage List     Post MessagePost Message

  how to remove the top portion of data table chart
Posted by vivian on Jan-12-2012 00:57
| Reply | Monitor
Attachments:
how to remove the top portion of the data table chart

------------------------------------------------


<%@ language="vbscript" %>


<%
Set cd = CreateObject("ChartDirector.API")

' The data for the line chart
data0 = Array(410, 420, 500, 590)
data1 = Array(500, 370, 680, 850)
labels = Array("Q1", "Q2", "Q3", "Q4")


' Create a XYChart object of size 600 x 400 pixels
'Set c = cd.XYChart(600, 400)
Set c = cd.XYChart(1000, 400)

' Add a title to the chart using 18 pts Times Bold Italic font
Set title = c.addTitle("Product Line Global Revenue", "timesbi.ttf", 18)

' Tentatively set the plotarea at (50, 55) and of (chart_width - 100) x (chart_height
' - 150) pixels in size. Use a vertical gradient color from sky blue (aaccff) t0
' light blue (f9f9ff) as background. Set both horizontal and vertical grid lines to
' dotted semi-transprent black (aa000000).
'Set plotArea = c.setPlotArea(50, 55, c.getWidth() - 100, c.getHeight() - 150, _
'    c.linearGradientColor(0, 55, 0, 55 + c.getHeight() - 150, &Haaccff, &Hf9fcff), _
'    -1, -1, c.dashLineColor(&Haa000000, cd.DotLine), -1)

Set plotArea = c.setPlotArea(50, 55, c.getWidth() - 100, c.getHeight() - 150)

' Set y-axis title using 12 points Arial Bold Italic font, and set its position 10
' pixels from the axis.
Call c.yAxis().setTitle("", "arialbi.ttf", 12)
Call c.yAxis().setTitlePos(cd.Left, 10)

' Set y-axis label style to 10 points Arial Bold and axis color to transparent
Call c.yAxis().setLabelStyle("arialbd.ttf", 10)

Call c.yAxis().setColors(cd.Transparent)

' Set y-axis tick density to 30 pixels. ChartDirector auto-scaling will use this as
' the guideline when putting ticks on the y-axis.
Call c.yAxis().setTickDensity(30)

' Add a bar layer to the chart with side layout
Set layer = c.addBarLayer2(cd.Side)

' Add two data sets to the bar layer
Call layer.addDataSet(data0a, &Hff6600, "FY 2007")
Call layer.addDataSet(data1b, &H0088ff, "FY 2008")

' Use soft lighting effect with light direction from the left
Call layer.setBorderColor(cd.Transparent, cd.softLighting(cd.Left))

' Set the x axis labels
Call c.xAxis().setLabels(labels)

' Convert the labels on the x-axis to a CDMLTable
Set table = c.xAxis().makeLabelTable()

' Set the default left/right margins to 5 pixels and top/bottom margins to 3 pixels.
' Set the default font size to 10 points
Set cellStyle = table.getStyle()
Call cellStyle.setMargin2(5, 5, 4, 3)
Call cellStyle.setFontSize(10)

' Set the first row to use Arial Bold font, with a light grey (eeeeee) background.
Set firstRowStyle = table.getRowStyle(0)
Call firstRowStyle.setFontStyle("arialbd.ttf")
Call firstRowStyle.setBackground(&Heeeeee, cd.LineColor)
Call firstRowStyle.setFontAngle(90)

'
' We can add more information to the table. In this sample code, we add the data
' series and the legend icons to the table.
'

' Add 3 more rows to the table. Set the background of the 2nd row to light grey
' (eeeeee).
Call table.appendRow()
Call table.appendRow().setBackground(&Heeeeee, cd.LineColor)
Call table.appendRow()

' Put the values of the 2 data series in the first 2 rows. Put the percentage
' differences in the 3rd row.
For i = 0 To UBound(data0)
    Call table.setText(i, 1, CStr(data0(i)))
    Call table.setText(i, 2, CStr(data1(i)))

    'percentageDiff = 100.0 * (data1(i) - data0(i)) / data0(i)
    percentageDiff = data0(i) + data1(i)

    ' Use red or green color depending on whether the difference is positive or
    ' negative
    formatString = "<*color=008800*>+{value|1}%"
    If percentageDiff < 0 Then
        formatString = "<*color=cc0000*>{value|1}%"
    End If
    'Call table.setText(i, 3, c.formatValue(percentageDiff, formatString))
    Call table.setText(i, 3, percentageDiff)
Next

' Insert a column on the left for the legend icons using Arial Bold font.
Call table.insertCol(0).setFontStyle("arialbd.ttf")

' The top cell is set to transparent, so it is invisible
Call table.getCell(0, 0).setBackground(cd.Transparent, cd.Transparent)

' The next 2 cells are set to the legend icons and names of the 2 data series
Call table.setText(0, 1, layer.getLegendIcon(0) & "  FY 2007")
Call table.setText(0, 2, layer.getLegendIcon(1) & "  FY 2008")

' The last cell is set to "Change"
Call table.setText(0, 3, "Change")

' Append a column on the right for the total values.
Call table.appendCol()

' Put "Total" in the top cell as the heading of this column
Call table.setText(table.getColCount() - 1, 0, "Total")

' The next two cells are the total of the data series
total0 = cd.ArrayMath(data0).sum()
total1 = cd.ArrayMath(data1).sum()
Call table.setText(table.getColCount() - 1, 1, CStr(total0))
Call table.setText(table.getColCount() - 1, 2, CStr(total1))

' The last cell is the percentage differences of the total
totalPercentageDiff = (total1 - total0) / total0 * 100

' Use red or green color depending on whether the difference is positive or negative
totalFormatString = "<*color=008800*>+{value|1}%"
If totalPercentageDiff < 0 Then
    totalFormatString = "<*color=cc0000*>{value|1}%"
End If
Call table.setText(table.getColCount() - 1, 3, c.formatValue(totalPercentageDiff, _
    totalFormatString))

'
' We now demonstrate how to adjust the plot area positions, to allow space for the
' newly inserted left and right columns in the table.
'

' We layout the axis first in order to get the axis metrics (including table metrics)
Call c.layoutAxes()

' If the first column is wider than the left y-axis, we need to reserve for some left
' margin to ensure the first column stays within the chart.
leftMargin = 0
If table.getColWidth(0) > c.yAxis().getThickness() Then
    leftMargin = table.getColWidth(0) - c.yAxis().getThickness()
End If

' Similarly, we need to reserve some right margin for the last column
rightMargin = table.getColWidth(table.getColCount() - 1)

' Adjust the plot area size, such that the bounding box (inclusive of axes) using the
' given left and right margin, plus 2 more pixels. Put the plot area 10 pixels below
' the title and use 2 pixels as the bottom margin. from the left, right and bottom
' edge, and is just under the legend box.
Call c.packPlotArea(leftMargin + 2, title.getHeight() + 10, c.getWidth() - 3 - _
    rightMargin, c.getHeight() - 3)

' After determining the exact plot area position, we may adjust title position so
' that it is centered relative to the plot area (instead of the chart)
Call title.setPos(plotArea.getLeftX() + (plotArea.getWidth() - title.getWidth()) / _
    2, title.getTopY())

' Output the chart
Response.ContentType = "image/png"
Response.BinaryWrite c.makeChart2(cd.PNG)
Response.End
%>
cdprob.jpg

  Re: how to remove the top portion of data table chart
Posted by Peter Kwan on Jan-13-2012 00:38
| Reply | Monitor
Hi vivian,

You may set the plot area height to 1 and set its border color to Transparent. For example:

Set plotArea = c.setPlotArea(50, 55, c.getWidth() - 100, 1, cd.Transparent, _
cd.Transparent, cd.Transparent, cd.Transparent, cd.Transparent)

Please also remove the line that calls "packPlotArea". You may remove all the code for the y-axis if you are not using it.

Hope this can help.

Regards
Peter Kwan