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

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
 

Attachments

  • UOEChartKick.zip
    141.7 KB · Views: 629
  • UOEChartKickDemo.zip
    140.8 KB · Views: 595
Last edited:
Click to expand...

Mashiane

Expert
Licensed User
Longtime User
One can also set properties via code, for example, we update the width of the chart and then create a line chart with more data. The properties for the chart, e.g. title, xaxis title, y axis title are set up in the abstract designer.



B4X: 
Dim line As Map = 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)
    
    'line
    UOEChart1.Style = $"{ "width": "100%"}"$
    UOEChart1.AddXYMap(line).Refresh
 

Mashiane

Expert
Licensed User
Longtime User
By setting Donut = True in the abstract designer, your PieChart can become a donut chart. In this example, due to UOEChart1 already being defined as a linechart, we overwrite the chart properties by using .Clear and then setting the legend position to the right also. This will be part of version 1.01 onwards.



B4X: 
'donut
    UOEChart1.Clear
    UOEChart1.ChartType = UOEChart1.CT_PieChart
    UOEChart1.AddXYMap(CreateMap("Blueberry":44, "Strawberry":23,"Banana":22,"Apple":21,"Grape":13))
    UOEChart1.Donut = True
    UOEChart1.LegendPosition = "right"
    UOEChart1.refresh
 

Mashiane

Expert
Licensed User
Longtime User
One can also create and add a chart via code easily.. This is an area chart.



B4X: 
Dim ac As UOEChart
    ac.Initialize(Me,"ac","ac")
    ac.ChartType = ac.CT_AreaChart
    ac.Width = "100%"
    ac.XTitle = "Months"
    ac.YTitle = "Budget"
    ac.Title = "Area Chart of Budget"
    ac.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))
    ac.AddToParent("body")
 

Mashiane

Expert
Licensed User
Longtime User
Multiple Series

To be able to draw multiple series, each series should be coded between a-z letters. In the following example we add series a-e and give each a title. We then add data for each series using these coded letters. We also set the legend position to be at the bottom of the chart.



As we are setting the width of an abstract designer element, we use set style to set the width.

B4X: 
UOEChart1.AddSeries("a","Workout",UOEChart1.color_cyan)
    UOEChart1.AddSeries("b","Go to concert",UOEChart1.color_green)
    UOEChart1.AddSeries("c","Wash face",UOEChart1.color_indigo)
    UOEChart1.AddSeries("d","Call parents",UOEChart1.color_blue)
    UOEChart1.AddSeries("e","Eat breakfast",UOEChart1.color_brown)
    UOEChart1.AddSeriesXYMap("a", CreateMap("2013-02-10":3,"2013-02-17":3,"2013-02-24":3,"2013-03-03":1,"2013-03-10":4,"2013-03-17":3,"2013-03-24":2,"2013-03-31":3))
    UOEChart1.AddSeriesXYMap("b", CreateMap("2013-02-10":0,"2013-02-17":0,"2013-02-24":0,"2013-03-03":0,"2013-03-10":2,"2013-03-17":1,"2013-03-24":0,"2013-03-31":0))
    UOEChart1.AddSeriesXYMap("c", CreateMap("2013-02-10":0,"2013-02-17":1,"2013-02-24":0,"2013-03-03":0,"2013-03-10":0,"2013-03-17":1,"2013-03-24":0,"2013-03-31":1))
    UOEChart1.AddSeriesXYMap("d", CreateMap("2013-02-10":5,"2013-02-17":3,"2013-02-24":2,"2013-03-03":0,"2013-03-10":0,"2013-03-17":1,"2013-03-24":1,"2013-03-31":0))
    UOEChart1.AddSeriesXYMap("e", CreateMap("2013-02-10":3,"2013-02-17":2,"2013-02-24":1,"2013-03-03":0,"2013-03-10":2,"2013-03-17":2,"2013-03-24":3,"2013-03-31":0))
    UOEChart1.Style = $"{ "width": "100%"}"$
    UOEChart1.LegendPosition = UOEChart1.LP_bottom
    UOEChart1.refresh
 

