B4J Tutorial [ABMaterial] CustomJQPlot

Mashiane · Nov 27, 2016

I was curious as to whether I would be able to create my first ABMaterial component. Well, the journey has been very interesting.

This comprises of more than 60 examples of setting the chart options. In your page's BuildPage method, only include the plugin js files applicable to what you want to do and not all. For example if you want a bar chart that will display dates you will need to add barRenderer and dateAxisRenderer. If for example you will have a bubble chart, only include the bubbleRenderer js. I have tried to consolidate these into one js, that distorts the charts.

Reproduction:
1. Download JQPlot from http://www.jqplot.com/
2. Copy the respective javascript files to the www/appname/js/custom and www/appname/css/custom folders of your app. You will find other js files in the plugins folder.
3. For now this is what I have added in my project, added to the BuildPage method of my page.

B4X:

'save file in www/appname/js/custom
    page.AddExtraJavaScriptFile("custom/excanvas.js")
    page.AddExtraJavaScriptFile("custom/jquery.jqplot.min.js")
    'add plugins for other rendering, these are optional depending on what you want to do.
   page.AddExtraJavaScriptFile("custom/jqplot.barRenderer.js")
   page.AddExtraJavaScriptFile("custom/jqplot.categoryAxisRenderer.js")
   page.AddExtraJavaScriptFile("custom/jqplot.canvasTextRenderer.js")
   page.AddExtraJavaScriptFile("custom/jqplot.canvasAxisLabelRenderer.js")
   page.AddExtraJavaScriptFile("custom/jqplot.logAxisRenderer.js")
   page.AddExtraJavaScriptFile("custom/jqplot.dateAxisRenderer.js")
   page.AddExtraJavaScriptFile("custom/jqplot.cursor.js")
   page.AddExtraJavaScriptFile("custom/jqplot.highlighter.js")
   page.AddExtraJavaScriptFile("custom/jqplot.funnelRenderer.js")
   page.AddExtraJavaScriptFile("custom/jqplot.trendline.js")
   page.AddExtraJavaScriptFile("custom/jqplot.bubbleRenderer.js")
   page.AddExtraJavaScriptFile("custom/jqplot.blockRenderer.js")
   page.AddExtraJavaScriptFile("custom/jqplot.pieRenderer.js")
   page.AddExtraJavaScriptFile("custom/jqplot.donutRenderer.js")
   page.AddExtraJavaScriptFile("custom/jqplot.canvasAxisTickRenderer.js")
   page.AddExtraJavaScriptFile("custom/jqplot.pointLabels.js")
   page.AddExtraJavaScriptFile("custom/jqplot.canvasOverlay.js")
    'save file in www/appname/css/custom
    page.AddExtraCSSFile("custom/jquery.jqplot.min.css")

5. Add the attached CustomJQPlot class to your ABM project and update it accordingly e.g. appname, page name etc.

6. In the Class_Globals, I declared each of my examples to show the features..

B4X:

Private custJQPlot As CustomJQPlot
    Private jqPlotBar As CustomJQPlot
    Private example3 As CustomJQPlot
    Private example4 As CustomJQPlot
    Private example5 As CustomJQPlot
    Private example6 As CustomJQPlot
    Private example7 As CustomJQPlot
    Private example8 As CustomJQPlot
    Private example9 As CustomJQPlot
    Private example10 As CustomJQPlot
    Private example11 As CustomJQPlot
    Private example12 As CustomJQPlot
    Private example13 As CustomJQPlot
    Private example14 As CustomJQPlot
    Private example15 As CustomJQPlot
    Private example16 As CustomJQPlot
    Private example17 As CustomJQPlot
    Private example18 As CustomJQPlot
    Private example19 As CustomJQPlot
    Private example20 As CustomJQPlot
    Private example21 As CustomJQPlot
    Private example22 As CustomJQPlot
    Private example23 As CustomJQPlot
    Private example24 As CustomJQPlot

7. In ConnectPage, create your custom components, the are comments you can check about how this has been done. I just followed the example to create a component.

B4X:

