B4A Library XCL Charts - 13 Feb 2016 : 3D Horizontal Bar Charts in Post #7

Busy wrapping this project. It offers some unique graphs / charts. Will post the 3D bar chart sometime before the end of this coming weekend. It will allow for a 3D chart consisting of a series of 5 graphs. You can also pinch zoom the graph and pan/scroll/drag the graph to the left and right. It also incorporates a "tooltip" that will display the value of a bar when the bar is touched. Some sample snapshots:

1.png


2.png

3.png


4.png



5.png


Graph Pinch Zoomed
6.png


A Dial Chart
7.png
 
Last edited:

Johan Schoeman

Expert
Licensed User
Longtime User
The attached library wraps some of the functionality of the 3D Barcode class of XCL Charts. Posting the following:

1.B4A project that demonstrates the 3D Barcode (you can add a maximum of 5 bars per X-axis category)
2. The B4A library files (2 x Jar and 1 x XML - copy them to your additional library folder)

I am using xcl-charts.jar to create the wrapper from and thus cannot change the original source code. If there are features that you might require I will try and accommodate them within the scope of xcl-charts.jar

1.png


Sample Code:

B4X:
#Region  Project Attributes
    #ApplicationLabel: BarChart3D01
    #VersionCode: 1
    #VersionName:
    'SupportedOrientations possible values: unspecified, landscape or portrait.
    #SupportedOrientations: landscape
    #CanInstallToExternalStorage: False
#End Region

#Region  Activity Attributes
    #FullScreen: False
    #IncludeTitle: True
#End Region

Sub Process_Globals
    'These global variables will be declared once when the application starts.
    'These variables can be accessed from all modules.
  
End Sub

Sub Globals
    'These global variables will be redeclared each time the activity is created.
    'These variables can only be accessed from this module.

    Private bc3d1 As BarChart3D01

End Sub

Sub Activity_Create(FirstTime As Boolean)
    'Do not forget to load the layout file created with the visual designer. For example:
    Activity.LoadLayout("main")
  
    bc3d1.ChartBackgroundColor = Colors.Black
    bc3d1.ChartTitel = "SOME ARBITRARY DATA"
    bc3d1.ChartTitleTextColor = Colors.Blue
    bc3d1.ChartTitelTextSize = 20
    bc3d1.ChartTitlePosition = bc3d1.Chart_Title_Position_Center
  
    bc3d1.XaxisTitle = "Month - 2015"
    bc3d1.XaxisTitleColor = Colors.Yellow
    bc3d1.XaxisTitleTextSize = 15
    bc3d1.Xaxis3DBaseColor = Colors.ARGB(150, 150, 200, 255)
  
    bc3d1.XaxisLabelAngle = -30
    bc3d1.XaxisLabelColor = Colors.Green
    bc3d1.XaxisLabelTextSize = 12
    bc3d1.ShowXaxisLabels = True
  
    bc3d1.YaxisTitle = "Rainfall in mm"
    bc3d1.YaxisTitleColor = Colors.Blue
    bc3d1.YaxisTitleTextSize = 15  
  
    bc3d1.YaxisLabelAngle = -30
    bc3d1.YaxisLabelColor = Colors.Magenta
    bc3d1.YaxisLabelTextSize = 12
  
    bc3d1.YaxisMin = 100
    bc3d1.YaxisMax = 700
    bc3d1.YaxisSteps = 50  
  
    bc3d1.BarAngle = 25
    bc3d1.BarAlpha = 100
    bc3d1.BarValuesVisible = True
    bc3d1.BarValuesColor = Colors.White
    bc3d1.BarValuesTextSize = 9
  
    bc3d1.LegendBoxLineColor = Colors.Red
    bc3d1.LegendLayout = bc3d1.LEGEND_LAYOUT_COLUMN
    bc3d1.LegendHorizontalAlign = bc3d1.HORIZONTAL_ALIGN_RIGHT
    bc3d1.LegendBoxLineStyle = bc3d1.LINE_STYLE_DASH
    bc3d1.LegendBoxLineWidth = 2.0      
    bc3d1.ShowLegendBox = True
    bc3d1.LegendBoxBackgroundColor = Colors.ARGB(0x44, 0xaa, 0, 0)
    bc3d1.ShowLegendBoxBackground = True
    bc3d1.ShowLegendBoxBorder = True
    bc3d1.LegendTextSize = 10
    bc3d1.LegendVerticalAlign = bc3d1.VERTICAL_ALIGN_TOP
    bc3d1.ShowLegend = True
  
    bc3d1.Bar1Data = Array As Double(210, 260, 410, 460, 160, 270)
    bc3d1.Bar1Color = Colors.Cyan
    bc3d1.Bar1LegendText = "Gauteng"
  
    bc3d1.Bar2Data = Array As Double(160, 210, 260, 410, 460, 330)
    bc3d1.Bar2Color = Colors.Blue
    bc3d1.Bar2LegendText = "KwaZulu Natal"
  
    bc3d1.Bar3Data = Array As Double(460, 160, 210, 260, 410, 510)
    bc3d1.Bar3Color = Colors.Red
    bc3d1.Bar3LegendText = "Orange Free State"
  
    bc3d1.Bar4Data = Array As Double(410, 460, 160, 210, 260, 0)
    bc3d1.Bar4Color = Colors.Green
    bc3d1.Bar4LegendText = "Western Cape"  
  
    bc3d1.Bar5Data = Array As Double(260, 410, 460, 160, 210, 155)
    bc3d1.Bar5Color = Colors.Yellow  
    bc3d1.Bar5LegendText = "Mpumalanga"  
  
    bc3d1.XaxisLabels = Array As String("Jan", "Feb", "Mar", "Apr", "May", "Jun")
  
    bc3d1.PlotGridEvenRowBackgroundColor = Colors.ARGB(150, 200, 200, 200)
    bc3d1.PlotGridOddRowBackgroundColor = Colors.ARGB(150, 175, 175, 175)
    bc3d1.PlotGridHorizontalLineColor = Colors.Blue
    bc3d1.PlotGridVerticalLineColor = Colors.Yellow
    bc3d1.PlotGridHorizontalLineStyle = bc3d1.LINE_STYLE_DOT
    bc3d1.PlotGridVerticalLineStyle = bc3d1.LINE_STYLE_DASH

    bc3d1.PlotPanMode = bc3d1.PLOT_PAN_MODE_HORIZONTAL
  
    bc3d1.ToolTipTextColor = Colors.White
    bc3d1.ToolTipBackgroundColor = Colors.Yellow
    bc3d1.ToolTipBorderColor = Colors.Green

    bc3d1.chartRender