Mashiane

Expert
Licensed User
Longtime User
You can also just change the chart type in a multiple series chart. This example is a bar chart however we change the xtitle and ytitle.



B4X: 
UOEChart1.ChartType = UOEChart1.ct_barchart
    UOEChart1.XTitle = "Budget"
    UOEChart1.YTitle = "Months"
    UOEChart1.Title = "Multiple Series Bar Chart"
    UOEChart1.AddSeries("a","Workout",UOEChart1.color_cyan)
    UOEChart1.AddSeries("b","Go to concert",UOEChart1.color_green)
    UOEChart1.AddSeries("c","Wash face",UOEChart1.color_indigo)
    UOEChart1.AddSeries("d","Call parents",UOEChart1.color_blue)
    UOEChart1.AddSeries("e","Eat breakfast",UOEChart1.color_brown)
    UOEChart1.AddSeriesXYMap("a", CreateMap("2013-02-10":3,"2013-02-17":3,"2013-02-24":3,"2013-03-03":1,"2013-03-10":4,"2013-03-17":3,"2013-03-24":2,"2013-03-31":3))
    UOEChart1.AddSeriesXYMap("b", CreateMap("2013-02-10":0,"2013-02-17":0,"2013-02-24":0,"2013-03-03":0,"2013-03-10":2,"2013-03-17":1,"2013-03-24":0,"2013-03-31":0))
    UOEChart1.AddSeriesXYMap("c", CreateMap("2013-02-10":0,"2013-02-17":1,"2013-02-24":0,"2013-03-03":0,"2013-03-10":0,"2013-03-17":1,"2013-03-24":0,"2013-03-31":1))
    UOEChart1.AddSeriesXYMap("d", CreateMap("2013-02-10":5,"2013-02-17":3,"2013-02-24":2,"2013-03-03":0,"2013-03-10":0,"2013-03-17":1,"2013-03-24":1,"2013-03-31":0))
    UOEChart1.AddSeriesXYMap("e", CreateMap("2013-02-10":3,"2013-02-17":2,"2013-02-24":1,"2013-03-03":0,"2013-03-10":2,"2013-03-17":2,"2013-03-24":3,"2013-03-31":0))
    UOEChart1.Style = $"{ "width": "100%"}"$
    UOEChart1.LegendPosition = UOEChart1.LP_bottom
    UOEChart1.refresh
 

Mashiane

Expert
Licensed User
Longtime User
It's also easier to create a stacked bar chart. You just set a few properties and you are all set.



B4X: 
UOEChart1.ChartType = UOEChart1.ct_barchart
    UOEChart1.Title = "Stacked Bar Chart"
    UOEChart1.AddSeries("a","Series A",UOEChart1.color_cyan)
    UOEChart1.AddSeries("b","Series B",UOEChart1.color_green)
    UOEChart1.AddSeriesXYMap("a", CreateMap("0":32,"1":46,"2":28,"3":21,"4":20,"5":13,"6":27))
    UOEChart1.AddSeriesXYMap("b", CreateMap("0":32,"1":46,"2":28,"3":21,"4":20,"5":13,"6":27))
    UOEChart1.Stacked = True
    UOEChart1.XTitle = "Budget"
    UOEChart1.YTitle = "Period"
    UOEChart1.Style = $"{ "width": "50%"}"$
    UOEChart1.Refresh
 

Mashiane

Expert
Licensed User
Longtime User
A stacked column chart...



B4X: 
'stacked
    UOEChart1.Clear
    UOEChart1.ChartType = UOEChart1.CT_ColumnChart
    UOEChart1.Title = "Stacked Column Chart"
    UOEChart1.AddSeries("a","Series A",UOEChart1.color_cyan)
    UOEChart1.AddSeries("b","Series B",UOEChart1.color_green)
    UOEChart1.AddSeriesXYMap("a", CreateMap("0":32,"1":46,"2":28,"3":21,"4":20,"5":13,"6":27))
    UOEChart1.AddSeriesXYMap("b", CreateMap("0":32,"1":46,"2":28,"3":21,"4":20,"5":13,"6":27))
    UOEChart1.Stacked = True
    UOEChart1.Style = $"{ "width": "50%"}"$
    UOEChart1.LegendPosition = UOEChart1.LP_right
    UOEChart1.Refresh
 

