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

Current version 7.7
NEW since version 7.4
Two new chart types have been added: AREA and STACKED_AREA

The xChart Class does exist as a class and a B4X libary.
It works on all three products: B4A, B4i and B4J.
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.
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 platforms.

It is an evolution of Erels' Android Charts Framwork.

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

Demo projects for all three platforms.
Tested on PC, Android Samsung S10, Samsung Tab S2, iPhone 8 and iPad.
xChartDemoV7_7.zip One project for each product, the xChart class module in B4J folder with a relative link in the two other products.
B4XPagesxChartDemoV7_7.zip A B4XPages cross platform project using the xChart library, you need to copy the xChart.b4xlib file into your AdditionalLibraries\B4X folder.
B4JLogScaleV7_7.zip B4J project showing the logarithmic scales, it uses also the xChart library.
xChart.b4xlib The xChart B4X library file. You must copy it into your your AdditionalLibraries\B4X folder.
xChart.bas The Class module.
xChart.xml Help file, it is useful with the B4X Help Viewer or the B4XObjectBrowser.
Don’t copy the xChart.xml file to the AdditionalLibraries folder! Look above.
I left xChartDemoV7_3.zip file to be able togo back if there is any trouble.

upload_2018-11-4_22-43-18.gif


1581410627802.png

This image is from the B4JLogScale demo project, there is only a B4J project to show logarithmic scale examples.
The principles is the same for the two other platforms.

1585160964707.png
1585161014808.png


4 lines with 4 different scales the same lines with the same scale.

1605708673390.png
1615809329931.png


Radar type chart

1611085864642.png
1611086248441.png

H_BAR chart type H_STACKED_BAR chart type

The horizontal scale can be either on bottom, default, or on top.
The vertical scale values can go from bottom to top, default, or from top to bottom.

1613997380236.png


YX_CHART with display of the cursor position.
When the curor is on a point, the cross-hair color changes to the curve color and a circle is drawn at the point if no points are drawn.

1629796196550.png
1629796208950.png


AREA and STACKED_AREA chart

EDIT: 2021.09.20 Version 7.7
Amended problem with values display in Bar charts
Amended problem with display of values in YXCharts with logarithmic scales (version 7.6)

EDIT: 2021.08.30 Version 7.5
Added ValuesBackgroundColor property.
Amended LegendTextColor when displayed on bottom.

EDIT: 2021.08.24 Version 7.4
Added AREA and STACKED_AREA charts
Added AreaFillAlphaValue for the fill color for RADAR, AREA and STACKED_AREA charts
Amended some bugs

EDIT: 2021.08.03 Version 7.3
Amended problem with cursor when clicking on a chart with no data.
Added check in SetZoomIndexes for values out of range.

EDIT: 2021.05.16 Version 7.2
Notes:
The SubitleTextColor property has been set to SubtitleTextColor
The HBarsXScaleOnTop property has been set to HChartsXScaleOnTop
The HBarsTicksTopDown property has been set to HChartsTicksTopDown

Added H_LINE, horizontal line chart type
Changed the HBarsXScaleOnTop property to HChartsXScaleOnTop
Changed the HBarsTicksTopDown property to HChartsTicksTopDown
Added ReverseYScale property
Added SetZoomIndexes(BeginIndex As Int, EndIndex As Int) method
Added UnZoom method
Added JumpTo(Index As InT) method, jumps to a giev undex when the chart is zoomed
Added ScalesOnZoomedPart properts
Version 7.1
Changed SubitleTextColor property typo to SubtitleTextColor
Amended display legend position
Improved legend display position for Radar charts
Added ReverseYScale property for YXCharts

EDIT: 2021.03.15 Version 7.0
Added MissingDataValue Property, used for missing data
Added manual scales for Bar and Radar charts
Added AddRadar2 method which allows to add point shapes similar to AddLine2
Added GetMaxNumberBars method
Improved Bar values display, number of digits

Version 6.9
Updated the descriptions for the Designer
Improved BAR chart drawing
Amended error in drawing points in YX_CHART charts

EDIT: 2021.02.28 Version 6.8
Amended display of 0 values in BAR charts.

