Example: /ChartDirector/datatable

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/datatable


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/datatable

This example is the version from Sun, 17th Mar 2012.

Project "datatable.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(42.0, 49, 33, 38, 64, 56, 29, 41, 44, 57, 59, 42) dim data1(-1) as double = array(65.0, 75, 47, 34, 42, 49, 73, 62, 90, 69, 66, 78) dim data2(-1) as double = array(36.0, 28, 25, 28, 38, 20, 22, 30, 25, 33, 30, 24) dim labels(-1) as string = array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug","Sep", "Oct", "Nov", "Dec") // 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 - 120) 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 - 120, c.linearGradientColor(0, 55, 0, 55 + c.getHeight - 120, &haaccff, &hf9fcff), -1, -1, c.dashLineColor(&haa000000, c.kDotLine), -1) // Add a legend box and anchored the top center at the horizontal center of the // chart, just under the title. Use 10pts Arial Bold as font, with transparent // background and border. dim legendBox as CDLegendBoxMBS = c.addLegend(c.getWidth / 2, title.getHeight, false, "arialbd.ttf", 10) legendBox.setAlignment(c.kTopCenter) legendBox.setBackground(c.kTransparent, c.kTransparent) // Set y-axis title using 10 points Arial Bold Italic font, label style to 8 // points Arial Bold, and axis color to transparent call c.yAxis.setTitle("Revenue (USD millions)", "arialbi.ttf", 10) call c.yAxis.setLabelStyle("arialbd.ttf", 8) call c.yAxis.setColors(c.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 line layer to the chart dim layer as CDLineLayerMBS = c.addLineLayer // Set the line width to 3 pixels layer.setLineWidth(3) // Add the three data sets to the line layer, using circles, diamands and X // shapes as symbols layer.addDataSet(data0, &hff0000, "Quantum Computer").setDataSymbol(c.kCircleSymbol, 9) layer.addDataSet(data1, &h00ff00, "Atom Synthesizer").setDataSymbol(c.kDiamondSymbol, 11) layer.addDataSet(data2, &hff6600, "Proton Cannon").setDataSymbol(CDBaseChartMBS.Cross2Shape, 11) // 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 top/bottom margins of the cells to 3 pixels table.getStyle.setMargin(0, 0, 3, 3) // Use Arial Bold as the font for the first row table.getRowStyle(0).setFontStyle("arialbd.ttf") // // 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 1st and 3rd rows to // light grey (eeeeee). call table.appendRow.setBackground(&heeeeee, c.kLineColor) call table.appendRow call table.appendRow.setBackground(&heeeeee, c.kLineColor) // Put the values of the 3 data series to the cells in the 3 rows for i as integer = 0 to UBound(data0) call table.setText(i, 1, str(data0(i))) call table.setText(i, 2, str(data1(i))) call table.setText(i, 3, str(data2(i))) next // Insert a column on the left for the legend icons. Use 5 pixels left/right // margins and 3 pixels top/bottom margins for the cells in this column. table.insertCol(0).setMargin(5, 5, 3, 3) // The top cell is set to transparent, so it is invisible table.getCell(0, 0).setBackground(c.kTransparent, c.kTransparent) // The other 3 cells are set to the legend icons of the 3 data series call table.setText(0, 1, layer.getLegendIcon(0)) call table.setText(0, 2, layer.getLegendIcon(1)) call table.setText(0, 3, layer.getLegendIcon(2)) // Layout legend box first, so we can get its size call c.layoutLegend // Adjust the plot area size, such that the bounding box (inclusive of axes) is 2 // pixels from the left, right and bottom edge, and is just under the legend box. c.packPlotArea(2, legendBox.getTopY + legendBox.getHeight, c.getWidth - 3, c.getHeight - 3) // After determining the exact plot area position, we may adjust the legend box // and the title positions so that they are centered relative to the plot area // (instead of the chart) legendBox.setPos(plotArea.getLeftX + (plotArea.getWidth - legendBox.getWidth) / 2, legendBox.getTopY) 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