End Sub

Sub Activity_Resume
  
End Sub

Sub Activity_Pause (UserClosed As Boolean)
  
End Sub

Library:

xclCharts
Author:
Github: XiongChuanLiang, Wrapped by: Johan Schoeman
Version: 1
  • BarChart3D01
    Fields:
    • Chart_Title_Position_Center As String
    • Chart_Title_Position_Left As String
    • Chart_Title_Position_Right As String
    • HORIZONTAL_ALIGN_CENTER As String
    • HORIZONTAL_ALIGN_LEFT As String
    • HORIZONTAL_ALIGN_RIGHT As String
    • LEGEND_LAYOUT_COLUMN As String
    • LEGEND_LAYOUT_ROW As String
    • LINE_STYLE_DASH As String
    • LINE_STYLE_DOT As String
    • LINE_STYLE_SOLID As String
    • PLOT_PAN_MODE_FREE As String
    • PLOT_PAN_MODE_HORIZONTAL As String
    • PLOT_PAN_MODE_VERTICAL As String
    • VERTICAL_ALIGN_BOTTOM As String
    • VERTICAL_ALIGN_MIDDLE As String
    • VERTICAL_ALIGN_TOP As String
    • ba As BA
      Methods:
    • BringToFront
    • DesignerCreateView (base As PanelWrapper, lw As LabelWrapper, props As Map)
    • Initialize (EventName As String)
    • Invalidate
    • Invalidate2 (arg0 As Rect)
    • Invalidate3 (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int)
    • IsInitialized As Boolean
    • RemoveView
    • RequestFocus As Boolean
    • SendToBack
    • SetBackgroundImage (arg0 As Bitmap)
    • SetColorAnimated (arg0 As Int, arg1 As Int, arg2 As Int)
    • SetLayout (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int)
    • SetLayoutAnimated (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int, arg4 As Int)
    • SetVisibleAnimated (arg0 As Int, arg1 As Boolean)
    • chartRender
      Properties:
    • Background As Drawable
    • Bar1Color As Int [write only]
    • Bar1Data() As Double [write only]
    • Bar1LegendText As String [write only]
    • Bar2Color As Int [write only]
    • Bar2Data() As Double [write only]
    • Bar2LegendText As String [write only]
    • Bar3Color As Int [write only]
    • Bar3Data() As Double [write only]
    • Bar3LegendText As String [write only]
    • Bar4Color As Int [write only]
    • Bar4Data() As Double [write only]
    • Bar4LegendText As String [write only]
    • Bar5Color As Int [write only]
    • Bar5Data() As Double [write only]
    • Bar5LegendText As String [write only]
    • BarAlpha As Int [write only]
    • BarAngle As Int [write only]
    • BarValuesColor As Int [write only]
    • BarValuesTextSize As Int [write only]
    • BarValuesVisible As Boolean [write only]
    • ChartBackgroundColor As Int [write only]
    • ChartTitel As String [write only]
    • ChartTitelTextSize As Int [write only]
    • ChartTitlePosition As String [write only]
    • ChartTitleTextColor As Int [write only]
    • Color As Int [write only]
    • Enabled As Boolean
    • Height As Int
    • Left As Int
    • LegendBoxBackgroundColor As Int [write only]
    • LegendBoxLineColor As Int [write only]
    • LegendBoxLineStyle As String [write only]
    • LegendBoxLineWidth As Float [write only]
    • LegendHorizontalAlign As String [write only]
    • LegendLayout As String [write only]
    • LegendTextSize As Int [write only]
    • LegendVerticalAlign As String [write only]
    • PlotGridEvenRowBackgroundColor As Int [write only]
    • PlotGridHorizontalLineColor As Int [write only]
    • PlotGridHorizontalLineStyle As String [write only]
    • PlotGridOddRowBackgroundColor As Int [write only]
    • PlotGridVerticalLineColor As Int [write only]
    • PlotGridVerticalLineStyle As String [write only]
    • PlotPanMode As String [write only]
    • ShowLegend As Boolean [write only]
    • ShowLegendBox As Boolean [write only]
    • ShowLegendBoxBackground As Boolean [write only]
    • ShowLegendBoxBorder As Boolean [write only]
    • ShowXaxisLabels As Boolean [write only]
    • Tag As Object
    • ToolTipBackgroundColor As Int [write only]
    • ToolTipBorderColor As Int [write only]
    • ToolTipTextColor As Int [write only]
    • Top As Int
    • Visible As Boolean
    • Width As Int
    • Xaxis3DBaseColor As Int [write only]
    • XaxisLabelAngle As Int [write only]
    • XaxisLabelColor As Int [write only]
    • XaxisLabelTextSize As Int [write only]
    • XaxisLabels() As String [write only]
    • XaxisTitle As String [write only]
    • XaxisTitleColor As Int [write only]
    • XaxisTitleTextSize As Int [write only]
    • YaxisLabelAngle As Int [write only]
    • YaxisLabelColor As Int [write only]
    • YaxisLabelTextSize As Int [write only]
    • YaxisMax As Int [write only]
    • YaxisMin As Int [write only]
    • YaxisSteps As Int [write only]
    • YaxisTitle As String [write only]
    • YaxisTitleColor As Int [write only]
    • YaxisTitleTextSize As Int [write only]
 

