B4J Library [B4X] [XUI] xChart Class and b4xlib

The xChart Class does now also exist as a B4X libary.
The xChart.b4xlib and the xChart.xml files are attached.
You need to copy the xChart.b4xlib file to the AdditionlLibraries\B4X folder!
Don’t copy the xChart.xml file to the AdditionalLibraries folder, copy it in another folder for all b4xlib xml files.
Example: AdditionlLibraries\B4XlibXMLFiles
The xChart.xml file is for help purposes and is useful with the B4X Help Viewer or the B4XObjectBrowser.
The xChart.xml was generated with this tool: b4xlib - XML generation

Learning B4XViews and XUI, I wrote this CustomView xChart Class.
It works on all three products: B4A, B4i and B4J.
The xChart.bas file is located in the B4J and shared, relative link, in B4A and B4i.
The code is exactly the same, one class file, for all three products.

It is an evolution of Erels' Android Charts Framwork.

It has automatic scales, automatic text size according to the chart size.
These can also be set manually.

Demoprograms for all three products.
Tested on PC, Android Samsung S6, Samsung Tab S2, iPhone 6 and iPad.



EDIT: 2019.09.21 Version 4.1
Amended automatic scales issue.

EDIT: 2019.09.20 Version 4.0
Amended automatic scales issue.
Added ClearPoints method version 3.9

EDIT: 2019.02.24 Version 3.8
Added the ScalesValue property, asked in post#192, which allows to set custom automatic scale values
The default ScaleValues property is "1!2!2.5!10"
Another selectable possibiliy is "1!1.2!1.5!1.8!2!2.5!3!4!5!6!7!8!9!10"

EDIT: 2019.02.01 Version 3.7
Amended the bar mean line display problem.

EDIT: 2019.01.18 Version 3.6
Amended wrong results during the first drawing, Added Sleep(0) in Base_Resize
Amended scales for the YXChart type
Amended some minor bugs
Amended scales problem with manual scaling

EDIT: 2019.01.12 Version 3.4
Added following properties: Subtitle, SubtitleTextSize, SubtitleTextColor
Added BarValueOrientation property
Version. 3.3
Amended transparent color

EDIT: 2018.12.21 Version 3.2
Amended errors reported in posts #123 and #140

EDIT: 2018.12.05 Version 3.1
Amended problem with legend at bottom for Pie charts.

EDIT: 2018.11.22 Version 3.0
Amended problem with bar charts width many bars, and bar width too small < 4dip
Improved bar width calculation

EDIT: 2018.11.15 Version 2.9
Improved scale drawing
use of the MeanLineColor property also for single Bar charts

EDIT: 2018.11.14 Version 2.8
Amended Bar mean line property
Added number format for Bar mean line value

EDIT: 2018.11.05 Version 2.7
Improved x scale drawing, avoid text overlapping
Ammended an error

EDIT: 2018.11.04 Version 2.6
Added min, max and mean lines for single line charts.
Improved automatic scale calculation.
Amended some errors.

EDIT: 2018.01.03 Version 2.5
Improved sacle display
Added dynamic lines in the B4A demo project

EDIT: 2018.08.31 Version 2.4
Ameded error with Legend.IncludeLegend <> "NONE" And Items.Size > 0
Ameded error with DrawOuterFrame
Ameded an error for B4i (SubExists is different in B4i)

EDIT: 2018.07.30 Version 2.1
Added the NbXIntervals property
Added the SnapShot property
Added the Rotation property
Added the DrawOuterFramw property
Added a clip function to avoid lines being drawn outsides the grid
Added a Touch event for YXCharts returning the X and Y coordinates of the cursor

EDIT: 2018.07.19 Version 2.0
Added XSclaMnValue and XSclaMaxValue properties

EDIT: 2018.07.14 Version 1.9
Modified the data structure for YXChart to allow lines with different number of points.

EDIT: 2018.07.12 Version 1.8
Added RemovePointData(Index)
Added NbPoints property
Added dynamic chart example in the B4J project, the same is possible in B4A and B4i.

EDIT: 2018.05.21 Version 1.7
Added YXChart
Added a line for the mean value in single bar charts
You need to open and save the layout file again for projects with a previous version.

