Xojo Developer Conference
25/27th April 2018 in Denver.
MBS Xojo Conference
6/7th September 2018 in Munich, Germany.

Platforms to show: All Mac Windows Linux Cross-Platform

/ChartDirector/animated bar Web
Function:
You find this example project in your Plugins Download as a Xojo project file within the examples folder: /ChartDirector/animated bar Web
This example is the version from Sun, 17th Mar 2012.
Project "animated bar Web.rbp"
Class App Inherits WebApplication
End Class
Class Session Inherits WebSession
End Class
Class WebPage1 Inherits WebPage
Control Slider1 Inherits WebSlider
ControlInstance Slider1 Inherits WebSlider
EventHandler Sub ValueChanged() redraw End EventHandler
End Control
Control Slider2 Inherits WebSlider
ControlInstance Slider2 Inherits WebSlider
EventHandler Sub ValueChanged() redraw End EventHandler
End Control
Control Slider3 Inherits WebSlider
ControlInstance Slider3 Inherits WebSlider
EventHandler Sub ValueChanged() redraw End EventHandler
End Control
Control Slider4 Inherits WebSlider
ControlInstance Slider4 Inherits WebSlider
EventHandler Sub ValueChanged() redraw End EventHandler
End Control
Control Slider5 Inherits WebSlider
ControlInstance Slider5 Inherits WebSlider
EventHandler Sub ValueChanged() redraw End EventHandler
End Control
Control Slider6 Inherits WebSlider
ControlInstance Slider6 Inherits WebSlider
EventHandler Sub ValueChanged() redraw End EventHandler
End Control
Control Slider7 Inherits WebSlider
ControlInstance Slider7 Inherits WebSlider
EventHandler Sub ValueChanged() redraw End EventHandler
End Control
Control Label1 Inherits WebLabel
ControlInstance Label1 Inherits WebLabel
End Control
Control Button1 Inherits WebButton
ControlInstance Button1 Inherits WebButton
EventHandler Sub Action() SliderAnimation.Value=0 AnimationTimer.Mode=2 End EventHandler
End Control
Control CheckBox1 Inherits WebCheckBox
ControlInstance CheckBox1 Inherits WebCheckBox
EventHandler Sub ValueChanged() redraw End EventHandler
End Control
Control AnimationTimer Inherits WebTimer
ControlInstance AnimationTimer Inherits WebTimer
EventHandler Sub Action() if SliderAnimation.Value=SliderAnimation.Maximum then me.Mode=0 else SliderAnimation.Value=SliderAnimation.Value+50 end if End EventHandler
End Control
Control ImageView1 Inherits WebImageView
ControlInstance ImageView1 Inherits WebImageView
End Control
Control SliderAnimation Inherits WebSlider
ControlInstance SliderAnimation Inherits WebSlider
EventHandler Sub ValueChanged() redraw End EventHandler
End Control
EventHandler Sub Open() // no control arrays yet, so we do our own Sliders.Append Slider1 Sliders.Append Slider2 Sliders.Append Slider3 Sliders.Append Slider4 Sliders.Append Slider5 Sliders.Append Slider6 Sliders.Append Slider7 redraw End EventHandler
Protected Sub redraw() render ImageView1.Picture = pic 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(ImageView1.Width, ImageView1.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, ImageView1.Width-80, ImageView1.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 Sliders() As WebSlider
Property Protected pic As picture
End Class
End Project

See also:

Feedback, Comments & Corrections

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




Links
MBS FileMaker tutorial videos