'define a line chart
    custJQPlot.Initialize(page, "custJQPlot")
    page.Cell(2,1).AddComponent(custJQPlot.ABMComp)
    custJQPlot.SetTitle("Example 1: Simple Chart")
    custJQPlot.AddSeriesData9(100,110,140,130,80,75,120,130,100)
    custJQPlot.IsAnimated(True)

    'define a bar chart
    jqPlotBar.Initialize(page, "jqPlotBar")
    page.Cell(2,2).AddComponent(jqPlotBar.ABMComp)
    jqPlotBar.SetTitle("Example 2: Set YAxis Min (70) Max (150)")
    jqPlotBar.SetWidthHeight("100%","600px")
    jqPlotBar.AddSeriesData5(100,110,140,130,80)
    jqPlotBar.axesDefaults.yAxis.yMin = 70
    jqPlotBar.axesDefaults.yaxis.yMax=150

    example3.Initialize(page, "example3")
    page.Cell(3,1).AddComponent(example3.ABMComp)
    example3.SetTitle("Example 3: No Grid Lines")
    example3.SetWidthHeight("100%","600px")
    example3.AddSeriesData5(100,110,140,130,80)
    example3.drawGridlines = False

    example4.Initialize(page, "example4")
    page.Cell(3,2).AddComponent(example4.ABMComp)
    example4.SetTitle("Example 4: Multiple Series")
    example4.SetWidthHeight("100%","600px")
    example4.AddSeriesData6(1,2,3,2,3,4)
    example4.AddSeriesData6(3,4,5,6,5,7)
    example4.AddSeriesData6(5,6,8,9,7,9)
    example4.AddSeriesData6(7,8,9,11,10,11)

    example5.Initialize(page, "example5")
    page.Cell(4,1).AddComponent(example5.ABMComp)
    example5.SetTitle("Example 5: Axes Defaults Min 0, Max 20")
    example5.SetWidthHeight("100%","600px")
    example5.AddSeriesData9(1,4,8,13,8,7,12,10,5)
    example5.axesDefaults.xyMin = 0
    example5.axesdefaults.xyMax = 20

    example6.Initialize(page, "example6")
    page.Cell(4,2).AddComponent(example6.ABMComp)
    example6.SetTitle("Example 6: Series Defaults ShowMarker: False")
    example6.SetWidthHeight("100%","600px")
    example6.AddSeriesData6(1,2,3,2,3,4)
    example6.AddSeriesData6(3,4,5,6,5,7)
    example6.AddSeriesData6(5,6,8,9,7,9)
    example6.AddSeriesData6(7,8,9,11,10,11)
    example6.seriesDefaults.showMarker = False
    'Log(example6.ToString)

    example7.Initialize(page, "example7")
    page.Cell(5,1).AddComponent(example7.ABMComp)
    example7.SetTitle("Example 7: Bar Chart")
    example7.SetWidthHeight("100%","600px")
    example7.SetChartType(example7.ChartType.bar)
    example7.AddSeriesData6(1,2,3,2,3,4)
    'example8.SaveScript(File.DirApp,example8.ABMComp.ID & ".txt")
    'Log(example7.ToString)

    example8.Initialize(page, "example8")
    page.Cell(5,2).AddComponent(example8.ABMComp)
    example8.SetTitle("Example 8: Bar Chart Vary Colors")
    example8.SetWidthHeight("100%","600px")
    example8.SetChartType(example8.ChartType.bar)
    example8.AddSeriesData6(1,2,3,2,3,4)
    example8.UseVaryingColors(True)
    'example8.SaveScript(File.DirApp,example8.ABMComp.ID & ".txt")
    'Log(example8.ToString)

    example9.Initialize(page, "example9")
    page.Cell(6,1).AddComponent(example9.ABMComp)
    example9.SetTitle("Example 9: Axes Labels/Titles")
    example9.SetWidthHeight("100%","600px")
    example9.AddSeriesData6(1,2,3,2,3,4)
    example9.SetAxisTitles("X Axis","Y Axis")
  
    example10.Initialize(page, "example10")
    page.Cell(6,2).AddComponent(example10.ABMComp)
    example10.SetTitle("Example 10: X Axis Padding (1)")
    example10.SetWidthHeight("100%","600px")
    example10.AddSeriesData6(1,2,3,2,3,4)
    example10.SetAxisTitles("X Axis","Y Axis")
    example10.SetXAxisPadding(1)
    'Log(example10.ToString)

    example11.Initialize(page, "example11")
    page.Cell(7,1).AddComponent(example11.ABMComp)
    example11.SetTitle("Example 11: X Axis Padding (2)")
    example11.SetWidthHeight("100%","600px")
    example11.AddSeriesData6(1,2,3,2,3,4)
    example11.SetAxisTitles("X Axis","Y Axis")
    example11.SetXAxisPadding(2)
    'Log(example11.ToString)

    example12.Initialize(page, "example12")
    page.Cell(7,2).AddComponent(example12.ABMComp)
    example12.SetTitle("Example 12: X Axis Min(1), Max(9)")
    example12.SetWidthHeight("100%","600px")
    example12.AddSeriesData6(1,2,3,2,3,4)
    example12.SetAxisTitles("X Axis","Y Axis")
    example12.SetXAxisMinMax(1,9)
    'Log(example12.ToString)

    example13.Initialize(page, "example13")
    page.Cell(8,1).AddComponent(example13.ABMComp)
    example13.SetTitle("Example 13: X Axis numberTicks(5)")
    example13.SetWidthHeight("100%","600px")
    example13.AddSeriesData9(1,2,3,2,3,4,8,10,12)
    example13.SetAxisTitles("X Axis","Y Axis")
    example13.SetXAxisNumberTicks(5)
    'Log(example13.ToString)

    example14.Initialize(page, "example14")
    page.Cell(8,2).AddComponent(example14.ABMComp)
    example14.SetTitle("Example 14: X Axis Own Ticks")
    example14.SetWidthHeight("100%","600px")
    example14.AddSeriesData9(1,2,3,2,3,4,8,10,12)
    example14.SetAxisTitles("X Axis","Y Axis")
    example14.AddXAxisTick(1)
    example14.AddXAxisTick(2)
    example14.AddXAxisTick(3)
    example14.AddXAxisTick(7)
    example14.AddXAxisTick(9)
    'Log(example14.ToString)

    example15.Initialize(page, "example15")
    page.Cell(9,1).AddComponent(example15.ABMComp)
    example15.SetTitle("Example 15: Log Scale i.e Large Data Sets")
    example15.SetWidthHeight("100%","600px")
    example15.AddSeriesData2(0,1.2)
    example15.AddSeriesData2(10,2.4)
    example15.AddSeriesData2(20,5.6)
    example15.AddSeriesData2(30,12)
    example15.AddSeriesData2(40,23)
    example15.AddSeriesData2(50,60)
    example15.AddSeriesData2(60,120)
    example15.AddSeriesData2(70,270)
    example15.AddSeriesData2(80,800)
    example15.SetYAxisRenderer(example15.Renderer.LogAxisRenderer)
    example15.SingleSeries = True  ' IMPORTANT
    'Log(example15.ToString)

    example16.Initialize(page, "example16")
    page.Cell(9,2).AddComponent(example16.ABMComp)
    example16.SetTitle("Example 16: Series with Hex Colors:")
    example16.SetWidthHeight("100%","600px")
    example16.AddSeries("a", "#105567")
    example16.AddSeries("b", "#805567")
    example16.AddSeries("c", "#bb5567")
    example16.AddSeries("d", "#ff5567")
    example16.AddSeriesData6(1,2,3,2,3,4)
    example16.AddSeriesData6(3,4,5,6,5,7)
    example16.AddSeriesData6(5,6,8,9,7,9)
    example16.AddSeriesData6(7,8,9,11,10,11)
    'Log(example16.ToString)

    example17.Initialize(page, "example17")
    page.Cell(10,1).AddComponent(example17.ABMComp)
    example17.SetTitle("Example 17: Series with RGBA Colors")
    example17.SetWidthHeight("100%","600px")
    example17.AddSeriesrgba("a", 16,85,103,0.2)
    example17.AddSeriesrgba("b", 128,85,103,0.6)
    example17.AddSeriesrgb("c", 187,85,103)
    example17.AddSeriesrgb("d", 250, 85, 103)
    example17.AddSeriesData6(1,2,3,2,3,4)
    example17.AddSeriesData6(3,4,5,6,5,7)
    example17.AddSeriesData6(5,6,8,9,7,9)
    example17.AddSeriesData6(7,8,9,11,10,11)
    'Log(example17.ToString)

    example18.Initialize(page, "example18")
    page.Cell(10,2).AddComponent(example18.ABMComp)
    example18.SetTitle("Example 18: Smooth Lines")
    example18.SetWidthHeight("100%","600px")
    example18.AddSeriesrgba("a", 16,85,103,0.2)
    example18.AddSeriesrgba("b", 128,85,103,0.6)
    example18.AddSeriesrgb("c", 187,85,103)
    example18.AddSeriesrgb("d", 250, 85, 103)
    example18.AddSeriesData6(1,2,3,2,3,4)
    example18.AddSeriesData6(3,4,5,6,5,7)
    example18.AddSeriesData6(5,6,8,9,7,9)
    example18.AddSeriesData6(7,8,9,11,10,11)
    example18.IsSmooth(True)

    example19.Initialize(page, "example19")
    page.Cell(11,1).AddComponent(example19.ABMComp)
    example19.SetTitle("Example 19: Line & Marker Styles")
    example19.SetWidthHeight("100%","600px")
    example19.AddSeriesData6(1,2,3,2,3,4)
    example19.AddSeriesData6(3,4,5,6,5,7)
    example19.AddSeriesData6(5,6,8,9,7,9)
    example19.AddSeriesData6(7,8,9,11,10,11)
    example19.AddSeriesData6(6,3,2,12,13,16)
    example19.AddSeriesOptions("a", "dashed",2,"diamond",0,True)
    example19.AddSeriesOptions("b", "",0,"x",7,False)
    example19.AddSeriesOptions("c","",0,"circle",0,True)
    example19.AddSeriesOptions("d", "dotted", 5,"filledSquare",10,True)
    example19.AddSeriesOptions("e", "-.", 0,"",0,True)
    example19.IsAnimated(True)
    'Log(example19.ToString)

    example20.Initialize(page, "example20")
    page.Cell(11,2).AddComponent(example20.ABMComp)
    example20.SetTitle("Example 20: Series Defaults Marker Options")
    example20.SetWidthHeight("100%","600px")
    example20.AddSeriesData6(1,2,3,2,3,4)
    example20.AddSeriesData6(3,4,5,6,5,7)
    example20.AddSeriesData6(5,6,8,9,7,9)
    example20.AddSeriesData6(7,8,9,11,10,11)
    example20.AddSeriesData6(6,3,2,12,13,16)
    example20.AddSeriesOptions("a", "dashed",2,"diamond",0,True)
    example20.AddSeriesOptions("b", "",0,"x",7,False)
    example20.AddSeriesOptions("c","",0,"circle",0,True)
    example20.AddSeriesOptions("d", "dotted", 5,"filledSquare",10,True)
    example20.AddSeriesOptions("e", "-.", 0,"",0,True)
    example20.SeriesDefaultsMarkerOptionsShow(False)
    example20.IsSmooth(True)

    'note the values inside single quotes
    example21.Initialize(page, "example21")
    page.Cell(12,1).AddComponent(example21.ABMComp)
    example21.SetTitle("Example 21: Handling Date Values")
    example21.SetWidthHeight("100%","600px")
    example21.SetXAxisRenderer(example21.Renderer.DateAxisRenderer)
    example21.SetXAxisTickOptionsFormatString("'%d %b'")   ' shows dd MMM
    example21.SetYAxisTickOptionsFormatString("'$%d'")        ' show money sign and amount
    example21.AddSeriesData2("'14-Oct-2012'",1300.41)
    example21.AddSeriesData2("'2012/10/16'",1322.88)
    example21.AddSeriesData2("'10/18/2012'",1308.16)
    example21.AddSeriesData2("'20-Oct-2012'",1305.01)
    example21.AddSeriesData2("'22-Oct-2012'",1290.67)
    example21.AddSeriesData2("'17 Oct 2012'",1312.41)
    example21.AddSeriesData2("'19-Oct-2012'",1310.71)
    example21.AddSeriesData2("'21-Oct-2012'",1300.85)
    example21.SingleSeries = True  'IMPORTANT

    'note the values inside single quotes
    example22.Initialize(page, "example22")
    page.Cell(12,2).AddComponent(example22.ABMComp)
    example22.SetTitle("Example 22: Handling Time Values")
    example22.SetWidthHeight("100%","600px")
    example22.SetXAxisRenderer(example21.Renderer.DateAxisRenderer)
    example22.SetXAxisTickOptionsFormatString("'%R'")   ' shows HH:mm
    example22.AddSeriesData2("'2012-10-14 08:00AM'",30)
    example22.AddSeriesData2("'2012-10-14 18:00AM'",60)
    example22.AddSeriesData2("'2012-10-14 00:00PM'",120)
    example22.AddSeriesData2("'2012-10-14 02:00PM'",60)
    example22.AddSeriesData2("'2012-10-14 04:00PM'",100)
    example22.AddSeriesData2("'2012-10-14 06:00PM'",40)
    example22.SetTitles("Example 22: Museum Visitors","Time","Visitors")
    example22.SingleSeries = True  'IMPORTANT

    example23.Initialize(page, "example23")
    page.Cell(13,1).AddComponent(example23.ABMComp)
    example23.SetTitle("Example 23: Cursor Highlighter")
    example23.SetWidthHeight("100%","600px")
    example23.SetXAxisRenderer(example21.Renderer.DateAxisRenderer)
    example23.SetXAxisTickOptionsFormatString("'%b&nbsp;%#d'")   ' MMM dd
    example23.SetYAxisTickOptionsFormatString("'$%d'")        ' show money sign and amount
    example23.AddSeriesData2("'14-Oct-2012'",1300.41)
    example23.AddSeriesData2("'2012/10/16'",1322.88)
    example23.AddSeriesData2("'10/18/2012'",1308.16)
    example23.AddSeriesData2("'20-Oct-2012'",1305.01)
    example23.AddSeriesData2("'22-Oct-2012'",1290.67)
    example23.AddSeriesData2("'17 Oct 2012'",1312.41)
    example23.AddSeriesData2("'19-Oct-2012'",1310.71)
    example23.AddSeriesData2("'21-Oct-2012'",1300.85)
    example23.SingleSeries = True  'IMPORTANT
    example23.SetHighlighter(True,7.5)
    example23.SetCursor(False,"") ' hide cursor

    example24.Initialize(page, "example24")
    page.Cell(13,2).AddComponent(example24.ABMComp)
    example24.SetTitle("Example 24: Data Points Highlights")
    example24.SetWidthHeight("100%","600px")
    example24.SetXAxisRenderer(example21.Renderer.DateAxisRenderer)
    example24.SetXAxisTickOptionsFormatString("'%b&nbsp;%#d'")   ' MMM dd
    example24.SetYAxisTickOptionsFormatString("'$%d'")        ' show money sign and amount
    example24.AddSeriesData2("'14-Oct-2012'",1300.41)
    example24.AddSeriesData2("'2012/10/16'",1322.88)
    example24.AddSeriesData2("'10/18/2012'",1308.16)
    example24.AddSeriesData2("'20-Oct-2012'",1305.01)
    example24.AddSeriesData2("'22-Oct-2012'",1290.67)
    example24.AddSeriesData2("'17 Oct 2012'",1312.41)
    example24.AddSeriesData2("'19-Oct-2012'",1310.71)
    example24.AddSeriesData2("'21-Oct-2012'",1300.85)
    example24.SingleSeries = True  'IMPORTANT
    example24.SetHighlighter(True,7.5)
    example24.SetCursor(True, "ne")
    Log(example24.ToString)

