Platforms to show: All Mac Windows Linux Cross-Platform
Required plugins for this example: MBS ChartDirector Plugin
You find this example project in your Plugins Download as a Xojo project file within the examples folder: /ChartDirector/datatable2
This example is the version from Sun, 17th Mar 2012.
Project "datatable2.xojo_binary_project"
Class App Inherits Application
Const kEditClear = "&Löschen"
Const kFileQuit = "Beenden"
Const kFileQuitShortcut = ""
End Class
Class PicWindow Inherits Window
EventHandler Sub Open()
// The data for the line chart
dim data0(-1) as double = array(410.0, 420, 500, 590)
dim data1(-1) as double = array(500.0, 370, 680, 850)
dim labels(-1) as string = array("Q1", "Q2", "Q3", "Q4")
// Create a XYChart object of size 600 x 400 pixels
dim c as new CDXYChartMBS(600, 400)
// Add a title to the chart using 18 pts Times Bold Italic font
dim title as CDTextBoxMBS = 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).
dim plotArea as CDPlotAreaMBS = 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, CDXYChartMBS.kDotLine), -1)
// Set y-axis title using 12 points Arial Bold Italic font, and set its position
// 10 pixels from the axis.
call c.yAxis.setTitle("Revenue (USD millions)", "arialbi.ttf", 12)
c.yAxis.setTitlePos(CDXYChartMBS.kLeft, 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(CDXYChartMBS.kTransparent)
// Set y-axis tick density to 30 pixels. ChartDirector auto-scaling will use this
// as the guideline when putting ticks on the y-axis.
c.yAxis.setTickDensity(30)
// Add a bar layer to the chart with side layout
dim layer as CDBarLayerMBS = c.addBarLayer(CDXYChartMBS.kSide)
// Add two data sets to the bar layer
call layer.addDataSet(data0, &hff6600, "FY 2007")
call layer.addDataSet(data1, &h0088ff, "FY 2008")
// Use soft lighting effect with light direction from the left
layer.setBorderColor(CDXYChartMBS.kTransparent, CDXYChartMBS.softLighting(CDXYChartMBS.kLeft))
// Set the x axis labels
call c.xAxis.setLabels(labels)
// Convert the labels on the x-axis to a CDMLTable
dim table AS CDMLTableMBS = 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
dim cellStyle as CDTextBoxMBS = table.getStyle
cellStyle.setMargin(5, 5, 4, 3)
cellStyle.setFontSize(10)
// Set the first row to use Arial Bold font, with a light grey (eeeeee)
// background.
dim firstRowStyle as CDTextBoxMBS = table.getRowStyle(0)
firstRowStyle.setFontStyle("arialbd.ttf")
firstRowStyle.setBackground(&heeeeee, CDXYChartMBS.kLineColor)
//
// 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, CDXYChartMBS.kLineColor)
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 as integer = 0 to ubound(data0)
call table.setText(i, 1, str(data0(i)))
call table.setText(i, 2, str(data1(i)))
dim percentageDiff as double = (data1(i) - data0(i)) / data0(i) * 100
// Use red or green color depending on whether the difference is positive or
// negative
dim formatString as string= "<*color=008800*>+{value|1}%"
if percentageDiff < 0 then
formatString = "<*color=cc0000*>{value|1}%"
end if
call table.setText(i, 3, c.formatValue(percentageDiff, formatString))
next
// Insert a column on the left for the legend icons using Arial Bold font.
table.insertCol(0).setFontStyle("arialbd.ttf")
// The top cell is set to transparent, so it is invisible
table.getCell(0, 0).setBackground(CDXYChartMBS.kTransparent, CDXYChartMBS.kTransparent)
// 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
dim total0 as double=0.0
dim total1 as double=0.0
for each v as double in data0
total0=total0+v
next
for each v as double in data1
total1=total1+v
next
call table.setText(table.getColCount - 1, 1, str(total0))
call table.setText(table.getColCount - 1, 2, str(total1))
// The last cell is the percentage differences of the total
dim totalPercentageDiff as double = (total1 - total0) / total0 * 100
// Use red or green color depending on whether the difference is positive or
// negative
dim totalFormatString as string= "<*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)
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.
dim leftMargin as integer = 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
dim rightMargin as integer = 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)
title.setPos(plotArea.getLeftX + (plotArea.getWidth - title.getWidth) / 2, title.getTopY)
// Output the chart
Backdrop=c.makeChartPicture
End EventHandler
End Class
MenuBar MenuBar1
MenuItem FileMenu = "&Ablage"
MenuItem FileQuit = "#App.kFileQuit"
MenuItem EditMenu = "&Bearbeiten"
MenuItem EditUndo = "&Rückgängig"
MenuItem UntitledMenu1 = "-"
MenuItem EditCut = "&Ausschneiden"
MenuItem EditCopy = "&Kopieren"
MenuItem EditPaste = "&Einfügen"
MenuItem EditClear = "#App.kEditClear"
MenuItem UntitledMenu0 = "-"
MenuItem EditSelectAll = "&Alles auswählen"
End MenuBar
End Project
The items on this page are in the following plugins: MBS ChartDirector Plugin.