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

Mashiane · Apr 16, 2019

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

B4X:

'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

B4X:

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

Bar Chart

B4X:

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

Marlou Fin · Apr 22, 2019

Hi Mashiane,

This is great! Is this compatible with B4A?

Thanks,
Marlou

Mashiane · Apr 22, 2019

Marlou Fin said:
Is this compatible with B4A?

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

Marlou Fin · Apr 23, 2019

Hi Mashiane,

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

Thanks,
Marlou

Mashiane · Apr 23, 2019

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 · Apr 25, 2019

Hi Mashiane,

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

Thanks,
Marlou

LJG · Nov 14, 2020

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:

Missing uoechartkick.js (?):

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 · Nov 14, 2020

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

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

Attachments

Marlou Fin

Member

Mashiane

Expert

Marlou Fin

Member

Mashiane

Expert

Marlou Fin

Member

LJG

Member

LJG

Member

Similar Threads

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

Attachments

Member

Expert

Member

Expert

Member

Member

Member

Similar Threads

Privacy & Transparency

Privacy & Transparency