Xojo Conferences
MBSSep2018MunichDE
XDCMay2019MiamiUSA

Platforms to show: All Mac Windows Linux Cross-Platform

/ChartDirector/quadview
Function:
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 Wed, 13th Dec 2016.
Project "quadview.rbp"
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

Feedback, Comments & Corrections

The items on this page are in the following plugins: MBS ChartDirector Plugin.




Links
MBS Xojo Chart Plugins