EDIT Version 1.6 hadn't been published
adapted the code with the new features of B4A V8.30+, B4i V 5.00+ and B4J V6.30+
use of the BitmapCreator library instead of the class
use of the Touch event of a B4XView and xui.Scale

EDIT: 2018.05.21 Version 1.5
Amended some bugs.
Changed the color properties from native colors to xui colors.
Added the YZeroAxis property.
Improved NumberFormat3 routine

EDIT: 2018.05.11 Version 1.4
Changed the TextColor property to TitleTextColor property.
Added gradient colors

EDIT: 2018.04.29 Version 1.2
Amended the ScaleTextColor not working, reported in post#47

EDIT: 2018.04.27 Version 1.1
Amended some bugs.
Added different line widths.
Added line point symbols.
Added display of values.

xCharts

Author: Klaus CHRISTL (klaus)
Version: 4.1

• xChart
  • Fields:
    • xBase As B4XView
  • Methods:
    • AddBar (Name As String, BarColor As Int) As String
      adds a bar
      only for Bar and StackedBar charts !
    • AddBarMultiplePoint (X As String, YArray As Double()) As String
      adds multibar points data
      only for Bar and StackedBar charts !
    • AddBarPointData (X As String, Y As Double) As String
      adds single bar point data
      only for Bar charts !
    • AddLine (Name As String, LineColor As Int) As String
      adds a line
      only for Line charts !
    • AddLine2 (Name As String, LineColor As Int, StrokeWidth As Int, PointType As String, Filled As Boolean, PointColor As Int) As String
      adds a line
      StrokeWidth = line thickness
      PointType, possible values: "NONE", "CIRCLE", "SQUARE", "TRIANGLE", "RHOMBUS", "CROSS+", "CROSSX"
      only for Line charts !
    • AddLineMultiplePoints (X As String, YArray As Double(), ShowTick As Boolean) As String
      adds multiline points data
      ShowTick = True displays the x value in the X axis
      only for Line charts !
    • AddLinePointData (X As String, Y As Double, ShowTick As Boolean) As String
      adds single line point data
      ShowTick = True displays the x value in the X axis
      only for Line charts !
    • AddPie (Name As String, Value As Float, Color As Int) As String
      Adds a pie slice item
      Color: 0 = random color
      only for Pie charts !
    • AddYXLine (Name As String, LineColor As Int, StrokeWidth As Int) As String
      adds a YXLine
      only for YXCharts !
    • AddYXLine2 (Name As String, LineColor As Int, StrokeWidth As Int, DrawLine As Boolean, PointType As String, Filled As Boolean, PointColor As Int) As String
      adds a YX line
      StrokeWidth = line thickness
      DrawLine = False allows to draw only the points
      PointType, possible values: "NONE", "CIRCLE", "SQUARE", "TRIANGLE", "RHOMBUS", "CROSS+", "CROSSX"
      only for YXCharts !
    • AddYXPoint (LineIndex As Int, X As Double, Y As Double) As String
      adds a point in the given lines
    • Class_Globals As String
      
    • ClearData As String
      clears all data, not the title nor axis names
    • DesignerCreateView (Base As Object, Lbl As Label, Props As Map) As String
      
    • DrawChart As String
      draws a chart
    • Initialize (Callback As Object, EventName As String) As String
      
    • IsInitialized As Boolean
      Tests whether the object has been initialized.
    • NumberFormat3 (Number As Double, MaxDigits As Int) As String
      formats a number with scientific notation
      MaxDigits = number max of digits
      Examples: 1.23456 / 12.3456 / 1234.56 / 123456 / 1.23E10
    • RemovePointData (Index As Int) As String
      removes the data of the point with the given index
    • SetBarMeanValueFormat (MinimumIntegers As Int, MaximumFractions As Int, MinimumFractions As Int, GroupingUsed As Boolean)
      sets a custom numberformat for the bar mean line value, values like NumberFormat2
      if set, it overides the default format
      to go back to the default format, comment the line defining the custom number format
  • Properties:
    • AutomaticScale As Boolean
      gets or sets the AutomaticScale property
      if True, the scales are automatically calculated to fill the chart, with 1, 2, 2.5, 5 standardized scales
    • AutomaticTextSizes As Boolean
      gets or sets the AutomaticTextSizes property
      if True, the text sizes are automatically calculated according to the chart size
    • AxisTextSize As Float
      gets or sets the AxisTextSize property
      setting this text size sets automatically AutomaticTextSizes = False
    • BarValueOrientation As Boolean
      gets or sets the BarValueOrientation property
      Possible values: VERTICAL, HORIZONTAL
    • ChartBackgroundColor
      sets the ChartBackgroundColor property
      the color must be an xui.Color
      Example code: <code>xChart1.ChartBackgroundColor = xui.Color_RGB(207, 220, 220)</code>
    • ChartType As String
      gets or sets the chart type
      Possible values: LINE, BAR, STACKED_BAR, PIE, YX_CHART
    • DisplayValues As Boolean
      gets or sets the DisplayValues property
      if True, displays the point values when moving the finger or the cursor on the chart.
    • DrawOuterFrame As Boolean
      gets or sets the DrawOuterFrame property of the Chart
      draws an outer frame around the chart
    • GradientColors As Boolean
      gets or sets the GradientColors property
    • GradientColorsAlpha As Int
      gets or sets the GradientColorsAlpha property
      values between 0 and 255
      setting this value, set automatically the GradientColors property to True
    • GridColor
      sets the GridColor property
      the color must be an xui.Color
      Example code: <code>xChart1.GridColor = xui.Color_RGB(169, 169, 169)</code>
    • GridFrameColor
      sets the GridFrameColor property
      the color must be an xui.Color
      Example code: <code>xChart1.GridFrameColor = xui.Color_Blue</code>
    • Height As Int
      gets or sets the Height property
    • IncludeBarMeanLine As Boolean
      gets or sets the IncludeBarMeanLine property
      possible only for single bar charts
    • IncludeLegend As String
      gets or sets the IncludeLegend property
      possible values: NONE, TOP_RIGHT, BOTTOM
    • IncludeMaxLine As Boolean
      gets or sets the IncludenMaxLine property, only for single line Chart
      inserts a line at the level of the max value
    • IncludeMeanLine As Boolean
      gets or sets the IncludeMeanLine property, only for single line Chart
      inserts a line at the level of the mean value
    • IncludeMinLine As Boolean
      gets or sets the IncludeMinLine property, only for single line Chart
      inserts a line at the level of the min value
    • IncludeValues As String
      gets or sets the IncludeValues property
      possible only for single bar charts or pie charts with TOP_RIGHT legend
    • Left As Int
      gets or sets the Left property
    • LegendTextSize As Float
      gets or sets the LegendTextSize property
      setting this text size sets automatically AutomaticTextSizes = False
    • MaxLineColor
      sets the single line chart MaxLineColor property
      the color must be an xui.Color
      Example code: <code>xChart1.MaxLineColor = xui.Color_Red</code>
    • MeanLineColor
      sets the single line chart MeanLineColor property
      the color must be an xui.Color
      Example code: <code>xChart1.MeanLineColor = xui.Color_RGB(182, 74, 26)</code>
    • MinLineColor
      sets the single line chart MinLineColor property
      the color must be an xui.Color
      Example code: <code>xChart1.MinLineColor = xui.Color_RGB(0, 128, 0)</code>
    • NbPoints As Int [read only]
      gets the number of points (read only)
    • NbXIntervals As Int
      gets or sets the NbYIntervals property, number of X axis intervals
      should be an even number, otherwise the 0 scale value might not be displayed
      valid only for YXCharts
    • NbYIntervals As Int
      gets or sets the NbYIntervals property, number of Y axis intervals
      should be an even number, otherwise the 0 scale value might not be displayed
    • Rotation As Double
      gets or sets the Rotation property of the Chart
      rotates the entire chart
    • ScaleTextColor
      sets the ScaleTextColor property
      the color must be an xui.Color
      Example code: <code>xChart1.ScaleTextColor = xui.Color_Blue</code>
    • ScaleTextSize As Float
      gets or sets the ScaleTextSize property
      setting this text size sets automatically AutomaticTextSizes = False
    • ScaleValues
      gets or sets the ScaleValues property
      it is a string with the different scale values separated by the exclamation mark.
      it must begin with 1! and end with !10
      Example: the default property 1!2!2.5!5!10
    • Snapshot As B4XBitmap [read only]
      returns a B4XBitmap object of the chart (read only)
    • Subtitle As String
      gets or sets the Subtitle property
    • SubtitleTextColor As Int
      gets or sets the SubtitleTextColor property
      the color must be an xui.Color
      Example code: <code>xChart1.SubitleTextColor = xui.Color_Black</code>
    • SubtitleTextSize As Float
      gets or sets the SubtitleTextSize property
      setting this text size sets automatically AutomaticTextSizes = False
    • Title As String
      gets or sets the Chart title
    • TitleTextColor
      sets the TitleTextColor property
      the color must be an xui.Color
      Example code: <code>xChart1.TitleTextColor = xui.Color_Black</code>
    • TitleTextSize As Float
      gets or sets the TitleTextSize property
      setting this text size sets automatically AutomaticTextSizes = False
    • Top As Int
      gets or sets the Top property
    • ValuesTextColor
      sets the ValuesTextColor property
      the color must be an xui.Color
      Example code: <code>xChart1.ValuesTextColor = xui.Color_Black</code>
    • ValuesTextSize As Float
      gets or sets the ValuesTextSize property
      setting this text size sets automatically AutomaticTextSizes = False
    • Visible As Boolean
      gets or sets the Visible property
    • Width As Int
      gets or sets the Width property
    • XAxisName As String
      gets or sets the X axis name
    • XScaleMaxValue As Double
      gets or sets the X scale max value
      works only with AutomaticScale = False
      setting XScaleMaxValue sets automatically AutomaticScale = False
      valid only for YXChats
    • XScaleMinValue As Double
      gets or sets the X scale min value
      works only with AutomaticScale = False
      setting XScaleMinValue sets automatically AutomaticScale = False
      valid only for YXChats
    • XScaleTextOrientation As String
      gets or sets the X scale text orientation
      Possible values: VERTICAL, HORIZONTAL, 45 DEGREES
    • YAxisName As String
      gets or sets the Y axis name
    • YScaleMaxValue As Double
      gets or sets the Y scale max value
      works only with AutomaticScale = False
      setting XScaleMaxValue sets automatically AutomaticScale = False
    • YScaleMinValue As Double
      gets or sets the Y scale min value
      works only with AutomaticScale = False
      setting XScaleMaxValue sets automatically AutomaticScale = False
    • YZeroAxis As Boolean
      gets or sets the YZeroAxis property for LINE charts
      if all values are positives, sets the lower Y scale to zero
      if all values are negatives, sets the upper Y scale to zero

 

