Xojo Developer Conference
25/27th April 2018 in Denver.
MBS Xojo Conference
6/7th September 2018 in Munich, Germany.

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.rbp"
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

Feedback, Comments & Corrections

The items on this page are in the following plugins: MBS ChartDirector Plugin.

MBS Xojo Chart Plugins