Attachments

  • b4aLibraryFiles.zip
    321.5 KB · Views: 340
  • b4aBarChart3D01.zip
    8.5 KB · Views: 313
Last edited:

Johan Schoeman

Expert
Licensed User
Longtime User
The attached B4A library files add 3D Horizontal Bar Charts (you can add up to 5 bars to a series). Have also done some minor bug fixes to 3D Vertical Bar Charts. Both Vertical and Horizontal 3D Bar Charts can run from the same B4A project by setting
B4X:
bc3d1.ChartDirection = bc3d1.CHART_DIRECTION_HORIZONTAL
for Horizontal 3D Bar Charts or by setting
B4X:
bc3d1.ChartDirection = bc3d1.CHART_DIRECTION_VERTICAL
for Vertical 3D Bar Charts.

Posting the updated B4A library files as well as the updated B4A project. Copy the library files (2 x JAR and 1 x XML) to your additional library folder.

2.png
 

Attachments

  • b4ALibraryFiles.zip
    322 KB · Views: 196
  • b4aBarChart3D01Horizontal.zip
    8.6 KB · Views: 186
Last edited:

Mahares

Expert
Licensed User
Longtime User
WoW! is this @Johan Schoeman a genious or what? We do not have to be in South Africa to tap into a gold mine.