Mashiane

Expert
Licensed User
Longtime User


Just changing the chart area to area chart on post # 10, draws up a multiple-area-chart, easy peasy.

B4X: 
UOEChart1.clear
    UOEChart1.ChartType = UOEChart1.CT_AreaChart
    UOEChart1.Title = "Multiple Area Chart"
    UOEChart1.AddSeries("a","Workout",UOEChart1.color_cyan)
    UOEChart1.AddSeries("b","Go to concert",UOEChart1.color_green)
    UOEChart1.AddSeries("c","Wash face",UOEChart1.color_indigo)
    UOEChart1.AddSeries("d","Call parents",UOEChart1.color_blue)
    UOEChart1.AddSeries("e","Eat breakfast",UOEChart1.color_brown)
    UOEChart1.AddSeriesXYMap("a", CreateMap("2013-02-10":3,"2013-02-17":3,"2013-02-24":3,"2013-03-03":1,"2013-03-10":4,"2013-03-17":3,"2013-03-24":2,"2013-03-31":3))
    UOEChart1.AddSeriesXYMap("b", CreateMap("2013-02-10":0,"2013-02-17":0,"2013-02-24":0,"2013-03-03":0,"2013-03-10":2,"2013-03-17":1,"2013-03-24":0,"2013-03-31":0))
    UOEChart1.AddSeriesXYMap("c", CreateMap("2013-02-10":0,"2013-02-17":1,"2013-02-24":0,"2013-03-03":0,"2013-03-10":0,"2013-03-17":1,"2013-03-24":0,"2013-03-31":1))
    UOEChart1.AddSeriesXYMap("d", CreateMap("2013-02-10":5,"2013-02-17":3,"2013-02-24":2,"2013-03-03":0,"2013-03-10":0,"2013-03-17":1,"2013-03-24":1,"2013-03-31":0))
    UOEChart1.AddSeriesXYMap("e", CreateMap("2013-02-10":3,"2013-02-17":2,"2013-02-24":1,"2013-03-03":0,"2013-03-10":2,"2013-03-17":2,"2013-03-24":3,"2013-03-31":0))
    UOEChart1.Style = $"{ "width": "100%"}"$
    UOEChart1.LegendPosition = UOEChart1.LP_bottom
    UOEChart1.refresh
 

Mashiane

Expert
Licensed User
Longtime User
Setting BorderDash & BorderWidth

BorderDash - draws dash lines on the column chart.



B4X: 
UOEChart1.BorderDash = 10
    UOEChart1.Style = $"{ "width": "50%"}"$
    UOEChart1.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))
    UOEChart1.refresh

BorderWidth sets the border width in PieCharts



B4X: 
UOEChart3.BorderWidth = 10
    UOEChart3.AddXYMap(CreateMap("Blueberry":44,"Strawberry":23,"Banana":22,"Apple":21,"Grape":13)).Refresh
 

Mashiane

Expert
Licensed User
Longtime User
Using AddXYColor, one is able to specify any color that want for a point on a chart.


B4X: 
Dim pc As UOEChart
    pc.Initialize(Me,"pc","pc")
    pc.Width = "50%"
    pc.AddXYColor("Red",10,pc.color_red)
    pc.AddXYColor("Amber",20,pc.color_orange)
    pc.AddXYColor("Green",30,pc.color_green)
    pc.ChartType = pc.CT_PieChart
    pc.AddToParent("body")
 

Mashiane

Expert
Licensed User
Longtime User
Column Labels



I need to relook this chart, however..

