B4J Tutorial [ABMaterial] Alternative lightweight charts

Anser · Mar 21, 2018

In the Template project, inside the folder /www/js/custom there is already a file with the name frappe-charts.min.iife.403.js So I believe that I don not have to copy the frappe-charts.min.iife.js file that is available inside the zip folder in the above post

I just have to include the FrappeChart.bas in my project. Right ?

May be because this thread/post was created before the release of ABMaterial ver 4.03

I could net get it running. On the page instead of the graph it is just showing a text
var _tabservice-frappechart2;

I followed what has been described in the first post of this thread to create a Frappe Chart

Solved : The following line should be included in the BuildPage()
page.AddExtraJavaScriptFile("../../js/custom/frappe-charts.min.iife.403.js")

Mashiane · Jun 15, 2018

So I'm exploring... plotting chart from a db 1 series at a time...

B4X:

Dim fcbudgetexpenditure As FrappeChart
    fcbudgetexpenditure.Initialize(page, "fcbudgetexpenditure", "bar", "Total Budget vs Total Expenditure (Millions)", 500)
    fcbudgetexpenditure.frappexaxismode = "span"
    fcbudgetexpenditure.frappeyaxismode = "span"
    fcbudgetexpenditure.frappeisseries = True
    fcbudgetexpenditure.frapperaiseeventonclick = False
    fcbudgetexpenditure.frappeisnavigable = True
    fcbudgetexpenditure.frappeshowsums = False
    fcbudgetexpenditure.frappeshowaverages = False
    fcbudgetexpenditure.frappelineshowdots = True
    fcbudgetexpenditure.frappelineheatline = False
    fcbudgetexpenditure.frappelineregionfill = False
    fcbudgetexpenditure.valuesoverpoints = True
    Dim jSQL As SQL = ABMShared.SQLGet
    Dim lbls As List: lbls.Initialize
    lbls.add("Budget")
    fcbudgetexpenditure.FrappeLabels.AddAll(lbls)
    Dim recs As List = ABMShared.Execute2List(jSQL,"select Round(SUM(budget)/1000000,0) As a from projects",Null,0)
    fcbudgetexpenditure.AddDataSet("Budget", "blue", recs, Array As String())
    Dim recs As List = ABMShared.Execute2List(jSQL,"select Round(SUM(expenditure)/1000000,0) As b from projects",Null,0)
    fcbudgetexpenditure.AddDataSet("Expenditure", "red", recs, Array As String())
    ABMShared.SQLClose(jSQL)
    page.Cell(2,1).AddComponent(fcbudgetexpenditure.ABMComp)

One thing though, I have to call 1 query against the db, extracting both a & b using executemaps, parse that map and return each single dataset, then add to the chart.

Lesson: Only add 1 label for grouping datasets

Mashiane · Jun 15, 2018

Drawing datasets from different queries: continued..

So here I wanted a bar chart to show total projects vs completed projects, using same approach above, I tweaked my queries.. one counts all the projects and one counts only projects with actual progress = 100%.

B4X:

fccompletedprojects.Initialize(page, "fccompletedprojects", "bar", "Total Projects vs Completed Projects", 500)
    fccompletedprojects.frappexaxismode = "span"
    fccompletedprojects.frappeyaxismode = "span"
    fccompletedprojects.frappeisseries = True
    fccompletedprojects.frapperaiseeventonclick = False
    fccompletedprojects.frappeisnavigable = True
    fccompletedprojects.frappeshowsums = False
    fccompletedprojects.frappeshowaverages = False
    fccompletedprojects.frappelineshowdots = True
    fccompletedprojects.frappelineheatline = False
    fccompletedprojects.frappelineregionfill = False
    fccompletedprojects.valuesoverpoints = True
    Dim jSQL As SQL = ABMShared.SQLGet
    Dim lbls As List: lbls.Initialize
    lbls.add("Total Projects vs Completed Projects")
    fccompletedprojects.FrappeLabels.AddAll(lbls)
    Dim recsa As List = ABMShared.Execute2List(jSQL,"select Round(COUNT(id),0) As a from projects",Null,0)
    fccompletedprojects.AddDataSet("Total", "blue", recsa, Array As String())
    Dim recsb As List = ABMShared.Execute2List(jSQL,"select count(id) as b from projects where actualprogress = 100",Null,0)
    fccompletedprojects.AddDataSet("Completed", "red", recsb, Array As String())
    ABMShared.SQLClose(jSQL)

Mashiane · Jun 15, 2018

Loading both x and y axis from a DB

I just need to figure out how to set the x axis to work with angles here, but the demo here is about reading both the x axis and y axis values from the db and then plotting this on the frappe chart...

1. We need to pass lists for labels, and each of the datasets.
2. We run an execute maps to return 'a' and 'b' i.e. xy data from our recordsets using executemaps
3. We use the x i.e. clientnames as labels to plot these for the x axis
4. We use the a

B4X:

fcprojectsbyclient.Initialize(page, "fcprojectsbyclient", "bar", "Projects per Client", 500)
    fcprojectsbyclient.frappexaxismode = "span"
    fcprojectsbyclient.frappeyaxismode = "span"
    fcprojectsbyclient.frappeisseries = True
    fcprojectsbyclient.frapperaiseeventonclick = False
    fcprojectsbyclient.frappeisnavigable = True
    fcprojectsbyclient.frappeshowsums = False
    fcprojectsbyclient.frappeshowaverages = False
    fcprojectsbyclient.frappelineshowdots = True
    fcprojectsbyclient.frappelineheatline = False
    fcprojectsbyclient.frappelineregionfill = False
    fcprojectsbyclient.valuesoverpoints = True
    Dim jSQL As SQL = ABMShared.SQLGet
    Dim recs As List = ABMShared.SQLExecuteMaps(jSQL, "select count(projects.id) as a,clients.clientname as x from projects inner join clients on clients.id = projects.clientid group by clients.clientname", Null)
    'extract the x axis values
    Dim xaxis As List = ABMShared.MapProperty2List(recs,"x")
    fcprojectsbyclient.FrappeLabels.AddAll(xaxis)
    'Draw each series
    Dim recsa As List = ABMShared.MapProperty2List(recs,"a")
    fcprojectsbyclient.AddDataSet("Projects", "blue", recsa, Array As String())
    ABMShared.SQLClose(jSQL)
    page.Cell(4,1).AddComponent(fcprojectsbyclient.ABMComp)

There is code here to loop through each of the maps from ExecuteMaps and extract the provided property, in this case x and then a and return these are lists that are passed to the chart components for both the x axis and y axis values.

B4X:

'extract map properties to a list
Sub MapProperty2List(om As List,prop As String) As List
    Dim lst As List: lst.initialize
    Dim mtot As Int = om.Size - 1
    Dim mcnt As Int = 0
    For mcnt = 0 To mtot
        Dim omm As Map = om.Get(mcnt)
        Dim strvalue As String = GetDefault(omm,prop,"")
        lst.Add(strvalue)
    Next
    Return lst
End Sub
Sub GetDefault(m As Map, prop As String, def As String) As String
    prop = prop.tolowercase
    Return m.getdefault(prop,def)
End Sub

B4J Tutorial [ABMaterial] Alternative lightweight charts

Attachments

Anser

Well-Known Member

Mashiane

Expert

Mashiane

Expert

Mashiane

Expert

Similar Threads