Wish [BANano] Any charts lib?

[Ilya G.]

Does BANano has any charts library?

 

[Michael1968]

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]

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

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, _
    "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..

 

[alwaysbusy]

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.

 

[Mashiane]

You can wrap whatever chart lbrary you want

And frappe charts are a very excellent piece. All the best!

 

[Kiffi]

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/frappe-charts@1.1.0/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