B4X: 
UOEChart1.Clear
    UOEChart1.ChartType = UOEChart1.CT_ColumnChart
    UOEChart1.Title = "Column Labels"
    UOEChart1.AddSeries("a","Ratings",UOEChart1.color_blue)
    UOEChart1.AddSeries("b","Average",UOEChart1.color_green)
    UOEChart1.AddSeriesXYMap("a", CreateMap("Close Shave, A (1995)":112, _
    "Schindler's List (1993)":298, _
    "Wrong Trousers, The (1993)":118, _
    "Casablanca (1942)":243, _
    "Shawshank Redemption, The (1994)":283, _
    "Wallace \u0026 Gromit: The Best of Aardman Animation (1996)":67, _
    "Usual Suspects, The (1995)":267, _
    "Rear Window (1954)":209, _
    "Star Wars (1977)":583, _
    "12 Angry Men (1957)":125, _
    "Third Man, The (1949)":72, _
    "Some Folks Call It a Sling Blade (1993)":41, _
    "One Flew Over the Cuckoo's Nest (1975)":264, _
    "To Kill a Mockingbird (1962)":219, _
    "Citizen Kane (1941)":198, _
    "Silence of the Lambs, The (1991)":390, _
    "North by Northwest (1959)":179, _
    "Godfather, The (1972)":413, _
    "Secrets \u0026 Lies (1996)":162, _
    "Manchurian Candidate, The (1962)":131))
    UOEChart1.AddSeriesXYMap("b", CreateMap("Close Shave, A (1995)":"4.49", _
    "Schindler's List (1993)":"4.47", _
    "Wrong Trousers, The (1993)":"4.47", _
    "Casablanca (1942)":"4.46", _
    "Shawshank Redemption, The (1994)":"4.45", _
    "Wallace \u0026 Gromit: The Best of Aardman Animation (1996)":"4.45", _
    "Usual Suspects, The (1995)":"4.39", _
    "Rear Window (1954)":"4.39", _
    "Star Wars (1977)":"4.36", _
    "12 Angry Men (1957)":"4.34", _
    "Third Man, The (1949)":"4.33", _
    "Some Folks Call It a Sling Blade (1993)":"4.29", _
    "One Flew Over the Cuckoo's Nest (1975)":"4.29", _
    "To Kill a Mockingbird (1962)":"4.29", _
    "Citizen Kane (1941)":"4.29", _
    "Silence of the Lambs, The (1991)":"4.29", _
    "North by Northwest (1959)":"4.28", _
    "Godfather, The (1972)":"4.28", _
    "Secrets \u0026 Lies (1996)":"4.27", _
    "Manchurian Candidate, The (1962)":"4.26"))
    UOEChart1.Style = $"{ "width": "100%"}"$
    UOEChart1.LegendPosition = UOEChart1.LP_right
    UOEChart1.Refresh
 

Mashiane

Expert
Licensed User
Longtime User
Discrete Line Chart



B4X: 
UOEChart1.Clear
    UOEChart1.ChartType = UOEChart1.CT_LineChart
    UOEChart1.Title = "Discrete Line Chart"
    UOEChart1.AddXYMap(CreateMap("United States":44,"Germany":23,"Brazil":22,"Canada":21,"France":13))
    UOEChart1.Discrete = True
    UOEChart1.Style = $"{ "width": "60%"}"$
    UOEChart1.refresh
 

Mashiane

Expert
Licensed User
Longtime User


