Platforms to show: All Mac Windows Linux Cross-Platform
/ChartDirector/animated bar Web
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 Web
This example is the version from Sun, 5th Nov 2022.
Project "animated bar Web.xojo_binary_project"
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 Pressed()
SliderAnimation.Value=0
AnimationTimer.RunMode = WebTimer.RunModes.Multiple
End EventHandler
End Control
Control CheckBox1 Inherits WebCheckBox
ControlInstance CheckBox1 Inherits WebCheckBox
EventHandler Sub ValueChanged()
redraw
End EventHandler
End Control
Control ImageView1 Inherits WebImageViewer
ControlInstance ImageView1 Inherits WebImageViewer
End Control
Control SliderAnimation Inherits WebSlider
ControlInstance SliderAnimation Inherits WebSlider
EventHandler Sub ValueChanged()
redraw
End EventHandler
End Control
Control AnimationTimer Inherits WebTimer
ControlInstance AnimationTimer Inherits WebTimer
EventHandler Sub Run()
If SliderAnimation.Value = SliderAnimation.MaximumValue Then
Me.RunMode = WebTimer.RunModes.Off
else
SliderAnimation.Value = SliderAnimation.Value + 50
redraw
End If
End EventHandler
End Control
EventHandler Sub Opening()
// 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
Sign
End Sign
End Project
See also:
The items on this page are in the following plugins: MBS ChartDirector Plugin.
