B4J Library [ABMaterial]: Additional Frappe Chart Things

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

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

2. Hiding of dots on line chart

3. Increasing of dotSize on line chart

4. Values on bars / lines

The example source 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

 

[Mashiane]

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)

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

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)

'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)

 

[Johan Hormaza]

Good job my friend

 

[Mashiane]

Did some pens for learning purposes.

https://codepen.io/anele-mash-mbanga/pen/qKoBeK

https://codepen.io/anele-mash-mbanga/pen/jKzEpL

 

[Anser]

Hi,
I am using MashFrappeChart as follows

Create the MashFrappeChart

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.

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

Dim aQtrGraph As MashFrappeChart = page.Component("QtrGraph")

I get the following compilation error

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

Dim CardSalesGraph As ABMCustomCard = ContainerSales.Component("CardSalesGraph")
CardSalesGraph.Refresh

I tried like this too, but unsuccessful

Dim aQtrGraph As MashFrappeChart
aQtrGraph = page.ComponentRowCell(4,1,"QtrGraph")

Any help will be appreciated

 

[Anser]

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.