B4J Library [ABMaterial]: Organizational Chart via GoogleCharts

A timeline ago...

I just remembered that I did this before around 2013, wrapping up google charts for a b4a project I was working on then and now I need similar for my other ABMaterial project I'm doing.

So I copied the code over to an ABMaterial class and 90% of it just worked. As the class covered quite a lot of google charts varieties, a few when tested did not budge, a lot has changed anyway. For now I just need the organizational chart and will relook the code as I see some funy borders around the chart itself, otherwise it is as expected..

B4X:
Sub cmdOrgChart_Click
    clsGoogleChart.Initialize(page,"chart")
    clsGoogleChart.Title = "My Organization"
    clsGoogleChart.Width = 400
    clsGoogleChart.Height = 300
   
    ' define the data table structure
    clsGoogleChart.OrgChartReset
    clsGoogleChart.allowHtml = True
    clsGoogleChart.allowCollapse = True
    clsGoogleChart.nodeClass = ""
    clsGoogleChart.selectedNodeClass = ""
    clsGoogleChart.NodeSize = clsGoogleChart.NodeSizeEnum.NodeSmall
    clsGoogleChart.AddPerson("Mashiane & Sikelela", "Parents","", "red", "Y")
    clsGoogleChart.AddPerson("Sponge Bob", "Friend", "Usibabale", "blue", "y")
    clsGoogleChart.AddPerson("Usibabale", "Boy", "Mashiane & Sikelela", "blue", "y")
    clsGoogleChart.AddPerson("Olothando", "Girl", "Mashiane & Sikelela", "orange", "y")
    clsGoogleChart.AddPerson("Esona", "Girl", "Mashiane & Sikelela", "green", "y")
    clsGoogleChart.AddPerson("Hello Kitty", "Show", "Olothando", "opaque", "y")
    clsGoogleChart.AddPerson("Ben 10", "Show", "Esona", "pink", "y")
   
    'clsGoogleChart.Legendposition = clsGoogleChart.LegendPositionEnum.Right
    'clsGoogleChart.BackgroundColor = "white"
    'clsGoogleChart.enableInteractivity = True
    'clsGoogleChart.Animate = True
    clsGoogleChart.SaveToo = True
    'clsGoogleChart.isStacked = True
    clsGoogleChart.ChartType = clsGoogleChart.ChartTypeEnum.OrgChart
    page.Cell(4,1).AddComponent(clsGoogleChart.ABMComp)
End Sub
 

Attachments

  • Chart16.png
    Chart16.png
    13.7 KB · Views: 560
Last edited:

SJQ

Member
Licensed User
Longtime User
I remember seeing this, it's very good.
Quick question though, in the org chart, is it possible to get a return value of the node that was tapped?
 

Anser

Well-Known Member
Licensed User
Longtime User
Hi,

Great work.

Is there any way to make the Google Charts responsive ?. If we change the size of the browser to a small screen or large screen, the Google Chart's size is not changing according to the browser's size.

I tested the frmGoogleCharts.bas, the Google Charts on this page too is not responsive
 

Anser

Well-Known Member
Licensed User
Longtime User
Perhaps check the google charts js from their website and see if that is possible. You can always customize the attached control to your needs.
May be I am asking a very stupid question. In the ABM BuildPage(), I use this line
B4X:
page.AddExtraJavaScriptFile("https://www.google.com/jsapi")
doesn't that mean the Javascript (js) is the most recent one ie online from Google Charts site ?

When I checked Google Chart site, the sample graphs shown there is responsive https://developers.google.com/chart/

Unfortunately, in my application it looks as follows
Google Chart on a regular desktop browser size
GGraph1.png


Google Chart on a small screen browser size
GChart2.png


I am in a vicious circle in the process of getting a chart to be displayed on my page;)
 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
I see what you mean, on the same example page https://developers.google.com/chart/, there is "View Source" link, I selected that to view the source, it shows the Pie however when I resize my browser its not responsive. My example above was based on something done in 2013 in b4a and I just used the same code in b4j for the ABM Component. I will assume a lot has changed from then until now. At the moment sadly due to other commitments I cant look at this further.
 

Anser

Well-Known Member
Licensed User
Longtime User
You could however use the Frappe Chart that AB has created. Thing is I'm not sure about the bottom label rotation. All the best...
Yes. Frappe Chart is really fast to load.

The limitations of Frappe Chart as identified by me so far are the follows.

There is no refresh sub in the wrapper. I do not know how to write one ;)

Another issue with Frappe Chart is that, it is leaving so much space on the left and right margin. On a small screen loosing so much space is not affordable. Could not find a way to specify the margins and padding. So stuck at that point. After digging and spending so much time, just got a clue that the left and right margins are not from the Frappe Chart library but the parent control holding the graph. My knowledge level is zero in HTML and JAVA, so left it there.

On a phone, it looks like the below shown picture
Frappe.jpg


Another limitation is the bottom label rotation, which is a limitation of the original Frappe Chart library itself.

So without the possibility of adjusting the left and right margins, along with the missing feature of bottom label rotation, this doesn't look good on a small device. The x axis labels are cluttered.

To avoid the cluttering of X axis labels, the next option is to use Horizontal Bars. Unfortunately, the original Frappe Chart library does not support Horizontal Bars. Its the original library's limitation as of now.

Regarding Google Chart

I resolved the problem that I mentioned with Google Chart temporarily by calling a container refresh utilizing the ABM 4.25's new feature Page_SizeChanged. Thanks to @alwaysbusy This redraws the graph once again and respects the screen size (responsive ;))
 

Anser

Well-Known Member
Licensed User
Longtime User
Dear Mashiane,

Your MashGoogleChart CLASS proved to be very useful for me.

I understand that, when it comes to displaying a chart on ABMaterial application, as of now, no other CHART solutions (light weight) is available that can show tilted X axis and Horizontal Bars. Thank you for the class. The ABMChart has this capacity, but it is too heavy to load the chart.

Here is the picture of what I am talking about. Tilted X axis
Mash.jpg


This is another one with Horizontal bars
Mash2.jpg


Thank you very much for the class.
 
Top