8. NB: The AddSeriesDataXXX methods will be updated, this has been created whilst learning how the jqplot framework work, thus the series definitions will be tweaked soon enough.

Mashiane · Dec 6, 2016

More on AddData2Series examples...

B4X:

example5.Initialize(page, "example5")
    page.Cell(2,1).AddComponent(example5.ABMComp)
    example5.SetTitle("Figure 4.46")
    example5.SetWidthHeight("100%","600px")
    example5.AddData2SeriesWithBands(example5.s1, 10,100,90,100)
    example5.AddData2SeriesWithBands(example5.s1, 20,110,100,120)
    example5.AddData2SeriesWithBands(example5.s1, 30,140,130,150)
    example5.AddData2SeriesWithBands(example5.s1, 40,130,120,140)
    example5.AddData2SeriesWithBands(example5.s1, 50,80,70,90)
    example5.AddData2SeriesWithBands(example5.s1, 60,75,65,85)
    example5.AddData2SeriesWithBands(example5.s1, 70,120,110,130)
    example5.AddData2SeriesWithBands(example5.s1, 80,130,120,140)
    example5.AddData2SeriesWithBands(example5.s1, 90,100,90,110)
    example5.AddSeries1
    example5.HideMarkers
    example5.Smoothen

example8.Initialize(page, "example8")
    page.Cell(2,2).AddComponent(example8.ABMComp)
    example8.SetTitle("Figure 4.54")
    example8.SetWidthHeight("100%","600px")
    example8.AddData2Series2(example8.s1,1,100)
    example8.AddData2Series2(example8.s1,2,110)
    example8.AddData2Series2(example8.s1,3,140)
    example8.AddData2Series2(example8.s1,4,130)
    example8.AddData2Series2(example8.s1,5,135)
    example8.AddData2Series2(example8.s1,6,132)
    example8.AddData2Series2(example8.s1,7,140)
    example8.AddData2Series2(example8.s1,8,135)
    example8.AddData2Series2(example8.s1,9,142)
    example8.AddSeriesTrendLine(example8.seriesDefaults,True,"#ff0000", "","4")
    example8.addseries1
    'Log(example8.ToString)

    example9.Initialize(page, "example9")
    page.Cell(2,1).AddComponent(example9.ABMComp)
    example9.SetTitle("Figure 4.55")
    example9.SetWidthHeight("100%","600px")
    example9.AddData2Series2(example9.s1,10,1.44)
    example9.AddData2Series2(example9.s1,30,6.98)
    example9.AddData2Series2(example9.s1,50,10.7)
    example9.AddData2Series2(example9.s1,70,37.5)
    example9.AddData2Series2(example9.s1,90,78.1)
    example9.AddSeriesTrendLine(example9.seriesDefaults,True,"#ff0000", "exponential","4")
    example9.addseries1
    'Log(example9.ToString)

