Example: /ChartDirector/datatable2

Online Documentation   -   Statistics   -   FAQ   -   Plugin Parts (All, Dependencies)   -   Class hierarchy

New in Version 22.2 22.3 22.4 22.5 23.0 23.1 23.2 23.3 23.4 23.5 24.0 24.1

The list of the   topics,   classes,   interfaces,   controls,   modules,   global methods by category,   global methods by name,   screenshots,   licenses   and   examples.

Platforms to show: All Mac Windows Linux Cross-Platform

/ChartDirector/datatable2


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.


💬 Ask a question or report a problem