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/markbar
This example is the version from Sun, 17th Mar 2012.
Project "markbar.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 bars and the marks dim barData(-1) as double = array(100.0, 125, 245, 147, 67, 96, 160, 145, 97, 167, 220, 125) dim markData(-1) as double = array(85.0, 156, 220, 120, 80, 110, 140, 130, 111, 180, 175, 100) // The labels for the bar chart dim labels(-1) as string = array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dec") // Create a XYChart object of size 480 x 360 pixels. Use a vertical gradient // color from pale blue (e8f0f8) to sky blue (aaccff) spanning half the chart // height as background. Set border to blue (88aaee). Use rounded corners. Enable // soft drop shadow. dim c as new CDXYChartMBS(480, 360) c.setBackground(c.linearGradientColor(0, 0, 0, c.getHeight / 2, &he8f0f8, &haaccff), &h88aaee) c.setRoundedFrame c.setDropShadow // Add a title to the chart using 15 points Arial Italic font. Set top/bottom // margins to 12 pixels. dim title as CDTextBoxMBS = c.addTitle("Bars with Marks Demonstration", "ariali.ttf", 15) title.setMargin(0, 0, 12, 12) // Tentatively set the plotarea to 50 pixels from the left edge to allow for the // y-axis, and to just under the title. Set the width to 65 pixels less than the // chart width, and the height to reserve 90 pixels at the bottom for the x-axis // and the legend box. Use pale blue (e8f0f8) background, transparent border, and // grey (888888) dotted horizontal grid lines. call c.setPlotArea(50, title.getHeight, c.getWidth - 65, c.getHeight - title.getHeight - 90, &he8f0f8, -1, CDXYChartMBS.kTransparent, c.dashLineColor(&h888888, CDXYChartMBS.kDotLine)) // Add a legend box where the bottom-center is anchored to the 15 pixels above // the bottom-center of the chart. Use horizontal layout and 8 points Arial font. dim legendBox as CDLegendBoxMBS = c.addLegend(c.getWidth / 2, c.getHeight - 15, false, "arial.ttf", 8) legendBox.setAlignment(CDXYChartMBS.kBottomCenter) // Set the legend box background and border to pale blue (e8f0f8) and bluish grey // (445566) legendBox.setBackground(&he8f0f8, &h445566) // Use rounded corners of 5 pixel radius for the legend box legendBox.setRoundedCorners(5) // Use line style legend key legendBox.setLineStyleKey // Set axes to transparent c.xAxis.setColors(CDXYChartMBS.kTransparent) c.yAxis.setColors(CDXYChartMBS.kTransparent) // Set the labels on the x axis call c.xAxis.setLabels(labels) // Add a box-whisker layer with just the middle mark visible for the marks. Use // red (ff0000) color for the mark, with a line width of 2 pixels and 10% // horizontal gap dim data(-1) as double dim markLayer as CDBoxWhiskerLayerMBS = c.addBoxWhiskerLayer(data, data, data, data, markData, -1, &hff0000) markLayer.setLineWidth(2) markLayer.setDataGap(0.1) // Add the legend key for the mark line legendBox.addKey("Target", &hff0000, 2) // Add a blue (0066cc) bar layer using the given data. dim barLayer as CDBarLayerMBS = c.addBarLayer(barData, &h0066cc, "Actual") // Use soft lighting effect for the bars with light direction from left. call barLayer.setBorderColor(CDXYChartMBS.kTransparent, CDXYChartMBS.softLighting(CDXYChartMBS.kLeft)) // Adjust the plot area size, such that the bounding box (inclusive of axes) is // 10 pixels from the left edge, just below the title, 15 pixels from the right // edge, and 10 pixels above the legend box. c.packPlotArea(10, title.getHeight, c.getWidth - 15, c.layoutLegend.getTopY - 10) 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.

The biggest plugin in space...

MBS Xojo Chart Plugins

Start Chat