B4J Tutorial [ABMaterial] CustomJQPlot

Discussion in 'B4J Tutorials' started by Mashiane, Nov 27, 2016.

  1. Mashiane

    Mashiane Expert Licensed User

    More on AddData2Series examples...

    Additional1.png


    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)
     
    Last edited: Dec 6, 2016
    Erel and joulongleu like this.
  2. Mashiane

    Mashiane Expert Licensed User

    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)
     
    joulongleu likes this.
  3. Mashiane

    Mashiane Expert Licensed User

    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)
    AnotherDonut.png
     
    joulongleu likes this.
  4. Mashiane

    Mashiane Expert Licensed User

    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
    BubbleImportance.png
     
    joulongleu likes this.
  5. Mashiane

    Mashiane Expert Licensed User

    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
    BlockChart.png
     
  6. Mashiane

    Mashiane Expert Licensed User

    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!
     

    Attached Files:

    joulongleu and Harris like this.
  7. MbedAndroid

    MbedAndroid Active Member Licensed User

    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?
     

    Attached Files:

    joulongleu likes this.
  8. Mashiane

    Mashiane Expert Licensed User

    I will look into it and revert back...
     
    joulongleu likes this.
  9. Cableguy

    Cableguy Expert Licensed User

    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!
     
    joulongleu likes this.
  10. MbedAndroid

    MbedAndroid Active Member Licensed User

    i checked this on 3.2
     
    joulongleu likes this.
  11. Mashiane

    Mashiane Expert Licensed User

    @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.
     
    joulongleu likes this.
  12. MbedAndroid

    MbedAndroid Active Member Licensed User

    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:eek: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:eek: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:eek:ejs.Server:main: Started @552ms
    2017-10-12 09:02:39.479:INFO:eek: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:eek:ejs.session:main: Stopped scavenging
    2017-10-12 09:02:39.481:INFO:eek: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
     
    joulongleu likes this.
  13. Cableguy

    Cableguy Expert Licensed User

    joulongleu and Mashiane like this.
  14. MbedAndroid

    MbedAndroid Active Member Licensed User

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

    MbedAndroid Active Member Licensed User

    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:eek: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:eek: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:eek:ejs.Server:main: Started @4708ms
    2017-10-12 10:44:54.320:INFO:eek: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:eek:ejs.session:main: Stopped scavenging
    2017-10-12 10:44:54.322:INFO:eek: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
     
    joulongleu likes this.
  16. Cableguy

    Cableguy Expert Licensed User

    Did you also updated the www folder?
    What version of b4j are you using?
     
    joulongleu likes this.
  17. MbedAndroid

    MbedAndroid Active Member Licensed User

    version 5.9 b4j
    no i didnt update the www folder, not needed as i took the demo projects of 3.5
     
    joulongleu likes this.
  18. Cableguy

    Cableguy Expert Licensed User

    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
     
    joulongleu likes this.
  19. MbedAndroid

    MbedAndroid Active Member Licensed User

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

    MbedAndroid Active Member Licensed User

    might be it's fixed in 3.7?
    it''s related to the ABMapplication.bas i think, will have some tests
     
    joulongleu likes this.
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