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/quadview
This example is the version from Tue, 12th Dec 2016.
Project "quadview.xojo_binary_project"
Class App Inherits Application
Const kEditClear = "&Löschen"
Const kFileQuit = "Beenden"
Const kFileQuitShortcut = ""
End Class
Class Window1 Inherits Window
Control Canvas1 Inherits Canvas
ControlInstance Canvas1 Inherits Canvas
EventHandler Sub Open()
// fix some properties if set wrong in IDE
me.DoubleBuffer = false
me.EraseBackground = false
#if RBVersion >= 2013.0 then
me.Transparent = False
#endif
End EventHandler
End Control
Control Canvas2 Inherits Canvas
ControlInstance Canvas2 Inherits Canvas
EventHandler Sub Open()
// fix some properties if set wrong in IDE
me.DoubleBuffer = false
me.EraseBackground = false
#if RBVersion >= 2013.0 then
me.Transparent = False
#endif
End EventHandler
End Control
Control Canvas3 Inherits Canvas
ControlInstance Canvas3 Inherits Canvas
EventHandler Sub Open()
// fix some properties if set wrong in IDE
me.DoubleBuffer = false
me.EraseBackground = false
#if RBVersion >= 2013.0 then
me.Transparent = False
#endif
End EventHandler
End Control
Control Canvas4 Inherits Canvas
ControlInstance Canvas4 Inherits Canvas
EventHandler Sub Open()
// fix some properties if set wrong in IDE
me.DoubleBuffer = false
me.EraseBackground = false
#if RBVersion >= 2013.0 then
me.Transparent = False
#endif
End EventHandler
End Control
Control Slider1 Inherits Slider
ControlInstance Slider1 Inherits Slider
EventHandler Sub ValueChanged()
render
End EventHandler
End Control
Control Slider2 Inherits Slider
ControlInstance Slider2 Inherits Slider
EventHandler Sub ValueChanged()
render
End EventHandler
End Control
Control Slider3 Inherits Slider
ControlInstance Slider3 Inherits Slider
EventHandler Sub ValueChanged()
render
End EventHandler
End Control
Control Slider4 Inherits Slider
ControlInstance Slider4 Inherits Slider
EventHandler Sub ValueChanged()
render
End EventHandler
End Control
Control EditField1 Inherits TextField
ControlInstance EditField1 Inherits TextField
EventHandler Sub TextChange()
render
End EventHandler
End Control
Control EditField2 Inherits TextField
ControlInstance EditField2 Inherits TextField
EventHandler Sub TextChange()
render
End EventHandler
End Control
Control EditField3 Inherits TextField
ControlInstance EditField3 Inherits TextField
EventHandler Sub TextChange()
render
End EventHandler
End Control
Control EditField4 Inherits TextField
ControlInstance EditField4 Inherits TextField
EventHandler Sub TextChange()
render
End EventHandler
End Control
EventHandler Sub Open()
render
End EventHandler
Function FindFile(name as string) As FolderItem
// Look for file in parent folders from executable on
dim parent as FolderItem = app.ExecutableFile.Parent
while parent<>Nil
dim file as FolderItem = parent.Child(name)
if file<>Nil and file.Exists then
Return file
end if
parent = parent.Parent
wend
End Function
Sub render()
// The data for the pyramid chart
dim data(-1) as double = array(1.0*slider1.Value, 1.0*slider2.Value, 1.0*Slider3.Value, 1.0*Slider4.Value)
// The labels for the pyramid chart
dim labels(-1) as string = array(EditField1.text, EditField2.text, EditField3.text, EditField4.text)
render1 data, labels
render2 data, labels
render3 data, labels
render4 data, labels
End Sub
Sub render1(data() as double, labels() as string)
// The semi-transparent colors for the pyramid layers
dim colors(-1) as integer
colors.Append &h60000088
colors.Append &h6066aaee
colors.Append &h60ffbb00
colors.Append &h60ee6622
// Create a PyramidChart object of size 480 x 400 pixels
dim c as new CDPyramidChartMBS(400, 300)
// Set the cone center at (280, 180), and width x height to 150 x 300 pixels
c.setConeSize(200, 130, 120, 230)
// Set the elevation to 15 degrees
c.setViewAngle(15)
// Set the pyramid data and labels
c.setData(data, labels)
// Set the layer colors to the given colors
c.setColors(c.kDataColor, colors)
// Leave 1% gaps between layers
c.setLayerGap(0.01)
// Add labels at the left side of the pyramid layers using Arial Bold font. The
// labels will have 3 lines showing the layer name, value and percentage.
call c.setLeftLabel("{label}"+EndOfLine.unix+"US ${value}K"+EndOfLine.unix+"({percent}%)", "arialbd.ttf")
// Output the chart
canvas1.Backdrop=c.makeChartPicture
End Sub
Sub render2(data() as double, labels() as string)
// The colors for the pyramid layers
dim colors(-1) as integer
colors.Append &h66aaee
colors.Append &heebb22
colors.Append &hcccccc
colors.Append &hcc88ff
// Create a PyramidChart object of size 500 x 400 pixels
dim c as new CDPyramidChartMBS(400, 300)
// Set the funnel center at (200, 210), and width x height to 150 x 300 pixels
c.setFunnelSize(200, 150, 130, 250)
// Set the elevation to 5 degrees
c.setViewAngle(5)
// Set the pyramid data and labels
c.setData(data, labels)
// Set the layer colors to the given colors
c.setColors(CDPyramidChartMBS.kDataColor, colors)
// Leave 1% gaps between layers
c.setLayerGap(0.01)
// Add labels at the right side of the pyramid layers using Arial Bold font. The
// labels will have 3 lines showing the layer name, value and percentage.
call c.setRightLabel("{label}"+EndOfLine.unix+"US ${value}K"+EndOfLine.unix+"({percent}%)", "arialbd.ttf")
// Output the chart
canvas2.Backdrop=c.makeChartPicture
End Sub
Sub render3(data() as double, labels() as string)
// The colors for the pyramid layers
dim colors(-1) as integer
colors.Append &h66aaee
colors.Append &heebb22
colors.Append &hcccccc
colors.Append &hcc88ff
// Create a PyramidChart object of size 500 x 400 pixels
dim c as new CDPyramidChartMBS(400, 300)
// Set the pyramid center at (200, 180), and width x height to 150 x 300 pixels
c.setPyramidSize(200, 130, 120, 230)
// Set the elevation to 15 degrees
c.setViewAngle(15)
// Set the pyramid data and labels
c.setData(data, labels)
// Set the layer colors to the given colors
c.setColors(CDPyramidChartMBS.kDataColor, colors)
// Leave 1% gaps between layers
c.setLayerGap(0.01)
// Add labels at the center of the pyramid layers using Arial Bold font. The
// labels will show the percentage of the layers.
call c.setCenterLabel("{percent}%", "arialbd.ttf")
// Add labels at the right side of the pyramid layers using Arial Bold font. The
// labels will have two lines showing the layer name and value.
call c.setRightLabel("{label}"+EndOfLine.Unix+"US$ {value}M", "arialbd.ttf")
// Output the chart
canvas3.Backdrop=c.makeChartPicture
End Sub
Sub render4(data() as double, labels() as string)
// The icons for the sectors
dim texture(-1) as FolderItem
texture.append FindFile("marble3.png")
texture.append FindFile("wood.png")
texture.append FindFile("marble2.png")
texture.append FindFile("rock.png")
// Create a PieChart object of size 400 x 330 pixels, with a metallic green
// (88EE88) background, black border and 1 pixel 3D border effect
dim c as new CDPieChartMBS(400, 300, CDPieChartMBS.metalColor(&h88ee88), &h000000, 1)
// Set donut center at (200, 160), and outer/inner radii as 120/60 pixels
c.setDonutSize(200, 150, 120, 60)
// Add a title box using 15 pts Times Bold Italic font and metallic deep green
// (008000) background color
dim t as CDTextBoxMBS
t=c.addTitle("Material Composition", "timesbi.ttf", 15)
t.setBackground(c.metalColor(&h008000))
// Set the pie data and the pie labels
c.setData(data,labels)
// Set the colors of the sectors to the 3 texture patterns
c.setColor(c.kDataColor + 0, c.patternColor(texture(0)))
c.setColor(c.kDataColor + 1, c.patternColor(texture(1)))
c.setColor(c.kDataColor + 2, c.patternColor(texture(2)))
c.setColor(c.kDataColor + 3, c.patternColor(texture(3)))
// Draw the pie in 3D with a 3D depth of 30 pixels
c.set3D(30)
// Use 12 pts Arial Bold Italic as the sector label font
call c.setLabelStyle("arialbi.ttf", 12)
canvas4.Backdrop=c.MakeChartPicture
End Sub
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.