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

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