B4J Question [ABMaterial] Inserting FrappeChart on a container

Anser

Well-Known Member
Licensed User
Longtime User
Hi,

I am able to display FrappeChart on a page, but not able to display it on a container.

If I add FrappeChart on a Container then the chart is not displayed, instead the following text is displayed in the cell
var _MyContainer-frappechart2;

Am I missing any thing ?

Here is the code used.

B4X:
Dim MyContainer As ABMContainer
MyContainer.Initialize(page, "MyContainer","tabpagewhite")
MyContainer.AddRows(1,True, "").AddCells12(1,"")
MyContainer.AddRows(1,True, "").AddCells12(1,"")
MyContainer.AddRows(1,True,"").AddCellsOS(1,0,0,0,5,5,5,"").AddCellsOS(1,2,2,2,5,5,5,"")
MyContainer.AddRows(1,True,"").AddCellsOS(1,0,0,0,5,5,5,"").AddCellsOS(1,2,2,2,5,5,5,"")
MyContainer.AddRows(1,True, "").AddCells12(1,"")
MyContainer.AddRows(1,True, "").AddCells12(1,"")
MyContainer.AddRows(1,True, "").AddCells12(1,"")

'After adding the necessary rows BuildGrid is called
MyContainer.BuildGrid 'IMPORTANT once you loaded the complete grid AND before you start adding components

FrappeChart2.Initialize(page, "FrappeChart2", "bar", "Sales Chart", 250)
FrappeChart2.FrappeLabels.AddAll(Array As String("Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", "Jan", "Feb", "Mar"))
FrappeChart2.AddDataSet("Invoices", "light-blue", Array As Int(50,80,70,80,100,140,170,60,90,40,60,130), Array As String())

' Adding FrappeChart to a container,  does not display
MyContainer.Cell(6,1).AddComponent(FrappeChart2.ABMComp)

' If added FrappeChart to a page, then it is working.
'page.Cell(5,1).AddComponent(FrappeChart2.ABMComp)

Another question is that, is there any way that I can display the labels on the x-Axis in 90 degree ie the X-Axis labels "Apr May Jun" etc in 90 degree

Another feature FrappeChart lack is the HorizontalBars that is available in ABMChart For eg ABMchart.OptionsBar.HorizontalBars = True

Is this possible in FrappeChart ?
 
Last edited:

alwaysbusy

Expert
Licensed User
Longtime User
I'll have to check the ABMContainer thing (please add it to the feedback app, else it will be forgotten).

Another feature FrappeChart lack is the HorizontalBars that is available in ABMChart For eg ABMchart.OptionsBar.HorizontalBars = True
not currently supported, see the original Frappe chart library: https://github.com/frappe/charts/issues/81
 
Upvote 0

alwaysbusy

Expert
Licensed User
Longtime User
The problem is the dash (-) in the variable name. Javascript does not support this. So you probably can solve it by changing this in the FrappeChart.bas file (untested):

B4X:
Sub ABMComp_Build(InternalPage As ABMPage, internalID As String) As String
   Dim varID As String = internalID.Replace("-", "_") ' NEW
   Return $"<div id="${internalID}"></div>var _${varID};"$ ' CHANGED
End Sub

B4X:
Sub ABMComp_FirstRun(InternalPage As ABMPage, internalID As String)
   Dim varID As String = internalID.Replace("-", "_")
   ...

B4X:
Sub ABMComp_Refresh(InternalPage As ABMPage, internalID As String)
   Dim varID As String = internalID.Replace("-", "_")
   ...

B4X:
Sub ABMComp_CleanUp(InternalPage As ABMPage, internalID As String)
   Dim varID As String = internalID.Replace("-", "_")
   ...

And then replace all _${internalID} (mind the _ in the front!!!) by _${varID}
 
Upvote 0

Anser

Well-Known Member
Licensed User
Longtime User
It looks like the Refresh is not working for the Frappe Chart. Inside the FrappeChart.bas, I see everything inside the ABMComp_Refresh sub is commented

This is the code that I call for refresh, unfortunatley no change is visible
B4X:
' Call for the refresh of the Frappe Chart
FrappeChart1.ABMComp_Refresh(page,"FrappeChart1")

Code found inside FrappeChart.bas
B4X:
Sub ABMComp_Refresh(InternalPage As ABMPage, internalID As String)
    Dim varID As String = internalID.Replace("-", "_")
    ' use these methods to adjust the object
'    ABM.HasClass
'    ABM.AddClass
'    ABM.RemoveClass
'  
'    ABM.AddHTML
'    ABM.InsertHTMLAfter
'    ABM.RemoveHTML
'  
'    ABM.GetProperty
'    ABM.SetProperty
'    ABM.RemoveProperty
'  
'    ABM.GetStyleProperty
'    ABM.SetStyleProperty
'  
'    Do some script stuff like you Do in RunJavaScript
'  
'    Dim script As String = $""$
'    InternalPage.ws.Eval(script, Null)
End Sub
 
Upvote 0

alwaysbusy

Expert
Licensed User
Longtime User
This is the code that I call for refresh, unfortunatley no change is visible
Sounds about right. There is no code in ABMComp_Refresh(). If you want to refresh it, you will have to write the needed javascript code. FrappeCharts.bas is just a 'getting started' example for the whole FrappeChart javascript library.
 
Upvote 0

Anser

Well-Known Member
Licensed User
Longtime User
Yes. I understand your point. Sadly, I am not JAVA developer and not at all familiar with JAVA :)

This Frappe Chart is really lightweight. I see considerable difference in the page loading time between ABMChart and Frappe, and this was already explained by you.

Just one more doubt. Is it advisable to copy the code from the Sub ABMComp_FirstRun() and use it inside the Sub ABMComp_Refresh(). Definitely, there would be some difference, as FirstRun is expected to be executed only once. Seriously I do not know from where to start ;)
 
Upvote 0
Top