EDIT: 2021.02.22 Version 6.7
Added two methods:
AddHorizontalLine(Value) adds a line which is drawn at the given value
RemoveHorizontalLine(Value) removes the line from the List
Added five properties:
YXChartDisplayValues, displays the coordinates of the cursor positions on YXCharts
YXChartDisplayPosition, position of the display on the YXChart.
YXChartDisplayCrossHair, displays the cursor positions as a cross hair cursor on YXCharts
YXChartCrossHairColor, color for the cross hair cursor on YXCharts
YXChartCrossHairDeltaY, the horizontal line of the cross hair cursor is shifted topwards by the given value only for YX_CHARTs
this is useful to not cover the horizontal cursor line with the finger

EDIT: 2021.01.19 Version 6.6
Added horizontal bar types H_BAR and H_STACKED_BAR, the bars are displayed horizontally instead of vertically.
Added HBarsXScaleOnTop property, displays the horizontal scale on top instead on bottom, only for for H_BAR and H_STACKED_BAR charts.
Added HBarsTicksTopDown property, displays the tick values from top to bottom, only for for H_BAR and H_STACKED_BAR charts.
Version 6.5
Added CursorTouch(Action As Int, CursorIndex As Int) event
Added KeepDisplayValues property, allows to keep the values display displayed after Touch_Up.
Added ClearDisplayValues method, allows to clear the values display.
Set Points (point data) and Items (item data, Lines, Bars etc) lists as Public

EDIT: 2020.11.18 Version 6.4
Added Radar type charts.

EDIT: 2020.09.08 Version 6.3
Amended problem with manual scale and all values = 0
Added PieStartAngle property

EDIT: 2020.08.15 Version 6.1
Added LagendTextColor property
Improved SubTitle display

EDIT: 2020.06.24 Version 5.9
Amended problem of legends not for displayed in Pie charts in the top right corner.

EDIT: 2020.06.24 Version 5.8
Amended problem with TitleTextColor for Pie charts.

EDIT: 2020.06.24 Version 5.7
Updated the Tag property according to Erels recommendation:
https://www.b4x.com/android/forum/t...lv-or-any-other-container.117992/#post-738358
Amended error with Round2

EDIT: 2020.04.29 Version 5.6
Improved BAR chart display with many bars.

EDIT: 2020.04.29 Version 5.5
Added DrawXScale and DrawYScale properties

EDIT: 2020.04.22 Version 5.4
Amended bug with manual logarithmic scales

EDIT: 2020.04.21 Version 5.3
Added the four properties below.
- DrawGridFrame As Boolean, True by default
- DrawHorizontalGridLines As Boolean, True by default
- DrawVerticallGridLines As Boolean, True by default
- YZeroAxisHighlight As Boolean, True by default

EDIT: 2020.04.01 Version 5.1
Replaced Props.Get by Props.GetDefault to avoid backward compatibilities.

EDIT: 2020.04.01 Version 5.0
Amended scale error when min and max values are the same.

EDIT: 2020.03.31 Version 4.9
Amended error with different scales.

EDIT: 2020.03.25 'Version 4.8
Added limit of Y scale values if there is not enough place
Improved values display layout
Added different scales for 2 up to 4 lines in LINE and YX_CHART charts.
You need to open the Designer and close it to save the layout file to make the new properties active.

EDIT: 2020.03.19 Version 4.7
Set Base_Resize routine to Publc
Amended the Width and Height property setting.

EDIT: 2020.02.29 Version 4.6
Added the AxisTextColor property
You need to open the Designer and close it to save the layout file to make the new properties active.

EDIT: 2020.02.23 Version 4.5
Added DrawEmptyChart method.
Amended error in the ClearPoints method, YXPoints were not cleared.

EDIT: 2020.02.11 Version 4.4
You need to open the Designer and close it to save the layout file to make the new properties active.
Added logarithmic Y scales for LINE charts
Added logarithmic Y and/or X scales for YX_CHART charts
Added ValuesShowPosition property, can be upper left and new also upper right
Version 4.3 2020.01.07
Improved Bar width calculation

