Wish [BANano] Any charts lib?

Michael1968

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

Michael1968
 

Mashiane

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

Chartx.png


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

B4X:
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")
    Page.Content.AddBlock(2,1,cjs.tostring)
    cjs.Refresh

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

B4X:
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, _
    "2013-02-23":1,"2013-02-24":10,"2013-02-25":1,"2013-02-26":3,"2013-02-27":2,"2013-02-28":3,"2013-03-01":2,"2013-03-02":8))
    cjs.BackgroundColor = "#eee"
    cjs.zoomType = "x"
    cjs.hAxis = "Time"
    cjs.vaxis = "Count"
    cjs.Legend.position = App.EnumPosition.top
    'cjs.refresh

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

alwaysbusy

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

Kiffi

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

B4X:
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!

  ExitApplication

End Sub

Sub BANanoFrappe_Ready()

  Dim HTML As String = $"
    <div id="chart" style="width:800px"></div>
  "$
 
  BANano.GetElement("body").Append(HTML)
 
  ' ###
 
  Dim ChartData As Map = CreateMap()
 
  Dim Labels As List
  Labels.Initialize
  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.Initialize
 
  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
 
Top