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.

UOEChartKickDesigner.png


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

UOELineChart.png



B4X: 
'line
    UOEChart1.AddXYMap(CreateMap("2017-01-01": 11, "2017-01-02": 6)).Refresh


Bar Chart

UOEBarChart.png


B4X: 
'bar chart
    UOEChart2.AddXYMap(CreateMap("Work": 32, "Play": 1492)).Refresh
 

Attachments

  • UOEChartKick.zip
    141.7 KB · Views: 708
  • UOEChartKickDemo.zip
    140.8 KB · Views: 674
Last edited:
Click to expand...
Mashiane

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.

UOELineChart1.png


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

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.

UOEChartDonut.png


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

Mashiane

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

UOEAreaChartCode.png


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

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.

UOELineSeries.png


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

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.

UOEMultipleSeriesBar.png


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

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.

UOEStackedBar.png


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

Mashiane

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

UOEStackedColumn.png


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

Mashiane

Expert
Licensed User
Longtime User
UOEMultipleArea.png


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

Mashiane

Expert
Licensed User
Longtime User
Setting BorderDash & BorderWidth

BorderDash - draws dash lines on the column chart.

UOEBorderDash.png


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

UOEBorderWidth.png


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

Mashiane

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


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

Mashiane

Expert
Licensed User
Longtime User
Column Labels

UOEColumnLabels.png


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

Mashiane

Expert
Licensed User
Longtime User
UOEMinutes.png


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

C
Wish Show global variable comment in hint/tooltip
Replies
0
Views
828
Chris2
C
makis_best
  • Question
Android Question [SOLVED] [B4X] MainPage FirstTime
2
Replies
24
Views
8K
Erel
Erel
luc-dev
  • Question
B4J Question [B4X] XOR string encoding/decoding
Replies
11
Views
4K
luc-dev
luc-dev
Mashiane
  • Article
B4J Tutorial [BANano] Exploring BANanoEvents
Replies
1
Views
2K
Mashiane
Mashiane
Harris
  • Article
B4J Tutorial [ABMaterial] For Dummies (beginner lessons)
2
Replies
22
Views
32K
Harris
Harris
Top