Attached is a complete project based on Johan's XCL lib and example. But this example alternates between a horizontal and a vertical 3D bar chart by toggling a toggle button between the two from within the same app. You do not have to build 2 separate apps.
Thank you

EDIT: Johan discovered on my project sample that the Yaxisi title did not reverse properly when you are displaying horizontal 3D bar chart. I now, corrected the problem in this revised sample.
 

Attachments

  • XCL_3D_Bar_Charts_Vert_Horiz_021316.zip
    9.8 KB · Views: 199
Last edited:

Luca1967

Active Member
I used this library in one of my projects.
When I click on the button it processes the graph correctly.
But if I repeat again, it appends the data to the previous ones.
Is there any way to clear the chart and process it correctly?
 

Johan Schoeman

Expert
Licensed User
Longtime User
I used this library in one of my projects.
When I click on the button it processes the graph correctly.
But if I repeat again, it appends the data to the previous ones.
Is there any way to clear the chart and process it correctly?
Try with the attached B4A project and B4A library files. Copy the library files to your additional library folder)

B4X:
#Region  Project Attributes
    #ApplicationLabel: BarChart3D01
    #VersionCode: 1
    #VersionName:
    'SupportedOrientations possible values: unspecified, landscape or portrait.
    #SupportedOrientations: landscape
    #CanInstallToExternalStorage: False
#End Region

#Region  Activity Attributes
    #FullScreen: False
    #IncludeTitle: True
#End Region

Sub Process_Globals
    'These global variables will be declared once when the application starts.
    'These variables can be accessed from all modules.
    
    Dim t As Timer
    
End Sub

Sub Globals
    'These global variables will be redeclared each time the activity is created.
    'These variables can only be accessed from this module.

    Private bc3d1 As BarChart3D01
    Dim cnt As Int = 0
    

End Sub

