B4J Library [BANano] ChartJS charts with 1 line of code using UOECharts

Ola

This lib is a wrap of this github

The chart framework that has been adopted has been Chart.JS and one can easily create a chart with 1 line of code, as simple as..

'load the layout to the page
BANano.LoadLayout("#body","vCharts")
  
'line chart
UOEChart1.AddXYMap(CreateMap("2017-01-01": 11, "2017-01-02": 6)).Refresh

The UOEChartKick.zip file is the library source code, open the project file with B4J, run it and then compile as library.
The UOEChartKickDemo is the demo as explained in this thread.

This is my first abstract designer based library for BANano, so to use the charts, one needs to use the abstract designer.

1. Open Internal Designer
2. Click on Add View > Custom View > UOEChart
3. Update the properties of the chart
4. Generate members
5. Add the map data and Refresh the chart.

In this example I have created different charts and these are displayed one after another as I am not using a grid in this example and have not set the top/bottom variables.

Line Chart

'line
    UOEChart1.AddXYMap(CreateMap("2017-01-01": 11, "2017-01-02": 6)).Refresh

Bar Chart

'bar chart
    UOEChart2.AddXYMap(CreateMap("Work": 32, "Play": 1492)).Refresh

 

[Marlou Fin]

Hi Mashiane,

This is great! Is this compatible with B4A?

Thanks,
Marlou

 

[Mashiane]

Is this compatible with B4A?

You can wrap it to a webview to work with B4A.

 

[Marlou Fin]

Hi Mashiane,

Can you explain a little bit about wrapping it in webview? Is this webview in b4a or in b4j?

Thanks,
Marlou

 

[Mashiane]

There is an article I wrote here about wrapping html, css and javascript to a webview it should be very easy to follow.

I believe there are other potent charting libraries for b4a here in the forum, have you checked perhaps they don’t meet your needs for what you need to do?

 

[Marlou Fin]

Hi Mashiane,

Ok, I will check other chart for b4a but I will try also to wrap this in webview.

Thanks,
Marlou

 

[LJG]

Thank you Mashiane, this looks very interesting. I downloaded the library (and installed it) and I tried to run the demo, but I don't see the required uoechartkick.js in any of the folders I downloaded. Any help would be much appreciated, thank you.

I get the following error:

Building C:\Users\DT911\DOCUME~1\B4J PROJECTS\CHARTS\UOEChartKickDemo\Demo\Objects\UOEChartKickDemo\scripts\app.js
Loading layout vcharts...
Loading library: C:\Program Files (x86)\Anywhere Software\B4J\AdditionalLibraries\B4J\uoechartkick.xml
C:\Program Files (x86)\Anywhere Software\B4J\AdditionalLibraries\B4J\uoechartkick.js is missing!
C:\Program Files (x86)\Anywhere Software\B4J\AdditionalLibraries\B4J\uoechartkick.dependsOn is missing!
java.io.FileNotFoundException: C:\Program Files (x86)\Anywhere Software\B4J\AdditionalLibraries\B4J\uoechartkick.dependsOn (The system cannot find the file specified)
    at java.base/java.io.FileInputStream.open0(Native Method)
    at java.base/java.io.FileInputStream.open(FileInputStream.java:219)
    at java.base/java.io.FileInputStream.<init>(FileInputStream.java:157)
    at java.base/java.io.FileReader.<init>(FileReader.java:75)
    at com.ab.banano.BANano.a(Unknown Source)
    at com.ab.banano.BANano.a(Unknown Source)
    at com.ab.banano.BANano.a(Unknown Source)
    at com.ab.banano.BANano.Build(Unknown Source)
    at b4j.example.main._appstart(main.java:103)
    at java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    at java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
    at java.base/jdk.internal.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
    at java.base/java.lang.reflect.Method.invoke(Method.java:566)
    at anywheresoftware.b4a.shell.Shell.runMethod(Shell.java:632)
    at anywheresoftware.b4a.shell.Shell.raiseEventImpl(Shell.java:234)
    at anywheresoftware.b4a.shell.Shell.raiseEvent(Shell.java:167)
    at java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    at java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
    at java.base/jdk.internal.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
    at java.base/java.lang.reflect.Method.invoke(Method.java:566)
    at anywheresoftware.b4a.BA.raiseEvent2(BA.java:91)
    at anywheresoftware.b4a.shell.ShellBA.raiseEvent2(ShellBA.java:98)
    at anywheresoftware.b4a.BA.raiseEvent(BA.java:78)
    at b4j.example.main.start(main.java:38)
    at javafx.graphics/com.sun.javafx.application.LauncherImpl.lambda$launchApplication1$9(LauncherImpl.java:846)
    at javafx.graphics/com.sun.javafx.application.PlatformImpl.lambda$runAndWait$12(PlatformImpl.java:455)
    at javafx.graphics/com.sun.javafx.application.PlatformImpl.lambda$runLater$10(PlatformImpl.java:428)
    at java.base/java.security.AccessController.doPrivileged(Native Method)
    at javafx.graphics/com.sun.javafx.application.PlatformImpl.lambda$runLater$11(PlatformImpl.java:427)
    at javafx.graphics/com.sun.glass.ui.InvokeLaterDispatcher$Future.run(InvokeLaterDispatcher.java:96)
    at javafx.graphics/com.sun.glass.ui.win.WinApplication._runLoop(Native Method)
    at javafx.graphics/com.sun.glass.ui.win.WinApplication.lambda$runLoop$3(WinApplication.java:174)
    at java.base/java.lang.Thread.run(Thread.java:834)
Copying CSS files to WebApp assets...
Copying Javascript files to WebApp assets...
Building C:\Users\DT911\DOCUME~1\B4J PROJECTS\CHARTS\UOEChartKickDemo\Demo\Objects\UOEChartKickDemo\index.html
Done! Live Code Swapping is active...

 

[LJG]

[Solved: Missing Files] For some reason the missing uoechartkick.js and uoechartkick.dependsOn files were placed outside of my B4J Additional Libraries folder after compiling (while the main library compilation was properly inside the B4J Additional Libraries folder).