Xojo Conferences

Platforms to show: All Mac Windows Linux Cross-Platform

/ChartDirector/animated bar
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/animated bar
This example is the version from Wed, 13th Dec 2016.
Project "animated bar.rbp"
Class App Inherits Application
Const kEditClear = "&Delete"
Const kFileQuit = "&Quit"
Const kFileQuitShortcut = ""
End Class
MenuBar MenuBar1
MenuItem FileMenu = "&File"
MenuItem FileQuit = "#App.kFileQuit"
MenuItem EditMenu = "&Edit"
MenuItem EditUndo = "&Undo"
MenuItem UntitledMenu1 = "-"
MenuItem EditCut = "Cu&t"
MenuItem EditCopy = "&Copy"
MenuItem EditPaste = "&Paste"
MenuItem EditClear = "#App.kEditClear"
MenuItem UntitledMenu0 = "-"
MenuItem EditSelectAll = "Select &All"
End MenuBar
Class PicWindow Inherits Window
Control Sliders Inherits Slider
ControlInstance Sliders(0) Inherits Slider
ControlInstance Sliders(1) Inherits Slider
ControlInstance Sliders(2) Inherits Slider
ControlInstance Sliders(3) Inherits Slider
ControlInstance Sliders(4) Inherits Slider
ControlInstance Sliders(5) Inherits Slider
ControlInstance Sliders(6) Inherits Slider
EventHandler Sub ValueChanged(index as Integer) redraw End EventHandler
End Control
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
EventHandler Sub Paint(g As Graphics, areas() As REALbasic.Rect) g.DrawPicture pic,0,0 End EventHandler
End Control
Control StaticText1 Inherits Label
ControlInstance StaticText1 Inherits Label
End Control
Control SliderAnimation Inherits Slider
ControlInstance SliderAnimation Inherits Slider
EventHandler Sub ValueChanged() redraw End EventHandler
End Control
Control PushButton1 Inherits PushButton
ControlInstance PushButton1 Inherits PushButton
EventHandler Sub Action() SliderAnimation.Value=0 AnimationTimer.Mode=2 End EventHandler
End Control
Control AnimationTimer Inherits Timer
ControlInstance AnimationTimer Inherits Timer
EventHandler Sub Action() if SliderAnimation.Value=SliderAnimation.Maximum then me.Mode=0 else SliderAnimation.Value=SliderAnimation.Value+5 end if End EventHandler
End Control
Control PushButton2 Inherits PushButton
ControlInstance PushButton2 Inherits PushButton
EventHandler Sub Action() #if RBVersion >= 2014 then MsgBox "This part of the example uses QuickTime functions which are no longer available in Xojo." // could be rewritten for Mac using AVFoundation plugin #else dim f as FolderItem f=GetSaveFolderItem(MyFileTypes.Quicktime,"test.mov") if f=nil then Return dim e as EditableMovie=f.CreateMovie dim q as QTVideoTrack q=e.NewVideoTrack(Canvas1.Width, Canvas1.Height, 25) if not q.SelectCompressionSettings(pic) then Return end if SliderAnimation.Value=0 dim c as integer=SliderAnimation.Maximum for i as integer=0 to c step 2 SliderAnimation.Value=i UpdateNow q.AppendPicture pic next q=nil e=nil f.Launch #endif End EventHandler
End Control
Control CheckBox1 Inherits CheckBox
ControlInstance CheckBox1 Inherits CheckBox
EventHandler Sub Action() redraw End EventHandler
End Control
EventHandler Sub Open() render End EventHandler
Protected Sub redraw() render Canvas1.Graphics.DrawPicture pic,0,0 End Sub
Protected Sub render() // The data for the bar chart dim data(-1) as double dim colors(-1) as integer dim x,sum,maxValue,d as Double // get values for i as integer=0 to 6 d=Sliders(i).Value/10.0 data.append d next if CheckBox1.Value then // calc sum for i as integer=0 to 6 sum=sum+data(i) next if sum>100.0 then for i as integer=0 to 6 data(i)=data(i)*100.0/sum next end if end if // find max value for i as integer=0 to 6 if data(i)>maxValue then maxValue=data(i) end if next // limit to the current slider animation x=maxValue*SliderAnimation.Value/1000.0 for i as integer=0 to 6 if data(i)>x then data(i)=x end if next colors.Append CDXYChartMBS.RGB(213, 34, 70) colors.Append CDXYChartMBS.RGB(73, 101, 198) colors.Append CDXYChartMBS.RGB(71, 70, 129) colors.Append CDXYChartMBS.RGB(69, 163, 69) colors.Append CDXYChartMBS.RGB(250, 222, 74) colors.Append CDXYChartMBS.RGB(101, 56, 154) colors.Append CDXYChartMBS.RGB(105, 105, 105) // The labels for the bar chart, here German voting results from 2005 dim labels(-1) as string = array("SPD", "CDU", "CSU", "Grüne", "FDP","Linke","andere") // Create a XYChart object of size 540 x 375 pixels dim c as new CDXYChartMBS(Canvas1.Width, Canvas1.height) // Add a title to the chart using 18 pts Times Bold Italic font call c.addTitle("Votes on German election 2005", "timesbi.ttf", 18) // Set the plotarea at (50, 55) and of 440 x 280 pixels in size. Use a vertical // gradient color from light blue (f9f9ff) to blue (6666ff) as background. Set // border and grid lines to white (ffffff). call c.setPlotArea(50, 55, Canvas1.Width-80, Canvas1.height-80, c.linearGradientColor(0, 55+240-240*SliderAnimation.Value/1000.0, 0, 55+280, &hf9f9ff, &h6666ff), -1, &hffffff, &hffffff) // Set the x axis labels call c.xAxis.setLabels labels // Draw the ticks between label positions (instead of at label positions) c.xAxis.setTickOffset(0.5) // Set axis label style to 8pts Arial Bold call c.xAxis.setLabelStyle("arialbd.ttf", 10) call c.yAxis.setLabelStyle("arialbd.ttf", 10) // Set axis line width to 2 pixels c.xAxis.setWidth(2) c.yAxis.setWidth(2) c.yAxis.setLinearScale 0, maxValue+5 // Add axis title call c.yAxis.setTitle("Percent","arialbd.ttf", 10) // Add a multi-bar layer with 3 data sets dim layer as CDBarLayerMBS layer=c.addBarLayer(data,colors) // Set bar border to transparent. Use glass lighting effect with light direction // from left. layer.setBorderColor(c.kTransparent, c.glassEffect(c.kNormalGlare,c.kLeft)) // Configure the bars within a group to touch each others (no gap) layer.setBarGap(0.2, c.kTouchBar) if SliderAnimation.Value=1000 then layer.setDataLabelFormat("{value}%") call layer.setDataLabelStyle "arialbd.ttf", 10 end if // output the chart pic=c.makeChartPicture End Sub
Property Protected pic As picture
End Class
Filetype video/quicktime
End MyFileTypes
End Project

See also:

Feedback, Comments & Corrections

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

MBS FileMaker Plugins