example11.Initialize(page, "example11")
    page.Cell(2,2).AddComponent(example11.ABMComp)
    example11.SetTitle("JSFiddle")
    example11.SetWidthHeight("100%","600px")
    example11.AddData2Series2Label(example11.s1,"Nissan",4)
    example11.AddData2Series2Label(example11.s1,"Porche",6)
    example11.AddData2Series2Label(example11.s1,"Acura",2)
    example11.AddData2Series2Label(example11.s1,"Aston Martin",5)
    example11.AddData2Series2Label(example11.s1,"Rolls Royce",6)
    example11.s1.IsDataArray = True
    example11.s1.renderer = example11.renderer.BarRenderer
    example11.s1.rendererOptions.highlightMouseOver = False
    example11.s1.rendererOptions.varyBarColor = True
    example11.addseries1
    example11.NoLabelRenderers
    example11.AddData2Series2Label(example11.s2,"Nissan",2)
    example11.AddData2Series2Label(example11.s2,"Porche",3)
    example11.AddData2Series2Label(example11.s2,"Acura",4)
    example11.AddData2Series2Label(example11.s2,"Aston Martin",3)
    example11.AddData2Series2Label(example11.s2,"Rolls Royce",7)
    example11.s2.renderer = example11.renderer.LineRenderer
    example11.s2.IsDataArray = True
    example11.addseries2
    example11.xAxis.renderer = example11.renderer.CategoryAxisRenderer
    example11.seriesDefaults.shadow = False
    example11.seriesDefaults.rendereroptions.barpadding = 0
    example11.seriesDefaults.rendererOptions.barMargin = 10
    example11.seriesDefaults.rendererOptions.barWidth = 25
    example11.seriesDefaults.rendererOptions.highlightMouseDown = True
    Log(example11.ToString)