Thanks @Erel and @klaus extremely great !!!

 

Thanks it is great ! Just a little advice , if possible , can you add gradient color selection to coloring the charts , it may seem a little thing but it changes the visuals of the graphs very much.

 

What is the prupose of gradiend colors ?
If it is to make the gradient colors in relation with the values, this would make sense for single bar charts.

 

Great Klaus (note: not "Great job, Klaus" )

 

Very nice! I'm developing a web system with php and code igniter and really would like to have these sort of tools there. But well, I will use when develop the mobile version

 

no it is just for a better visual . When you compare a single color filled pie chart to a gradient color chart , you can see that the gradient pie chart gives a better feeling of depth than regular color charts. For example: https://github.com/flot/flot/pull/853

AS I said earlier it is just for better visuals.

 

Big Thanks Klaus

 

I am 'old fashioned', I would never had thought about gradient colors for visual purpose.
I am much more concentrated on the values rather the aesthetics.
BTW, I would never use a donut chart, like the one in your link.

 

And these?

 

During programming, why not, but their lifetime would be very short.

 

I totally respect that Why I advised it is because I know your graph lib is a very powerful one with the values or on programming basis but the "feeling" of the apps are in visuals, I always had to use a webview to display charts from charts.js for example because when I use a graph lib I find here on the forum, it looks a little bit 'old fashioned" as you call

anyways , it is your lib I just said it would be good if it is easy for you to add
Thanks for the great lib

 

I am always open for constructive suggestions.
I will wait for Erels' cross platform gradients with BitmapCreator and look what could be done.

 

Thanks Klaus !

 

Many thanks, Klaus !!!
What a wonderful contribution.
It will be very useful for an application that I am developing to keep up with the progress of the company!

 

That's Great work!
Thank you Klaus, that is very useful !

 

Looks really great. Thank you Klaus.

Will I be able to use this in ABMaterial ?

 

I don't know, I have never used ABMaterial.