B4J Question [ABMaterial] Inserting FrappeChart on a container

Discussion in 'B4J Questions' started by Anser, Mar 21, 2018.

  1. Anser

    Anser Well-Known Member Licensed 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.

    Code:
    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: Mar 21, 2018
  2. alwaysbusy

    alwaysbusy Expert Licensed User

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

    not currently supported, see the original Frappe chart library: https://github.com/frappe/charts/issues/81
     
    Anser likes this.
  3. Anser

    Anser Well-Known Member Licensed User

    I have added this case ie Frappe on ABMContainer it to the feedback app
     
  4. alwaysbusy

    alwaysbusy Expert Licensed 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):

    Code:
    Sub ABMComp_Build(InternalPage As ABMPage, internalID As StringAs String
       
    Dim varID As String = internalID.Replace("-""_"' NEW
       Return $"<div id="${internalID}"></div>var _${varID};"$ ' CHANGED
    End Sub
    Code:
    Sub ABMComp_FirstRun(InternalPage As ABMPage, internalID As String)
       
    Dim varID As String = internalID.Replace("-""_")
       ...
    Code:
    Sub ABMComp_Refresh(InternalPage As ABMPage, internalID As String)
       
    Dim varID As String = internalID.Replace("-""_")
       ...
    Code:
    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}
     
  5. Anser

    Anser Well-Known Member Licensed User

    With the above suggested changes, it is working fine.

    Thank you.
     
    alwaysbusy likes this.
  6. Anser

    Anser Well-Known Member Licensed 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
    Code:
    ' Call for the refresh of the Frappe Chart
    FrappeChart1.ABMComp_Refresh(page,"FrappeChart1")
    Code found inside FrappeChart.bas
    Code:
    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
     
  7. alwaysbusy

    alwaysbusy Expert Licensed User

    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.
     
  8. Anser

    Anser Well-Known Member Licensed 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 ;)
     
  9. alwaysbusy

    alwaysbusy Expert Licensed User

    I'll have a look at it after I got version 4.25 out. It is taking up much more time than I like to get this version ready, especially with the whole B4JS thing. :oops:
     
    Anser likes this.
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice