Wish [BANano] Any charts lib?

Discussion in 'B4J Bugs & Wishlist' started by GanjaKyp, Apr 7, 2019.

Tags:
  1. GanjaKyp

    GanjaKyp Member

    Does BANano has any charts library?
     
    joulongleu likes this.
  2. Michael1968

    Michael1968 Active Member Licensed 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
     
    joulongleu likes this.
  3. Mashiane

    Mashiane Expert Licensed 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

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

    Code:
    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: Apr 16, 2019
  4. alwaysbusy

    alwaysbusy Expert Licensed 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: Apr 8, 2019
    inakigarm and Mashiane like this.
  5. Mashiane

    Mashiane Expert Licensed User

    And frappe charts are a very excellent piece. All the best!
     
    Last edited: Apr 8, 2019
  6. Kiffi

    Kiffi Well-Known Member Licensed User

    Here is a simple FrappeChart-Example:

    Code:
    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(2540303585217, -4)))
      DataSets.Add(CreateMap(
    "name""Another Set""type""line""values"Array As Int(2550, -101518322714)))
     
      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
     
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice