Wish [BANano] Any charts lib?


Active Member
Licensed User
Longtime User
Hi GanjaKyp,

I'm looking for a chart library too.

for a project i want to integrate chart.js
but I have no time at the moment
I think it is no problem for Kiffi or Alain to integrate a Chart Library



Licensed User
Longtime User
Update: 16 April 2019

UOEChartKick Library for BANano

I found this a couple of weeks ago, https://github.com/ankane/chartkick.js I will be posting a class soon that one can use in BANano. It wraps Chart.Js and other charting frameworks too and one can do a chart with one line of code *what they say*. I find it to be very nice actually.


Thing is its currently not responsive so I'm trying to figure that out and then will decouple it

Dim cjs As UOENowChartJS
    cjs.Initialize(App,"cjs2", App.EnumChartType.LineChart, "300px")
    cjs.AddSeries("a", "Mashy", App.EnumColors.red)
    cjs.AddSeriesXY("a", "'2013-02-10'", "11")
    cjs.AddSeriesXY("a", "'2013-02-11'", "6")
    cjs.AddSeriesXY("a", "'2013-02-12'", "3")
    cjs.AddSeriesXY("a", "'2013-02-13'", "2")
    cjs.AddSeriesXY("a", "'2013-02-14'", "5")

or one can use a map to draw the xy co-ordinates..

cjs.ChartType = App.EnumChartType.LineChart
    cjs.AddXYMap(CreateMap("2013-02-10":11,"2013-02-11":6,"2013-02-12":3,"2013-02-13":2,"2013-02-14":5,"2013-02-15":3, _
    "2013-02-16":8,"2013-02-17":6,"2013-02-18":6,"2013-02-19":12,"2013-02-20":5,"2013-02-21":5,"2013-02-22":3, _
    cjs.BackgroundColor = "#eee"
    cjs.zoomType = "x"
    cjs.hAxis = "Time"
    cjs.vaxis = "Count"
    cjs.Legend.position = App.EnumPosition.top

The idea is to have the data draw from db records too..
Last edited:


Licensed User
Longtime User
You can wrap whatever chart lbrary you want (like e.g. https://frappe.io/charts should be easy to do). Make them Designer Views and you can just drag and drop them in your webapp/website using the B4J abstract designer and use the Abstract Designer properties.

Check out Kiffi's excellent example for how he did it for the KendoUI wrapper (https://www.b4x.com/android/forum/threads/banano-kendo-ui-core-wrapper.103257). It takes some 'typing' work, but it is pretty routine to make such views. And they speed up creating future projects a lot.
Last edited:


Well-Known Member
Licensed User
Longtime User
Here is a simple FrappeChart-Example:

Sub Process_Globals
  Private BANano As BANano
End Sub

Sub AppStart (Form1 As Form, Args() As String)

  BANano.Initialize("BANanoFrappe", "BANanoFrappe", DateTime.Now)
  BANano.UseServiceWorker = False
  BANano.HTML_NAME = "index.html"
  BANano.Header.Title = "BANanoFrappe"

  BANano.Header.AddJavascriptFile("https://cdn.jsdelivr.net/npm/[email protected]/dist/frappe-charts.min.iife.js")

  ' ###

  BANano.JAVASCRIPT_NAME = "app.js"

  BANano.Build("C:\inetpub\wwwroot\BANano\") ' <- adjust to your needs!


End Sub

Sub BANanoFrappe_Ready()

  Dim HTML As String = $"
    <div id="chart" style="width:800px"></div>
  ' ###
  Dim ChartData As Map = CreateMap()
  Dim Labels As List
  Labels.AddAll(Array As String("12am-3am", "3am-6pm", "6am-9am", "9am-12am", "12pm-3pm", "3pm-6pm", "6pm-9pm", "9am-12am"))

  ChartData.Put("labels", Labels)
  Dim DataSets As List
  DataSets.Add(CreateMap("name": "Some Data",   "type": "bar",  "values": Array As Int(25, 40, 30, 35, 8, 52, 17, -4)))
  DataSets.Add(CreateMap("name": "Another Set", "type": "line", "values": Array As Int(25, 50, -10, 15, 18, 32, 27, 14)))
  ChartData.Put("datasets", DataSets)
  Dim Chart As BANanoObject
  Chart.Initialize2("frappe.Chart", Array("#chart", CreateMap("title" : "My Awesome Chart", _
                                                              "data" : ChartData, _
                                                              "type" : "axis-mixed", _
                                                              "colors" : Array("#7cd6fd", "#743ee2"), _
                                                              "height" : "600")))
End Sub

Greetings ... Peter