B4J Tutorial [ABMaterial] CustomJQPlot

Mashiane · Dec 6, 2016

More on AddData2Series examples...

Code:

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.

Code:

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...

Code:

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.

Code:

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

Code:

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

Code:

ddSeriesDataOHLC, AddSeriesDataOHLCCompare, AddSeriesDateData

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

The

Code:

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:INFO

ejs.AbstractNCSARequestLog:main: Opened D:\ABMATERIAL\3.50\DragDrop\Objects\logs\b4j-2017_10_12.request.log
2017-10-12 09:02:39.472:INFO

ejs.AbstractConnector:main: Started ServerConnector@18c1321{HTTP/1.1,[http/1.1]}{0.0.0.0:51042}
2017-10-12 09:02:39.472:INFO

ejs.Server:main: Started @552ms
2017-10-12 09:02:39.479:INFO

ejs.AbstractConnector:main: Stopped ServerConnector@18c1321{HTTP/1.1,[http/1.1]}{0.0.0.0:51042}
2017-10-12 09:02:39.479:INFO

ejs.session:main: Stopped scavenging
2017-10-12 09:02:39.481:INFO

ejsh.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:INFO

ejs.AbstractNCSARequestLog:main: Opened D:\ABMATERIAL\3.50\Demo\Objects\logs\b4j-2017_10_12.request.log
2017-10-12 10:44:54.311:INFO

ejs.AbstractConnector:main: Started ServerConnector@5eaa29{HTTP/1.1,[http/1.1]}{0.0.0.0:51042}
2017-10-12 10:44:54.312:INFO

ejs.Server:main: Started @4708ms
2017-10-12 10:44:54.320:INFO

ejs.AbstractConnector:main: Stopped ServerConnector@5eaa29{HTTP/1.1,[http/1.1]}{0.0.0.0:51042}
2017-10-12 10:44:54.320:INFO

ejs.session:main: Stopped scavenging
2017-10-12 10:44:54.322:INFO

ejsh.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