Mashiane · Dec 6, 2016

This example shows how you can draw different series and animate them at different speeds.

B4X:

example10.Initialize(page, "example10")
    page.Cell(2,1).AddComponent(example10.ABMComp)
    example10.SetTitle("Figure 5.13")
    example10.SetWidthHeight("100%","600px")
    example10.Animate = True
    example10.AnimateReplot = True
    example10.AddData2Series2Label(example10.s1,"Germany",12)
    example10.AddData2Series2Label(example10.s1,"Italy",8)
    example10.AddData2Series2Label(example10.s1,"Spain",6)
    example10.AddData2Series2Label(example10.s1,"France",10)
    example10.AddData2Series2Label(example10.s1,"UK",7)
    example10.s1.IsDataArray = True
    example10.AddData2Series2Label(example10.s2,"BMW",45)
    example10.AddData2Series2Label(example10.s2,"AlfaRomeo",30)
    example10.AddData2Series2Label(example10.s2,"Seat",24)
    example10.AddData2Series2Label(example10.s2,"Renault",36)
    example10.AddData2Series2Label(example10.s2,"Mini",30)
    example10.s2.IsDataArray = True
    example10.s1.renderer = example10.renderer.BarRenderer
    example10.s1.rendererOptions.animation.speed = 2500
    example10.s1.rendererOptions.highlightMouseOver = False
    example10.s1.rendererOptions.varyBarColor = True
    example10.s2.renderer = example10.renderer.LineRenderer
    example10.xAxis.renderer = example10.renderer.CategoryAxisRenderer
    example10.x2Axis.renderer = example10.renderer.CategoryAxisRenderer
    example10.x2Axis.visible = True
    example10.s2.xAxis = "x2axis"
    example10.s2.yAxis = "y2axis"
    example10.s2.rendererOptions.animation.speed = 2000
   
    example10.yAxis.autoscale = True
    example10.yAxis.numberTicks = 6
    example10.y2Axis.autoscale = True
    example10.y2Axis.numberTicks = 6
    'example10.y2Axis.rendererOptions.alignTicks = True
    example10.y2Axis.visible = True
    example10.addseries1
    example10.addseries2
    example10.NoLabelRenderers
    Log(example10.ToString)

