B4J Library [ABMaterial]: Additional Frappe Chart Things

Discussion in 'B4J Libraries & Classes' started by Mashiane, Jun 19, 2018.

  1. Mashiane

    Mashiane Expert Licensed User

    Ola

    I wanted a way to have legends shown on my Frappe Charts, especially the line and bar charts and after being referred to the source code, and the need for this lightweight charting component on my app, decided to code it.

    The approach used is the same with the MorrisChart discussed as I also wanted to add records from ExecuteMaps easily to my chart.

    The customizations made though are just for meeting my needs so things like click event, ranges etc are not implemented.

    On BuildPage

    Code:
    page.AddExtraJavaScriptFile("custom/frappe-charts.min.iife.js")
        
    page.AddExtraJavaScriptFile("custom/frappe-charts.min.iife.js.map")
    The additional properties are:

    1. Bar + Line chart combination

    MFC_BarLine.png

    2. Hiding of dots on line chart

    MFC_HideDots.png
    3. Increasing of dotSize on line chart

    MFC_DotSize.png

    4. Values on bars / lines

    MFC_ValuesOnBar.png

    The example source code...

    Code:
    Dim mfc As MashFrappeChart
        mfc.Initialize(
    page,"mfc","1. Bar"200)
        mfc.ChartType = mfc.EnumFrappeChartType.Bar
        mfc.SetXAxis(
    "x",0)
        mfc.AddSeries(
    "a","Some data",mfc.EnumColor.red)
        
    'add data
        mfc.AddXY("Sun",18).AddXY("Mon",40).AddXY("Tue",30)
        mfc.AddXY(
    "Wed",35).AddXY("Thu",8).AddXY("Fri",52)
        mfc.AddXY(
    "Sat",17).AddXY("Sun",-4)
        mfc.ZDepth = ABM.ZDEPTH_1
        
    page.cell(3,1).AddComponent(mfc.ABMComp)
      
        
    Dim mfc1 As MashFrappeChart
        mfc1.Initialize(
    page,"mfc1","2. Line"200)
        mfc1.ChartType = mfc1.EnumFrappeChartType.Line
        mfc1.SetXAxis(
    "x",0)
        mfc1.AddSeries(
    "a","Some data",mfc1.EnumColor.red)
        
    'add data
        mfc1.AddXY("Sun",18).AddXY("Mon",40).AddXY("Tue",30)
        mfc1.AddXY(
    "Wed",35).AddXY("Thu",8).AddXY("Fri",52)
        mfc1.AddXY(
    "Sat",17).AddXY("Sun",-4)
        mfc1.ZDepth = ABM.ZDEPTH_1
        
    page.cell(3,2).AddComponent(mfc1.ABMComp)
      
      
        
    'more data sets
        Dim mfc2 As MashFrappeChart
        mfc2.Initialize(
    page,"mfc2","3. Line Multiple"200)
        mfc2.ChartType = mfc2.EnumFrappeChartType.Line
        mfc2.SetXAxis(
    "x",0)
        mfc2.AddSeries(
    "a","DS 1",mfc2.EnumColor.amber)
        mfc2.AddSeries(
    "b","DS 2",mfc2.EnumColor.blue)
        
    'add data
        mfc2.AddXY2("Sun",18,30).AddXY2("Mon",40,50).AddXY2("Tue",30,-10)
        mfc2.AddXY2(
    "Wed",35,15).AddXY2("Thu",8,18).AddXY2("Fri",52,32)
        mfc2.AddXY2(
    "Sat",17,27).AddXY2("Sun",-4,14
        mfc2.ZDepth = ABM.ZDEPTH_1
        
    'change the dot size
        mfc2.lineOptionsdotSize = 8
        
    page.cell(3,1).AddComponent(mfc2.ABMComp)
      
        
    Dim mfc3 As MashFrappeChart
        mfc3.Initialize(
    page,"mfc3","4. Bar - Values on Points"200)
        mfc3.ChartType = mfc2.EnumFrappeChartType.bar
        mfc3.SetXAxis(
    "x",0)
        mfc3.AddSeries(
    "a","DS 1",mfc3.EnumColor.amber)
        mfc3.AddSeries(
    "b","DS 2",mfc3.EnumColor.blue)
        
    'add data
        mfc3.AddXY2("Sun",18,30).AddXY2("Mon",40,50).AddXY2("Tue",30,-10)
        mfc3.AddXY2(
    "Wed",35,15).AddXY2("Thu",8,18).AddXY2("Fri",52,32)
        mfc3.AddXY2(
    "Sat",17,27).AddXY2("Sun",-4,14
        mfc3.ZDepth = ABM.ZDEPTH_1
        mfc3.valuesOverPoints = 
    True
        
    page.cell(3,2).AddComponent(mfc3.ABMComp)
      
        
    Dim mfc4 As MashFrappeChart
        mfc4.Initialize(
    page,"mfc4","5. Area"200)
        mfc4.ChartType = mfc4.EnumFrappeChartType.area
        mfc4.SetXAxis(
    "x",0)
        mfc4.AddSeries(
    "a","DS 1",mfc4.EnumColor.brown)
        mfc4.AddSeries(
    "b","DS 2",mfc4.EnumColor.green)
        
    'add data
        mfc4.AddXY2("Sun",18,30).AddXY2("Mon",40,50).AddXY2("Tue",30,-10)
        mfc4.AddXY2(
    "Wed",35,15).AddXY2("Thu",8,18).AddXY2("Fri",52,32)
        mfc4.AddXY2(
    "Sat",17,27).AddXY2("Sun",-4,14)
        mfc4.ZDepth = ABM.ZDEPTH_1
        mfc4.lineOptionsheatline = 
    True
        
    page.cell(3,1).AddComponent(mfc4.ABMComp)
      
        
    Dim mfc5 As MashFrappeChart
        mfc5.Initialize(
    page,"mfc5","6. Line - Hide Line"200)
        mfc5.ChartType = mfc5.EnumFrappeChartType.line
        mfc5.SetXAxis(
    "x",0)
        mfc5.AddSeries(
    "a","DS 1",mfc5.EnumColor.brown)
        mfc5.AddSeries(
    "b","DS 2",mfc5.EnumColor.green)
        
    'add data
        mfc5.AddXY2("Sun",18,30).AddXY2("Mon",40,50).AddXY2("Tue",30,-10)
        mfc5.AddXY2(
    "Wed",35,15).AddXY2("Thu",8,18).AddXY2("Fri",52,32)
        mfc5.AddXY2(
    "Sat",17,27).AddXY2("Sun",-4,14)
        mfc5.ZDepth = ABM.ZDEPTH_1
        mfc5.lineOptionshideLine = 
    True
        
    page.cell(3,2).AddComponent(mfc5.ABMComp)
      
        
    Dim mfc6 As MashFrappeChart
        mfc6.Initialize(
    page,"mfc6","7. Line - Hide Dots"200)
        mfc6.ChartType = mfc6.EnumFrappeChartType.line
        mfc6.SetXAxis(
    "x",0)
        mfc6.AddSeries(
    "a","DS 1",mfc6.EnumColor.black)
        mfc6.AddSeries(
    "b","DS 2",mfc6.EnumColor.cyan)
        
    'add data
        mfc6.AddXY2("Sun",18,30).AddXY2("Mon",40,50).AddXY2("Tue",30,-10)
        mfc6.AddXY2(
    "Wed",35,15).AddXY2("Thu",8,18).AddXY2("Fri",52,32)
        mfc6.AddXY2(
    "Sat",17,27).AddXY2("Sun",-4,14)
        mfc6.ZDepth = ABM.ZDEPTH_1
        mfc6.lineOptionshideDots = 
    True
        
    page.cell(3,1).AddComponent(mfc6.ABMComp)
      
        
    Dim mfc7 As MashFrappeChart
        mfc7.Initialize(
    page,"mfc7","8. Bar + Line"200)
        mfc7.ChartType = mfc7.EnumFrappeChartType.AxisMixed
        mfc7.SetXAxis(
    "x",0)
        mfc7.AddSeries(
    "a","DS 1",mfc6.EnumColor.deeppurple)
        mfc7.AddSeries(
    "b","DS 2",mfc6.EnumColor.pink)
        
    'by default the series are lines, change series a to a bar
        'add bar series first before lines
        mfc7.SetSeriesChartType("a",mfc7.EnumFrappeChartType.Bar)
        mfc7.SetSeriesChartType(
    "b",mfc7.EnumFrappeChartType.line)  'IMPORTANT
        'add data
        mfc7.AddXY2("Sun",18,30).AddXY2("Mon",40,50).AddXY2("Tue",30,-10)
        mfc7.AddXY2(
    "Wed",35,15).AddXY2("Thu",8,18).AddXY2("Fri",52,32)
        mfc7.AddXY2(
    "Sat",17,27).AddXY2("Sun",-4,14)
        mfc7.ZDepth = ABM.ZDEPTH_1
        
    page.cell(3,2).AddComponent(mfc7.ABMComp)
      
      
        
    Dim mfc8 As MashFrappeChart
        mfc8.Initialize(
    page,"mfc8","9. Bar - Stacked"200)
        mfc8.ChartType = mfc8.EnumFrappeChartType.bar
        mfc8.SetXAxis(
    "x",0)
        mfc8.AddSeries(
    "a","DS 1",mfc8.EnumColor.yellow)
        mfc8.AddSeries(
    "b","DS 2",mfc8.EnumColor.violet)
        
    'add data
        mfc8.AddXY2("Sun",18,30).AddXY2("Mon",40,50).AddXY2("Tue",30,-10)
        mfc8.AddXY2(
    "Wed",35,15).AddXY2("Thu",8,18).AddXY2("Fri",52,32)
        mfc8.AddXY2(
    "Sat",17,27).AddXY2("Sun",-4,14)
        mfc8.ZDepth = ABM.ZDEPTH_1
        mfc8.barOptionsStacked = 
    True
        
    page.cell(3,1).AddComponent(mfc8.ABMComp)
      
        
    Dim mfc9 As MashFrappeChart
        mfc9.Initialize(
    page,"mfc9","10. Pie"200)
        mfc9.ChartType = mfc1.EnumFrappeChartType.Pie
        mfc9.SetXAxis(
    "x",0)
        mfc9.AddSeries(
    "a","Some data",mfc9.EnumColor.red)
        
    'add data
        mfc9.AddXY("Sun",18).AddXY("Mon",40).AddXY("Tue",30)
        mfc9.AddXY(
    "Wed",35).AddXY("Thu",8).AddXY("Fri",52)
        mfc9.AddXY(
    "Sat",17).AddXY("Sun",-4)
        
    page.cell(3,2).AddComponent(mfc9.ABMComp)

        
    Dim mfc10 As MashFrappeChart
        mfc10.Initialize(
    page,"mfc10","11. Percentage"200)
        mfc10.ChartType = mfc10.EnumFrappeChartType.Percentage
        mfc10.SetXAxis(
    "x",0)
        mfc10.AddSeries(
    "a","Some data",mfc10.EnumColor.red)
        
    'add data
        mfc10.AddXY("Sun",18).AddXY("Mon",40).AddXY("Tue",30)
        mfc10.AddXY(
    "Wed",35).AddXY("Thu",8).AddXY("Fri",52)
        mfc10.AddXY(
    "Sat",17).AddXY("Sun",-4)
        
    page.cell(3,1).AddComponent(mfc10.ABMComp)
    To Debug

    1. Stacked Chart
    2. Area Chart

    Ta!

    PS: Now included in my additional open source components
     

    Attached Files:

    Last edited: Jun 21, 2018
  2. Mashiane

    Mashiane Expert Licensed User

    Fixed a few bugs and added more methods.

    Known Issues: Stacked charts, area charts not working yet

    Methods: AddXY, AddXY2 ... AddXY10

    1. AddData Demo (use the AddData method to add single records to the chart data)

    AddDataDemo.png

    The methodology followed here using AddData is the same used in the MashMorrisChart component.

    Code:
    Dim mfc11 As MashFrappeChart
        mfc11.Initialize(
    page,"mfc11""12. AddData Demo"250)
        mfc11.SetXAxis(
    "elapsed",0)
        mfc11.AddSeries(
    "value","Value",mfc11.EnumColor.lightblue)
        mfc11.AddData(CreateMap(
    "elapsed""I""value"34))
        mfc11.AddData(CreateMap(
    "elapsed""II""value"24))
        mfc11.AddData(CreateMap(
    "elapsed""III""value"3))
        mfc11.AddData(CreateMap(
    "elapsed""IV""value"12))
        mfc11.AddData(CreateMap(
    "elapsed""V""value"13))
        mfc11.AddData(CreateMap(
    "elapsed""VI""value"22))
        mfc11.AddData(CreateMap(
    "elapsed""VII""value"5))
        mfc11.AddData(CreateMap(
    "elapsed""VIII""value"26))
        mfc11.AddData(CreateMap(
    "elapsed""IX""value"12))
        mfc11.AddData(CreateMap(
    "elapsed""X""value"19))
        
    page.cell(3,2).AddComponent(mfc11.ABMComp)
    2. SetData Demo (use the SetData methods to set the data to plot from a list of map records, e.g. from ExecuteMaps)

    SetDataDemo.png

    Code:
    'records could be derived from DBUtils.ExecuteMaps
        Dim recs As List: recs.initialize
        recs.add(CreateMap(
    "period""2012-10-01""licensed"3407"sorned"660))
        recs.add(CreateMap(
    "period""2012-09-30""licensed"3351"sorned"629))
        recs.add(CreateMap(
    "period""2012-09-29""licensed"3269"sorned"618))
        recs.add(CreateMap(
    "period""2012-09-20""licensed"3246"sorned"661))
        recs.add(CreateMap(
    "period""2012-09-19""licensed"3257"sorned"667))
        recs.add(CreateMap(
    "period""2012-09-18""licensed"3248"sorned"627))
        recs.add(CreateMap(
    "period""2012-09-17""licensed"3171"sorned"660))
        recs.add(CreateMap(
    "period""2012-09-16""licensed"3171"sorned"676))
        recs.add(CreateMap(
    "period""2012-09-15""licensed"3201"sorned"656))
        recs.add(CreateMap(
    "period""2012-09-10""licensed"3215"sorned"622))
        
        
    'formatting dates
        Dim mfc12 As MashFrappeChart
        mfc12.Initialize(
    page,"mfc12""13. SetData Demo"250)
        
    'define the x axis, the column to read x values, the angle of the x values and whether the x values are numberic/not
        mfc12.SetXAxis("period",0)
        mfc12.AddSeries(
    "licensed","Licensed",mfc12.EnumColor.brown)
        mfc12.AddSeries(
    "sorned","SORN",mfc12.EnumColor.indigo)
        mfc12.SetData(recs)
        
    page.cell(3,1).AddComponent(mfc12.ABMComp)
     

    Attached Files:

    Last edited: Jun 19, 2018
    Don Oso, Anser and joulongleu like this.
  3. Johan Hormaza

    Johan Hormaza Active Member Licensed User

    Good job my friend
     
    Mashiane likes this.
  4. Mashiane

    Mashiane Expert Licensed User

  5. Anser

    Anser Well-Known Member Licensed User

    Hi,
    I am using MashFrappeChart as follows

    Create the MashFrappeChart
    Code:
    Sub CreateQtrResults
       
        
    Dim QtrGraph As MashFrappeChart
        QtrGraph.Initialize(
    page,"QtrGraph","Quaterly performance for the year"350)
        QtrGraph.ChartType = QtrGraph.EnumFrappeChartType.bar
        QtrGraph.SetXAxis(
    "x",0)
        QtrGraph.AddSeries(
    "a","Target",QtrGraph.EnumColor.amber)
        QtrGraph.AddSeries(
    "b","Achieved",QtrGraph.EnumColor.blue)
        
    'add data
        QtrGraph.AddXY2("Qtr1",30,40).AddXY2("Qtr2",20,60)
        QtrGraph.AddXY2(
    "Qtr3",34,59)
        QtrGraph.AddXY2(
    "Qtr4",50,90)
        QtrGraph.ZDepth = ABM.ZDEPTH_REMOVE
        QtrGraph.valuesOverPoints = 
    True
       
        
    page.cell(4,1).AddComponent(QtrGraph.ABMComp)
       
    End Sub
    At later point of time, I need to modify the values in the graph, so I use the following sub to get the component and then change its values. Unfoirtunately I am getting compilation error while trying to get the component from the page. Here is the code that I use to get the component from the page.
    Code:
    Sub card1_click(value As Map)
        
    'I get compile error in the next line  
        Dim aQtrGraph As MashFrappeChart = page.Component("QtrGraph")

        aQtrGraph.AddXY2(
    "Qtr1",100,200).AddXY2("Qtr2",300,400)
        aQtrGraph.AddXY2(
    "Qtr3",400,500)
        aQtrGraph.AddXY2(
    "Qtr4",500,600)
        aQtrGraph.Refresh
       
    End Sub
    The code that I use to get the component from the page is throwing compilation error
    Code:
    Dim aQtrGraph As MashFrappeChart = page.Component("QtrGraph")
    I get the following compilation error
    Code:
    B4J Version: 6.51
    Parsing code.    (
    0.24s)
    Building folders structure.    (
    0.02s)
    Compiling code.    (
    0.34s)
    Compiling layouts code.    (
    0.00s)
    Organizing libraries.    (
    0.00s)
    Compiling generated Java code.    Error
    B4J line: 
    739
    aQtrGraph = 
    page.Component(\
    javac 
    1.8.0_191
    src\com\ab\template\targetsales.java:
    133: error: incompatible types: ABMComponent cannot be converted to mashfrappechart
    _aqtrgraph = (b4j.MashPlugIns.mashfrappechart)(_
    page.Component("QtrGraph"));
    Any idea, what is wrong here ?. In th same application I have used the following code and is working fine
    Code:
    Dim CardSalesGraph As ABMCustomCard = ContainerSales.Component("CardSalesGraph")
    CardSalesGraph.Refresh
    I tried like this too, but unsuccessful
    Code:
    Dim aQtrGraph As MashFrappeChart
    aQtrGraph = 
    page.ComponentRowCell(4,1,"QtrGraph")
    Any help will be appreciated
     
  6. Anser

    Anser Well-Known Member Licensed User

    It seems that if you need to access ABM Custom Component, from different sections of a Page, the trick is, define the Component in Class Globals as Private variable.
    page.Component("QtrGraph") will not work
    Hope I am not wrong.
     
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