EDIT: 2019.11.05 Version 4.2
Amended Draw MinLine with YZeroAxis.
Added PiePercentageNbFractions property

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: 7.3
  • xChart
    • Events:
      • CursorTouch (Action As Int, CursorIndex As Int)
      • Touch (X As Double, Y As Double)
    • Fields:
      • xBase As B4XView
      • Items As List
        Items are Bars, Lines etc.
      • Points As List
        Points contain the point coordinates.
    • 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())
        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 !
      • AddHorizontalLine (Value As Double, Color As Int, StrokeWidth As Int, DisplayValue As Boolean)
        Adds a horizontal line at the given Y scale value with the given color and width.
        If a line with this value already exist, updates the Color and StrokeWidth.
        Valid for BAR and HBAR charts and LINE charts only with same Y scales.
        Valid also for H_BAR charts charts only with same Y scales, but the line is vertical.
      • AddLine (Name As String, LineColor As Int)
        adds a line
        only for Line charts !
      • AddLine2 (Name As String, LineColor As Int, StrokeWidth As Int, PointType As String, PointFilled 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)
        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 !
      • AddRadar (Name As String, Color As Int, SrokeWidth As Int, Filled As Boolean)
        adds a radar
        only for Radar charts !
      • AddRadar2 (Name As String, Color As Int, SrokeWidth As Int, Filled As Boolean, PointType As String, PointFilled As Boolean, PointColor As Int)
        adds a radar
        PointType, possible values: "NONE", "CIRCLE", "SQUARE", "TRIANGLE", "RHOMBUS", "CROSS+", "CROSSX"
        only for Radar charts !
      • AddRadarMultiplePoint (X As String, YArray As Double)
        adds multiradar points data
        only for Radar charts !
      • AddRadarPointData (X As String, Y As Double)
        adds single radar data
        only for Radar 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, PointFilled 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
      • Base_Resize (Width As Double, Height As Double)
        resizes the Chart with new Width and Height
      • ClearData
        clears all data, not the title nor axis names
      • ClearDisplayedValues
        Clears the cursor and displayed values
        useful if KeepDisplayValues was set to True
      • ClearPoints
        clears all points, not the title nor axis names
      • DrawChart
        draws a chart
      • DrawEmptyChart
        Draws an empty chart with the current background color.
      • GetMaxNumberBars
        Returns an Int
        gets the max number of displayable bars or group of bars
        this method can be called before DrawChart to determine the number max of displayable bars
        this can allow to adapt the filling routine according to the capacity of the chart
        .
      • Initialize (Callback As Object, EventName As String) As String
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
      • JumpTo (Index As Int)
        Jumps to the given index when a chart is zoomed.
        does nothing when the chart is unzoomed.
      • 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
      • RemoveHorizontalLine (Value As Double)
        Removes the horizontal line from the list with the given value.
        Value = Y scale value.
      • 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
      • SetZoomIndexes (BeginIndex As Int, EndIndex As Int)
        sets the zoom indexes, the values must be between 0 and Points.Size -1
        valid only for LINE, BAR, STACKED_BAR, H_LINE, H_BAR and H_STACKEDBAR charts
        this method should be called after having added the points data.
      • UnZoom
        Unzooms the chart.
    • Properties:
      • AreaFillAlphaValue As Int
        gets or sets the AreaFillAlphaValue property
        this value represents the alpha value of the area fill color for AREA and STACHED_AREA charts only
        the area fill color is the line color with this alpha value
      • 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
      • AxisTextColor As Int
        gets or sets the AxisTextColor property
      • 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 As Int
        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, H_BAR, STACKED_BAR, H_STACKED_BAR, PIE, YX_CHART, RADAR
      • DifferentScales As Boolean
        gets or sets the DifferentScales property, only for LINE and YX_CHART charts.
        when True, displays the lines with different automatic scales for two up to four lines.
        if the number of lines is smaller than 2 and bigger than 4, then all lines have the same scale.
      • 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.
      • DrawGridFrame As Boolean
        sets or gets the DrawGridFrame property, True by default
        if False, no frame, only the X and Y axes are drawn
      • DrawHorizontalGridLines As Boolean
        sets or gets the DrawHorizontalGridLines property, True by default
        if False, no horizontal grid lines are drawn
      • DrawOuterFrame As Boolean
        gets or sets the DrawOuterFrame property of the Chart
        draws an outer frame around the chart
      • DrawVerticalGridLines As Boolean
        sets or gets the DrawVerticalGridLines property, True by default
        if False, no vertical grid lines are drawn
      • DrawXScale As Boolean
        gets or sets the DrawXScale property
        True by default, if False doesn't draw the X scale values
        not drawing the scale can be useful for small charts
        not for logarithmic scales
      • DrawYScale As Boolean
        gets or sets the DrawYScale property
        True by default, if False doesn't draw the Y scale values
        not drawing the scale can be useful for small charts
        not for logarithmic scales
      • 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 As Int
        sets the GridColor property
        the color must be an xui.Color
        Example code: <code>xChart1.GridColor = xui.Color_RGB(169, 169, 169)</code>
      • GridFrameColor As Int
        sets the GridFrameColor property
        the color must be an xui.Color
        Example code: <code>xChart1.GridFrameColor = xui.Color_Blue</code>
      • HBarTicksTopDown As Boolean
        gets or sets the HBarsTicksTopDown property for H_BAR and H_STACKED_BAR charts
        False = draws the tick values from bottom to top, default value
        True = draws the tick from top to bottom
      • HBarXScaleOnTop As Boolean
        gets or sets the HBarsXScaleOnTop property for H_BAR and H_STACKED_BAR charts
        False = draws the horizontal scale on bottom, default value
        True = draws the horizontal scale on top
      • 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
      • KeepDisplayValues As String
        gets or sets the KeepValuesDisplay property
        possible values:
        NONE >; deletes the cursor and the displayed values after Touch_Up
        CURSOR >; keeps the cursor visible but deletes the values after Touch_Up
        BOTH >; keeps both, the cursor and the values visible after Touch_Up
      • Left As Int
        gets or sets the Left property
      • LegendBackgroundColor As Int
        sets the LegendBackgroundColor property
        the color must be an xui.Color
        Example code: xChart1.LegendBackgroundColor = xui.Color_ARGB(102, 255, 255, 255)
      • LegendTextColor As Int
        sets the LegendTextColor property
        the color must be an xui.Color
        Example code: xChart1.LegendTextColor = xui.Color_Black
      • LegendTextSize As Float
        gets or sets the LegendTextSize property
        setting this text size sets automatically AutomaticTextSizes = False
      • MaxLineColor As Int
        sets the single line chart MaxLineColor property
        the color must be an xui.Color
        Example code: <code>xChart1.MaxLineColor = xui.Color_Red</code>
      • MeanLineColor As Int
        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 As Int
        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>
      • MissingDataValue As Double
        gets or sets the MissingDataValue property, only for LINE charts
        default value 1000000000
        when you set any value in a Line chart, it is considerd as a missing value
      • 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
      • PiePercentageNbFractions As Int
        gets or sets the number of fractions for pie percentage values
        min = 0 max = 2
      • PieStartAngle As Int
        gets or sets the PieStartAngle property
        default value = 0 (three o'clock), positive clockwise
        twelve o'clock = -90
      • RadarDrawScale As Boolean
        gets or sets the RadarDrawScale property for RADAR charts
        True = draws the spider web type scale lines or circles
        depends on the RadarScaleType property SPIDER or CIRCLE
      • RadarDrawScaleValues As Boolean
        gets or sets the RadarDrawScaleValues property for RADAR charts
        True = draws the scale values
      • RadarScaleType As String
        gets or sets the RadarScaleType property for RADAR charts
        Either SPIDER or CIRCLE
      • RadarStartAngle As Int
        gets or sets the RadarStartAngle property for RADAR charts
        default value = 0 (three o'clock), positive clockwis
        e
        twelve o'clock = -90
      • RemoveHorizontalLine (Value As Double)
        removes the horizontal line from the list with the given value.
        Value = Y scale value.
      • RemovePointData (Index As Int)
        removes the data of the point with the given index.
      • ReverseYScale As Boolean
        gets or sets the ReverseYScale property, only for LINE and YX_CHART charts
        False means min value on top and max value.
        True means min value at bottom and max value at bottom on top. Default value.
      • Rotation As Double
        gets or sets the Rotation property of the Chart
        rotates the entire chart
      • ScalesOnZoomedPart As Boolean
        gets or sets the ScalesOnZooedPart property.
        False means scales on the whoel chart.
        True means scales on the zooem part only.
      • ScaleTextColor As Int
        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 As String
        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
      • ScaleXValuesLog As String
        gets or sets the ScaleXValuesLog property
        it is a string with the different scale values, for one decade, separated by the exclamation mark
        it must begin with 1! and end with !10
        only for YX_CHART X scale
        Example: the default property 1!2!5!7!10
      • ScaleYValuesLog As String
        gets or sets the ScaleYValuesLog property
        it is a string with the different scale values, for one decade, separated by the exclamation mark
        it must begin with 1! and end with !10
        only for LINE Y scale and YX_CHART Y scale
        Example: the default property 1!2!5!7!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
      • ValuesBackgroundColor As Int
        sets the ValuesBackgroundColor property
        the color must be an xui.Color
        Example code: <code>xChart1.ValuesBackgroundColor = xui.Color_Black</code>
      • ValuesTextColor As Int
        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
      • XMaxValue As Double
        gets or sets the X Max scale value
      • XMinValue As Double
        gets or sets the X Min scale value
      • XScaleLogaritmic As Boolean
        gets or sets the X scale to logarithmic
        valid only for positive numbers and for YX_CHART
      • 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
      • YMaxValue As Double
        gets or sets the Y Max scale value
      • YMinValue As Double
        gets or sets the Y Min scale value
      • YScaleLogarithmic As Boolean
        gets or sets the Y scale to logarithmic
        valid only for positive numbers and for LINE and YX_CHART
      • 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
      • YXChartCrossHairColor
        gets or sets the YXChartCrossHairColor property, only for YX_CHARTs.
        it must be a xui.Color value, black = default value.
        Example code: YXChart1.YXChartCrossHairColor = xui.Color_Black.
      • YXChartCrossHairDeltaY
        gets or sets the YXChartCrossHairDeltaY property, only for YX_CHARTs.
        the horizontal line of the cross hair cursor is shifted topwards by the given value.
        this useful to not cover the horizontal cursor line with the finger.
      • YXChartDisplayCrossHair
        gets or sets the YXChartDisplayCrossHair property, only for YX_CHARTs.
        True = displays cross hair lines at the cursor position.
      • YXChartDisplayPosition
        gets or sets the YXChartDisplayPosition, only for YX_CHARTs.
        possible values:
        CURSOR > displays the coordinates of the cursor position at the cursor position, default value.
        CORNERS &gt; displays the coordinates of the cursor position in one of the four corners.
        Example code: YXChart1.YXChartDisplayPosition = "CURSOR".
      • YXChartDisplayValues
        gets or sets the YXChartDisplayValues property, only for YX_CHARTs.
        True = displays the x and y coordinates of the cursor position.
      • 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
      • YZeroAxisHighlight As Boolean
        gets or sets the YZeroAxisHighlight property
        if True draws the Y Zero axis 2dip thick otherwise with 1dip
 

Attachments

  • xChartDemoV7_7.zip
    72.2 KB · Views: 46
  • B4XPagesxChartDemoV7_7.zip
    29.2 KB · Views: 49
  • B4JLogScaleV7_7.zip
    4.7 KB · Views: 40
  • xChart.b4xlib
    39.7 KB · Views: 84
  • xChart.bas
    269.8 KB · Views: 43
  • xGauges.xml
    17.9 KB · Views: 41
Last edited:

klaus

Expert
Licensed User
The xChart class and library has been update to version 7.3 in the first post.
- Amended problem with cursor when clicking on a chart with no data
- Added check in SetZoomIndexes for values out of range.
 

Alessandro71

Active Member
Licensed User
i think there's a bug in one of the latest releases (tested with 7.2 and 7.3)
the same source, using a previous version of the library (sadly i have no history of which lib version was used, probably a 6.x) used to produce this output in XY chart
1628267940507.png


now, with latest version i have this:
1628268048296.png


just to tell if someone has faced the same issue, while i'm trying to reproduce it in a small demo project
 

klaus

Expert
Licensed User
I see it too, it is amended for the next update.
I have updated the files xChart.bas and xChart.b4xlib in the first post.
The next update will come quite soon.

Version number, I missed to update that one, it is amended.
 
Last edited:

Alessandro71

Active Member
Licensed User
I see it too, it is amended for the next update.
I have updated the files xChart.bas and xChart.b4xlib in the first post.
The next update will come quite soon.

Version number, I missed to update that one, it is amended.

i can confirm the issue is solved using the updated b4xlib in the first post
may i suggest to keep version n-1 online for rapid checking of regressions?
 

madru

Active Member
Licensed User
Hi Klaus,

creating a small minimalistic 'line' chart gives me a display problem....


if DrawYScale = false then the 1st YValue is not shown

1629315029784.png


if set to true the 1st value is shown

1629315138222.png


B4X:
Sub aa11(chart As xChart,  name As String, color As Int) As xChart
    chart.ChartType="LINE"
    'chart.ChartType="BAR"
    chart.ClearData
    chart.AddLine("", color)
    chart.DisplayValues=False
    chart.DrawOuterFrame = False
    chart.DrawGridFrame=False
    chart.ChartBackgroundColor=xui.Color_White
    chart.IncludeBarMeanLine=False
    chart.IncludeMaxLine=False
    chart.IncludeMeanLine=False
    chart.IncludeMinLine=False
    chart.YAxisName = ""
    chart.IncludeLegend = False
    chart.YZeroAxisHighlight = False
    chart.Title = name
    chart.Subtitle = ""
    chart.XAxisName = ""
    chart.YAxisName = ""
    chart.DrawXScale = True
    chart.DrawYScale = True''''
    chart.DrawHorizontalGridLines = False
    chart.DrawVerticalGridLines = True
    chart.AutomaticScale=True
    Return chart
End Sub


can you double check?

THX :)
 

klaus

Expert
Licensed User
I tested your problem in the demo program, but I could not reproduce it in a first step.
Then, I saw that you also do not display the Y axis name, and in that case the first number is not displayed.
I found the problem, it has been amended for the next update.
If you have an urgent need for an update I can send you the current version. There are other additions included which need some more time before publishing.

In your code you transmit chart As xChart when you call the routine.
Then you return chart as xChart, why?
How do you call aa11 ?
And what do you do with the returned xChart ?
When you transmit a chart to the routine, this chart is known in the routine and modified according to your code, therefore no need to return it.
 
Last edited:

madru

Active Member
Licensed User
THX, take your time 👍

missed your 2nd paragraph on my mobile .... mmh, no idea why I did it that way ;) will change it :)
 
Last edited:

Alessandro71

Active Member
Licensed User
The display of the values on touch event in a bar chart shows strange values
I would expect only the name and the value of the selected bar

1629542379194.png
 

Alessandro71

Active Member
Licensed User
sure, please do not mind the actual code, since it's just a testbed
 

Attachments

  • testcharts.zip
    7.4 KB · Views: 19

klaus

Expert
Licensed User
The problem is here:

B4X:
    xC_bar.SetBarMeanValueFormat(1, 3, 3, False)
   
   
'    For i = 0 To cells - 1
        xC_bar.AddBar("Test", xui.Color_Blue)
'    Next
   
    Log(xC_bar.GetMaxNumberBars)
You are adding 96 bars, why !?
You must add only one !

As you want to get the max number possible of bars you could use the code below:

B4X:
    xC_bar.AddBar("Test", xui.Color_Blue)
    For i = 0 To cells - 1
        xC_bar.AddBarPointData(i, Rnd(10, 20))
    Next
    Log(xC_bar.GetMaxNumberBars)
 
Last edited:

Alessandro71

Active Member
Licensed User
My fault: I assumed that a chart with 96 bars would need 96 bars, each one with a single value, rather than a single bar with 96 values.
thank you
 

klaus

Expert
Licensed User
The xChart class and library has been update to version 7.4 in the first post.
Added AREA and STACKED_AREA charts.
Added AreaFillAlphaValue for the fill color for RADAR, AREA and STACKED_AREA charts.
Amended some bugs .
 
Hi! This library is fantastic! Congratulations to the developer!
I just have a little problem. My layout uses dark background colors. I need to change the color of the subtitles text in the stacked bars chart. Does not work! Is there a problem with this library property?
Another good idea would be to be able to change the color of the panel that appears by clicking on the graphic! Thank you very much!
 

klaus

Expert
Licensed User
What exactly does not work ?
I tested with the demo program and the SubtitleTextColor property works as expected in both, the Designer and in the code:
Can you upload a small project showing the problem?
What kind of color would you like to see.
Currently the color is a semitransparent white.
 
The property that isn't working is LegendTextColor and not SubtitleTextColor. In the bar graph (stacked), I put the background black and the subtitle letters are also black, I can't change it. As for the suggestion of the panel, I put the white grid with paler colors for the bars, so when you click on the chart, the panel that appears with information is white, semi-transparent, which in this case is confusing. It would be nice if there was a way to set the background color.
 
Top