Mashiane · Dec 6, 2016

Another donut example...

B4X:

example40.Initialize(page, "example40")
    page.Cell(2,1).AddComponent(example40.ABMComp)
    example40.SetWidthHeight("100%","600px")
    example40.SetChartType(example40.ChartType.donut)
   
    example40.AddData2Series2Label(example40.s1,"Dairy",212)
    example40.AddData2Series2Label(example40.s1,"Meat",140)
    example40.AddData2Series2Label(example40.s1,"Grains",276)
    example40.AddData2Series2Label(example40.s1,"Fish",131)
    example40.AddData2Series2Label(example40.s1,"Vegetables",510)
    example40.AddData2Series2Label(example40.s1,"Fruit",325)
       
    example40.AddData2Series2Label(example40.s2,"Dairy",185)
    example40.AddData2Series2Label(example40.s2,"Meat",166)
    example40.AddData2Series2Label(example40.s2,"Grains",243)
    example40.AddData2Series2Label(example40.s2,"Fish",166)
    example40.AddData2Series2Label(example40.s2,"Vegetables",499)
    example40.AddData2Series2Label(example40.s2,"Fruit",370)
    example40.SetTitle("Example 40.1: Would you like another donut?")
    example40.SetDataLabels("value",True)
    example40.SetSliceMargin(3)
    example40.AddSeries1
    example40.AddSeries2
    Log(example40.ToString)

Mashiane · Dec 6, 2016

Bubble Importance:

To highlight a bubble in a bubble chart, add it as an individual bubble series, s2 in this case, it will sit on top of others.

B4X:

example33.Initialize(page, "example33")
    page.Cell(2,1).AddComponent(example33.ABMComp)
    example33.SetWidthHeight("100%","600px")
    example33.SetChartType(example33.ChartType.bubble)
    example33.AddBubbleDataWithColor(example33.s1,301,60,29392,"Italy","#b39524")
    example33.AddBubbleDataWithColor(example33.s1,675,65,34205,"France","#a39544")
    example33.AddBubbleDataWithColor(example33.s2,506,46,30625,"Spain","#ff2524")
    example33.AddBubbleDataWithColor(example33.s1,357,81,37896,"Germany","#a39564")
    example33.AddBubbleDataWithColor(example33.s1,450,9,37333,"Sweden","#b39524")
    example33.AddBubbleDataWithColor(example33.s1,132,11,27624,"Greece","#c39564")
    example33.SetTitles("Example 33: Bubble Chart with Transparency","Total area [*1000 km3]","Population [million]")
    example33.seriesDefaults.shadow = True
    example33.seriesDefaults.rendererOptions.bubbleGradients = True
    example33.seriesDefaults.rendererOptions.bubbleAlpha = 0.6
    example33.AddSeries1
    example33.addseries2

Mashiane · Dec 6, 2016

Multi-series Block Chart

B4X:

example34.Initialize(page, "example34")
    page.Cell(2,2).AddComponent(example34.ABMComp)
    example34.SetWidthHeight("100%","600px")
    example34.SetChartType(example34.ChartType.block)
    example34.AddBlockData(example34.s1,10,30,"Copper")
    example34.AddBlockData(example34.s1,100,40,"Gold")
    example34.AddBlockData(example34.s1,50,50,"Silver")
    example34.AddBlockData(example34.s1,12,78,"Lead")
    example34.AddBlockData(example34.s1,44,66,"Brass")
    example34.AddBlockData(example34.s2,68,15,"Maple")
    example34.AddBlockData(example34.s2,33,22,"Oak")
    example34.AddBlockData(example34.s2,10,90,"Ebony")
    example34.AddBlockData(example34.s2,94,30,"Beech")
    example34.AddBlockData(example34.s2,56,76,"PE")
    example34.SetTitle("Example 34: Block Chart")
    example34.AddSeries1
    example34.addseries2

