Platforms to show: All Mac Windows Linux Cross-Platform
/ChartDirector/circularbarmeter
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/circularbarmeter
This example is the version from Fri, 9th Feb 2023.
Project "circularbarmeter.xojo_binary_project"
Class App Inherits Application
Const kEditClear = "&Delete"
Const kFileQuit = "&Quit"
Const kFileQuitShortcut = ""
EventHandler Sub Open()
For i As Integer = 0 To 7
CreateChart i
Next
End EventHandler
Sub CreateChart(chartIndex as integer)
// The value to display on the meter
Const value = 77
// The meter radius and angle
Const radius = 50
Dim angle As Double = value * 360.0 / 100.0
// Create an AngularMeter with transparent background
Dim m As New CDAngularMeterMBS(radius * 2 + 10, radius * 2 + 10, CDBaseChartMBS.kTransparent)
// Set the center, radius and angular range of the meter
m.setMeter(m.getWidth / 2, m.getHeight / 2, radius, 0, 360)
// For circular bar meters, we do not need pointer or graduation, so we hide them.
m.setMeterColors(CDBaseChartMBS.kTransparent, CDBaseChartMBS.kTransparent, CDBaseChartMBS.kTransparent)
m.setCap(0, CDBaseChartMBS.kTransparent)
//
// This example demonstrates several coloring styles
//
// Thd default fill and blank colors
Dim FillColor As Integer = &h6699ff
Dim blankColor As Integer = &heeeeee
If (chartIndex >= 4) Then
// Use dark background style
m.setColors(CDBaseChartMBS.whiteOnBlackPalette)
blankColor = &h222222
End If
If (chartIndex Mod 4 = 1) Then
// Alternative fill color
FillColor = &hff6600
Elseif (chartIndex Mod 4 = 2) Then
// Use a smooth color scale as the fill color
Dim smoothColorScale() As Integer = Array(0, &h0022ff, 15, &h0088ff, 30, &h00ff00, 55, &hffff00, 80, &hff0000, 100, &hff0000)
FillColor = m.getDrawArea.angleGradientColor(m.getWidth / 2, m.getHeight / 2, 0, 360, radius, radius - 20, smoothColorScale)
Elseif (chartIndex Mod 4 = 3) Then
// Use a step color scale as the fill color
Dim stepColorScale() As Integer = Array(0, &h0044ff, 20, &h00ee00, 50, &heeee00, 70, &hee0000, 100)
FillColor = m.getDrawArea.angleGradientColor(m.getWidth / 2, m.getHeight / 2, 0, 360, radius, radius - 20, stepColorScale)
end if
// Draw the blank part of the circular bar
If (angle < 360) Then
m.addRingSector(radius, radius - 20, angle, 360, blankColor)
end if
// Draw the fill part of the circular bar
If (angle > 0) Then
m.addRingSector(radius, radius - 20, 0, angle, FillColor)
end if
// Add a label at the center to display the value
Call m.addText(m.getWidth / 2, m.getHeight / 2, m.formatValue(value, "{value}"), "Arial", 25, CDBaseChartMBS.kTextColor, CDBaseChartMBS.kCenter).setMargin(0)
// 2x for higher DPI displays
m.setOutputOptions("bmpscale=2")
'Dim pic As Picture = m.makeChartPicture
// use PNG to pass alpha
Dim pngData As String = m.makeChart(m.kPNG)
Dim pic As Picture = Picture.FromData(pngData)
Dim w As New MainWindow
w.pic = pic
w.top = 50
w.Width = pic.Width / 2
w.Height = pic.Height / 2
w.Left = 10 + 110 * chartIndex
w.show
End Sub
End Class
Class MainWindow Inherits Window
EventHandler Sub Paint(g As Graphics, areas() As REALbasic.Rect)
If pic <> Nil Then
// scale to window
g.DrawPicture pic, 0, 0, g.Width, g.Height, 0, 0, pic.Width, pic.Height
End If
End EventHandler
Property pic As Picture
End Class
MenuBar MainMenuBar
MenuItem FileMenu = "&File"
MenuItem FileQuit = "#App.kFileQuit"
MenuItem EditMenu = "&Edit"
MenuItem EditUndo = "&Undo"
MenuItem EditSeparator1 = "-"
MenuItem EditCut = "Cu&t"
MenuItem EditCopy = "&Copy"
MenuItem EditPaste = "&Paste"
MenuItem EditClear = "#App.kEditClear"
MenuItem EditSeparator2 = "-"
MenuItem EditSelectAll = "Select &All"
End MenuBar
End Project
The items on this page are in the following plugins: MBS ChartDirector Plugin.