Sub Activity_Create(FirstTime As Boolean)
    'Do not forget to load the layout file created with the visual designer. For example:
    Activity.LoadLayout("main")
    
    t.Initialize("t", 1000)
    
    
    bc3d1.ChartDirection = bc3d1.CHART_DIRECTION_VERTICAL
    bc3d1.ChartBackgroundColor = Colors.Black
    bc3d1.ChartTitle = "SOME ARBITRARY DATA"
    bc3d1.ChartTitleTextColor = Colors.Blue
    bc3d1.ChartTitleTextSize = 20
    bc3d1.ChartTitlePosition = bc3d1.Chart_Title_Position_Right
    
    bc3d1.XaxisTitle = "Month - 2015"
    bc3d1.XaxisTitleColor = Colors.Yellow
    bc3d1.XaxisTitleTextSize = 20
    bc3d1.Xaxis3DBaseColor = Colors.ARGB(150, 150, 200, 255)
    
    bc3d1.XaxisLabelAngle = -30
    bc3d1.XaxisLabelColor = Colors.Green
    bc3d1.XaxisLabelTextSize = 20
    bc3d1.ShowXaxisLabels = True
    
    bc3d1.YaxisTitle = "Rainfall in mm"
    bc3d1.YaxisTitleColor = Colors.Blue
    bc3d1.YaxisTitleTextSize = 20
    
    bc3d1.YaxisLabelAngle = -30
    bc3d1.YaxisLabelColor = Colors.Magenta
    bc3d1.YaxisLabelTextSize = 12
    
    bc3d1.YaxisMin = 0
    bc3d1.YaxisMax = 600
    bc3d1.YaxisSteps = 100   
    
    bc3d1.BarAngle = -25
    bc3d1.BarAlpha = 100
    bc3d1.BarValuesVisible = True
    bc3d1.BarValuesColor = Colors.White
    bc3d1.BarValuesTextSize = 9
    
    bc3d1.LegendBoxLineColor = Colors.Transparent
    bc3d1.LegendLayout = bc3d1.LEGEND_LAYOUT_ROW
    bc3d1.LegendHorizontalAlign = bc3d1.HORIZONTAL_ALIGN_LEFT
    bc3d1.LegendBoxLineStyle = bc3d1.LINE_STYLE_DASH
    bc3d1.LegendBoxLineWidth = 2.0       
    bc3d1.ShowLegendBox = True
    bc3d1.LegendBoxBackgroundColor = Colors.Transparent
    bc3d1.ShowLegendBoxBackground = True 
    bc3d1.ShowLegendBoxBorder = True
    bc3d1.LegendTextSize = 11
    bc3d1.LegendVerticalAlign = bc3d1.VERTICAL_ALIGN_TOP
    bc3d1.ShowLegend = True
    
    bc3d1.Bar1Data = Array As Double(210, 260, 410, 460, 160, 270)
    bc3d1.Bar1Color = Colors.Cyan
    bc3d1.Bar1LegendText = "Gauteng"
    
    bc3d1.Bar2Data = Array As Double(160, 210, 260, 410, 460, 330)
    bc3d1.Bar2Color = Colors.Blue
    bc3d1.Bar2LegendText = "KwaZulu Natal"
    
    bc3d1.Bar3Data = Array As Double(460, 160, 210, 260, 410, 510)
    bc3d1.Bar3Color = Colors.Red
    bc3d1.Bar3LegendText = "Orange Free State"
    
    bc3d1.Bar4Data = Array As Double(410, 460, 160, 210, 260, 0)
    bc3d1.Bar4Color = Colors.Green
    bc3d1.Bar4LegendText = "Western Cape"
    
    bc3d1.Bar5Data = Array As Double(260, 410, 460, 160, 210, 155)
    bc3d1.Bar5Color = Colors.Yellow
    bc3d1.Bar5LegendText = "Mpumalanga"
    
    bc3d1.XaxisLabels = Array As String("Jan", "Feb", "Mar", "Apr", "May", "Jun")
    
    bc3d1.PlotGridEvenRowBackgroundColor = Colors.ARGB(100, 200, 200, 200)
    bc3d1.PlotGridOddRowBackgroundColor = Colors.ARGB(100, 175, 175, 175)
    
    bc3d1.PlotGridHorizontalLineColor = Colors.Blue
    bc3d1.PlotGridHorizontalLineStyle = bc3d1.LINE_STYLE_DOT
    bc3d1.PlotGridHorizontalLineWidth = 0.5
    
    bc3d1.PlotGridVerticalLineColor = Colors.Transparent
    bc3d1.PlotGridVerticalLineStyle = bc3d1.LINE_STYLE_DASH
    bc3d1.PlotGridVerticalLineWidth = 0.5

    bc3d1.PlotPanMode = bc3d1.PLOT_PAN_MODE_HORIZONTAL
    
    bc3d1.ToolTipTextColor = Colors.White
    bc3d1.ToolTipBackgroundColor = Colors.DarkGray
    bc3d1.ToolTipBorderColor = Colors.Black

    bc3d1.chartRender

End Sub

Sub Activity_Resume
    
    t.Enabled = True
    
End Sub

Sub Activity_Pause (UserClosed As Boolean)
    
    t.Enabled = False
    
End Sub

Sub t_tick
    
    cnt = cnt + 1
    If cnt Mod 2 = 0 Then
        bc3d1.XaxisLabels = Array As String("Jan", "Feb", "Mar", "Apr", "May", "Jun")
    Else
        bc3d1.XaxisLabels = Array As String("Jul", "Aug", "Sep", "Oct", "Nov", "Dec")
    End If   
    
    bc3d1.Bar1Data = Array As Double(Rnd(0,500), Rnd(0,500), Rnd(0,500), Rnd(0,500), Rnd(0,500), Rnd(0,500))
    bc3d1.Bar2Data = Array As Double(Rnd(0,500), Rnd(0,500), Rnd(0,500), Rnd(0,500), Rnd(0,500), Rnd(0,500))
    bc3d1.Bar3Data = Array As Double(Rnd(0,500), Rnd(0,500), Rnd(0,500), Rnd(0,500), Rnd(0,500), Rnd(0,500))
    bc3d1.Bar4Data = Array As Double(Rnd(0,500), Rnd(0,500), Rnd(0,500), Rnd(0,500), Rnd(0,500), Rnd(0,500))
    bc3d1.Bar5Data = Array As Double(Rnd(0,500), Rnd(0,500), Rnd(0,500), Rnd(0,500), Rnd(0,500), Rnd(0,500))

    bc3d1.chartRender


    
    
End Sub
 

Attachments

  • b4aLibFiles.zip
    325.7 KB · Views: 44
  • b4aBarChart3D01Horizontal.zip
    8.9 KB · Views: 44
Top