Example: /ChartDirector/dualhbar

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


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

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

Project "dualhbar.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 age groups dim labels(-1) as string = array("0 - 4", "5 - 9", "10 - 14", "15 - 19", "20 - 24", "24 - 29", "30 - 34", "35 - 39", "40 - 44", "44 - 49", "50 - 54", "55 - 59", "60 - 64", "65 - 69", "70 - 74", "75 - 79", "80+") // The male population (in thousands) dim male(-1) as double = array(215, 238, 225, 236, 235, 260, 286, 340, 363, 305, 259, 164, 135, 127, 102, 68, 66.0) // The female population (in thousands) dim female(-1) as double = array(194, 203, 201, 220, 228, 271, 339, 401, 384, 304, 236, 137, 116, 122, 112, 85, 110.0) //============================================================= // Draw the right bar chart //============================================================= // Create a XYChart object of size 320 x 300 pixels dim c as new CDXYChartMBS(320, 300) // Set the plotarea at (50, 0) and of size 250 x 255 pixels. Use pink (0xffdddd) // as the background. call c.setPlotArea(50, 0, 250, 255, &hffdddd) // Add a custom text label at the top right corner of the right bar chart dim t as CDTextBoxMBS t=c.addText(300, 0, "Female", "timesbi.ttf", 12, &ha07070) t.setAlignment(c.kTopRight) // Add the pink (0xf0c0c0) bar chart layer using the female data dim femaleLayer as CDBarLayerMBS femaleLayer = c.addBarLayer(female, &hf0c0c0) // Swap the axis so that the bars are drawn horizontally c.swapXY(true) // Set the bar to touch each others femaleLayer.setBarGap(c.kTouchBar,c.knovalue) // Set the border style of the bars to 1 pixel 3D border femaleLayer.setBorderColor(-1, 1) // Add a Transparent line layer to the chart using the male data. As it is // Transparent, only the female bar chart can be seen. We need to put both male // and female data in both left and right charts, because we want auto-scaling to // produce the same scale for both chart. call c.addLineLayer(male, c.kTransparent) // Set the y axis label font to Arial Bold call c.yAxis.setLabelStyle("arialbd.ttf") // Set the labels between the two bar charts, which can be considered as the // x-axis labels for the right chart dim tb as CDTextBoxMBS tb = c.xAxis.setLabels(labels) // Use a fix width of 50 for the labels (height = automatic) with center // alignment tb.setSize(50, 0) tb.setAlignment(c.kCenter) // Set the label font to Arial Bold tb.setFontStyle("arialbd.ttf") // Disable ticks on the x-axis by setting the tick length to 0 c.xAxis.setTickLength(0) //============================================================= // Draw the left bar chart //============================================================= // Create a XYChart object of size 280 x 300 pixels with a transparent // background. dim c2 as new CDXYChartMBS(280, 300, c.kTransparent) // Set the plotarea at (20, 0) and of size 250 x 255 pixels. Use pale blue // (0xddddff) as the background. call c2.setPlotArea(20, 0, 250, 255, &hddddff) // Add a custom text label at the top left corner of the left bar chart call c2.addText(20, 0, "Male", "timesbi.ttf", 12, &h7070a0) // Add the pale blue (0xaaaaff) bar chart layer using the male data dim maleLayer as CDBarLayerMBS maleLayer = c2.addBarLayer(male, &haaaaff) // Swap the axis so that the bars are drawn horizontally c2.swapXY(true) // Reverse the direction of the y-axis so it runs from right to left c2.yAxis.setReverse // Set the bar to touch each others maleLayer.setBarGap(c.kTouchBar,c.knovalue) // Set the border style of the bars to 1 pixel 3D border maleLayer.setBorderColor(-1, 1) // Add a Transparent line layer to the chart using the female data. As it is // Transparent, only the male bar chart can be seen. We need to put both male and // female data in both left and right charts, because we want auto-scaling to // produce the same scale for both chart. call c2.addLineLayer(female,c.kTransparent) // Set the y axis label font to Arial Bold call c2.yAxis.setLabelStyle("arialbd.ttf") //============================================================= // Use a MultiChart to contain both bar charts //============================================================= // Create a MultiChart object of size 590 x 320 pixels. dim m as new CDMultiChartMBS(590, 320) // Add a title to the chart using Arial Bold Italic font call m.addTitle("Demographics Hong Kong Year 2002", "arialbi.ttf") // Add another title at the bottom using Arial Bold Italic font call m.addTitle(c.kBottom, "Population (in thousands)", "arialbi.ttf", 10) // Put the right chatr at (270, 25) m.addChart(270, 25, c) // Put the left char at (0, 25) m.addChart(0, 25, c2) // Output the chart Backdrop=m.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