Mashiane · Dec 6, 2016

This is the final post about this CustomComponent for ABMaterial

Known Issues: The css for the legend does not make the legends to render nicely, otherwise everything else is working ok.

I have attached all examples in the txt files, this includes the BuildPage and ConnectPage methods. you can use those to refer when drafting your charts.
The code has been profiled as much as possible and works well with the jqPlot framework, thus the addition of the series object was vital and is the recommended method to add data to any of the chart with the exception of the gauges. For compatibility with existing examples here, the structure has been kept the same, however the series object needs to be referred to.

The following methods use s1 i.e. series 1

B4X:

ddSeriesDataOHLC, AddSeriesDataOHLCCompare, AddSeriesDateData

but they have their equivalents for any series with a 1 at the end e.g. AddSeriesDataOHLC1 etc.

The

B4X:

SingleSeries

method has been removed.

It has been a very interesting piece of work!

Enjoy! Ta!

MbedAndroid · Oct 11, 2017

mashy
i tried to get this to work, noticed the examples are for older releases, but that's a minor problem.
Are things changed in ABMaterial 3.2 which blocks Qplot? Dont got any plot, non of the examples.
Off course the libs are stored in www/js/custom and www/css/custom

any idea what it might be?

Mashiane · Oct 11, 2017

MbedAndroid said:
mashy
i tried to get this to work, noticed the examples are for older releases, but that's a minor problem.
Are things changed in ABMaterial 3.2 which blocks Qplot? Dont got any plot, non of the examples.
Off course the libs are stored in www/js/custom and www/css/custom

any idea what it might be?

I will look into it and revert back...

Cableguy · Oct 11, 2017

A LOT changed from 3.20 to 3.50 in ABMaterial, specially within the jetty engine, so I wouldn't be surprised that a few things did not work as expected!

MbedAndroid · Oct 11, 2017

i checked this on 3.2

Mashiane · Oct 12, 2017

@MbedAndroid , I would greatly recommend that you move to the publicly available version of ABMaterial 3.50, a lot has changed indeed. I am using 3.75 and already the Custom components have an extra initialization parameter on them.

I will however play around and update the example using 3.50 where applicable.

MbedAndroid · Oct 12, 2017

running the dragdrop example of 3.5 i'm getting a error, thus sticking on 3.2 for the moment. Didnt spend time to check why i got this error
same to my application