B4X: 
UOEChart1.Clear
    UOEChart1.ChartType = UOEChart1.CT_LineChart
    UOEChart1.Title = "Minutes Data"
    UOEChart1.AddXYMap(CreateMap("2016-05-23T01:51:00.000Z":0, _
    "2016-05-23T01:52:00.000Z":0, _
    "2016-05-23T01:53:00.000Z":0, _
    "2016-05-23T01:54:00.000Z":0, _
    "2016-05-23T01:55:00.000Z":0, _
    "2016-05-23T01:56:00.000Z":0, _
    "2016-05-23T01:57:00.000Z":0, _
    "2016-05-23T01:58:00.000Z":0, _
    "2016-05-23T01:59:00.000Z":0, _
    "2016-05-23T02:00:00.000Z":0, _
    "2016-05-23T02:01:00.000Z":0, _
    "2016-05-23T02:02:00.000Z":0, _
    "2016-05-23T02:03:00.000Z":0, _
    "2016-05-23T02:04:00.000Z":0, _
    "2016-05-23T02:05:00.000Z":0, _
    "2016-05-23T02:06:00.000Z":0, _
    "2016-05-23T02:07:00.000Z":0, _
    "2016-05-23T02:08:00.000Z":0, _
    "2016-05-23T02:09:00.000Z":0, _
    "2016-05-23T02:10:00.000Z":0, _
    "2016-05-23T02:11:00.000Z":0, _
    "2016-05-23T02:12:00.000Z":0, _
    "2016-05-23T02:13:00.000Z":0, _
    "2016-05-23T02:14:00.000Z":0, _
    "2016-05-23T02:15:00.000Z":0, _
    "2016-05-23T02:16:00.000Z":0, _
    "2016-05-23T02:17:00.000Z":0, _
    "2016-05-23T02:18:00.000Z":0, _
    "2016-05-23T02:19:00.000Z":0, _
    "2016-05-23T02:20:00.000Z":0, _
    "2016-05-23T02:21:00.000Z":0, _
    "2016-05-23T02:22:00.000Z":0, _
    "2016-05-23T02:23:00.000Z":0, _
    "2016-05-23T02:24:00.000Z":0, _
    "2016-05-23T02:25:00.000Z":0, _
    "2016-05-23T02:26:00.000Z":0, _
    "2016-05-23T02:27:00.000Z":0, _
    "2016-05-23T02:28:00.000Z":0, _
    "2016-05-23T02:29:00.000Z":0, _
    "2016-05-23T02:30:00.000Z":0, _
    "2016-05-23T02:31:00.000Z":0, _
    "2016-05-23T02:32:00.000Z":0, _
    "2016-05-23T02:33:00.000Z":0, _
    "2016-05-23T02:34:00.000Z":0, _
    "2016-05-23T02:35:00.000Z":0,"2016-05-23T02:36:00.000Z":0,"2016-05-23T02:37:00.000Z":0, _
    "2016-05-23T02:38:00.000Z":0,"2016-05-23T02:39:00.000Z":0,"2016-05-23T02:40:00.000Z":0, _
    "2016-05-23T02:41:00.000Z":0,"2016-05-23T02:42:00.000Z":0,"2016-05-23T02:43:00.000Z":0, _
    "2016-05-23T02:44:00.000Z":0,"2016-05-23T02:45:00.000Z":24,"2016-05-23T02:46:00.000Z":0, _
    "2016-05-23T02:47:00.000Z":0,"2016-05-23T02:48:00.000Z":0,"2016-05-23T02:49:00.000Z":0, "2016-05-23T02:50:00.000Z":8))
    UOEChart1.Style = $"{ "width": "60%"}"$
    UOEChart1.refresh
 
You must log in or register to reply here.

Similar Threads

Mashy Teaches WebApp/Website Development with BANanoVuetifyAD3 - The New Series
7 8 9
Replies
163
Views
42K
Mashiane
  • Article
B4J Tutorial [BANano] Creating PDF Documents with jsPDF using BANanoJsPDFAD
2
Replies
24
Views
4K
Mashiane
  • Article
B4J Library [BANanoVueMaterial]: The first complete opensource VueJS UX based framework for BANano
16 17 18
Replies
351
Views
52K
NGUYEN TUAN ANH
  • Sticky
  • Article
B4J Library [Web][BANano] Website/App/PWA library with Abstract Designer support
6 7 8
Replies
144
Views
95K
alwaysbusy
  • Article
B4J Library [B4X] [XUI] xChart Class and b4xlib
32 33 34
Replies
669
Views
114K
klaus
Menu
Log in
Register
Cookies are required to use this site. You must accept them to continue using the site. Learn more…