2017-10-12 09:02:39.453:INFOejs.AbstractNCSARequestLog:main: Opened D:\ABMATERIAL\3.50\DragDrop\Objects\logs\b4j-2017_10_12.request.log
2017-10-12 09:02:39.472:INFOejs.AbstractConnector:main: Started ServerConnector@18c1321{HTTP/1.1,[http/1.1]}{0.0.0.0:51042}
2017-10-12 09:02:39.472:INFOejs.Server:main: Started @552ms
2017-10-12 09:02:39.479:INFOejs.AbstractConnector:main: Stopped ServerConnector@18c1321{HTTP/1.1,[http/1.1]}{0.0.0.0:51042}
2017-10-12 09:02:39.479:INFOejs.session:main: Stopped scavenging
2017-10-12 09:02:39.481:INFOejsh.ContextHandler:main: Stopped o.e.j.s.ServletContextHandler@11cdd8a{/,file:///D:/ABMATERIAL/3.50/DragDrop/Objects/www/,UNAVAILABLE}
abmapplication._startserver (java line: 366)
java.lang.RuntimeException: Method: getSessionManager not found in: org.eclipse.jetty.server.session.SessionHandler
at anywheresoftware.b4j.object.JavaObject$MethodCache.getMethod(JavaObject.java:366)
at anywheresoftware.b4j.object.JavaObject.RunMethod(JavaObject.java:119)
at anywheresoftware.b4j.object.JavaObject.RunMethodJO(JavaObject.java:138)
at b4j.example.abmapplication._startserver(abmapplication.java:366)
at b4j.example.main._appstart(main.java:58)
at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
at java.lang.reflect.Method.invoke(Method.java:498)
at anywheresoftware.b4a.BA.raiseEvent2(BA.java:90)
at anywheresoftware.b4a.BA.raiseEvent(BA.java:77)
at b4j.example.main.main(main.java:29)
main.main (java line: 29)
java.lang.RuntimeException: java.lang.RuntimeException: Method: getSessionManager not found in: org.eclipse.jetty.server.session.SessionHandler
at anywheresoftware.b4a.BA.raiseEvent2(BA.java:119)
at anywheresoftware.b4a.BA.raiseEvent(BA.java:77)
at b4j.example.main.main(main.java:29)
Caused by: java.lang.RuntimeException: Method: getSessionManager not found in: org.eclipse.jetty.server.session.SessionHandler
at anywheresoftware.b4j.object.JavaObject$MethodCache.getMethod(JavaObject.java:366)
at anywheresoftware.b4j.object.JavaObject.RunMethod(JavaObject.java:119)
at anywheresoftware.b4j.object.JavaObject.RunMethodJO(JavaObject.java:138)
at b4j.example.abmapplication._startserver(abmapplication.java:366)
at b4j.example.main._appstart(main.java:58)
at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
at java.lang.reflect.Method.invoke(Method.java:498)
at anywheresoftware.b4a.BA.raiseEvent2(BA.java:90)
... 2 more

Cableguy · Oct 12, 2017

Have you updated your libraries folder? There where some extra code needed to add because of the jetty engine changes...

https://www.b4x.com/android/forum/threads/abmaterial-important-change-for-b4j-5-80.81595/

MbedAndroid · Oct 12, 2017

moved the abmaterial.xml and jar yes

didnt moved the other jar files in the folder yet. Will try them also.
The link you provided was already done in the 3.2 code

MbedAndroid · Oct 12, 2017

moved all the items for library folder into B4j additional library folder
same result
i think some additional action is needed.
Non of the examples provided in 3.5 works, all the same error, including my app

the mentioned mod is included in ABMapplication since 3.2

2017-10-12 10:44:54.295:INFOejs.AbstractNCSARequestLog:main: Opened D:\ABMATERIAL\3.50\Demo\Objects\logs\b4j-2017_10_12.request.log
2017-10-12 10:44:54.311:INFOejs.AbstractConnector:main: Started ServerConnector@5eaa29{HTTP/1.1,[http/1.1]}{0.0.0.0:51042}
2017-10-12 10:44:54.312:INFOejs.Server:main: Started @4708ms
2017-10-12 10:44:54.320:INFOejs.AbstractConnector:main: Stopped ServerConnector@5eaa29{HTTP/1.1,[http/1.1]}{0.0.0.0:51042}
2017-10-12 10:44:54.320:INFOejs.session:main: Stopped scavenging
2017-10-12 10:44:54.322:INFOejsh.ContextHandler:main: Stopped o.e.j.s.ServletContextHandler@4aa2f2{/,file:///D:/ABMATERIAL/3.50/Demo/Objects/www/,UNAVAILABLE}
abmapplication._startserver (java line: 475)
java.lang.RuntimeException: Method: getSessionManager not found in: org.eclipse.jetty.server.session.SessionHandler
at anywheresoftware.b4j.object.JavaObject$MethodCache.getMethod(JavaObject.java:366)
at anywheresoftware.b4j.object.JavaObject.RunMethod(JavaObject.java:119)
at anywheresoftware.b4j.object.JavaObject.RunMethodJO(JavaObject.java:138)
at abmaterial.ab.com.abmapplication._startserver(abmapplication.java:475)
at abmaterial.ab.com.main._appstart(main.java:504)
at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
at java.lang.reflect.Method.invoke(Method.java:498)
at anywheresoftware.b4a.BA.raiseEvent2(BA.java:90)
at anywheresoftware.b4a.BA.raiseEvent(BA.java:77)
at abmaterial.ab.com.main.main(main.java:29)
main.main (java line: 29)
java.lang.RuntimeException: java.lang.RuntimeException: Method: getSessionManager not found in: org.eclipse.jetty.server.session.SessionHandler
at anywheresoftware.b4a.BA.raiseEvent2(BA.java:119)
at anywheresoftware.b4a.BA.raiseEvent(BA.java:77)
at abmaterial.ab.com.main.main(main.java:29)
Caused by: java.lang.RuntimeException: Method: getSessionManager not found in: org.eclipse.jetty.server.session.SessionHandler
at anywheresoftware.b4j.object.JavaObject$MethodCache.getMethod(JavaObject.java:366)
at anywheresoftware.b4j.object.JavaObject.RunMethod(JavaObject.java:119)
at anywheresoftware.b4j.object.JavaObject.RunMethodJO(JavaObject.java:138)
at abmaterial.ab.com.abmapplication._startserver(abmapplication.java:475)
at abmaterial.ab.com.main._appstart(main.java:504)
at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
at java.lang.reflect.Method.invoke(Method.java:498)
at anywheresoftware.b4a.BA.raiseEvent2(BA.java:90)
... 2 more

Cableguy · Oct 12, 2017

Did you also updated the www folder?
What version of b4j are you using?

MbedAndroid · Oct 12, 2017

version 5.9 b4j
no i didnt update the www folder, not needed as i took the demo projects of 3.5

Cableguy · Oct 12, 2017

Is the project drive a remote one? From the log it seems to be... The webapp is trying to access the project folders and is being unsuccessful

MbedAndroid · Oct 12, 2017

no, just local on my PC. I didnt uploaded it to my Pi's jet....
Just take the 3.5 download, start one of the app's like Demo, and you will get the errorlist

MbedAndroid · Oct 12, 2017

might be it's fixed in 3.7?
it''s related to the ABMapplication.bas i think, will have some tests

B4J Tutorial [ABMaterial] CustomJQPlot

Attachments

Expert

Expert

Expert

Expert

Expert

Expert

Attachments

Well-Known Member

Attachments

Expert

Expert

Well-Known Member

Expert

Well-Known Member

Expert

Well-Known Member

Well-Known Member

Expert

Well-Known Member

Expert

Well-Known Member

Well-Known Member

Similar Threads

Privacy & Transparency

Privacy & Transparency