B4J Library [B4X] [XUI] xChart Class

Discussion in 'B4J Libraries & Classes' started by klaus, Apr 12, 2018.

  1. klaus

    klaus Expert Licensed User

    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.

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

    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: 3.0
    • 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
        • 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
     

    Attached Files:

    Last edited: Jan 12, 2019 at 4:04 PM
  2. Erel

    Erel Administrator Staff Member Licensed User

    Excellent work!

    [​IMG]

    I've edit the title to make it a "cross platform" thread.
     
    themr23, David Meier, Harris and 8 others like this.
  3. Johan Hormaza

    Johan Hormaza Active Member Licensed User

  4. tufanv

    tufanv Expert Licensed User

    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.
     
  5. Erel

    Erel Administrator Staff Member Licensed User

    I was also thinking about it. Next week I will add a class that makes it simple to create cross platform gradients with BitmapCreator.
     
  6. klaus

    klaus Expert Licensed User

    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.
     
  7. LucaMs

    LucaMs Expert Licensed User

    Great Klaus (note: not "Great job, Klaus" :))
     
  8. Germán Arduino

    Germán Arduino Member Licensed User

    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 :)
     
  9. tufanv

    tufanv Expert Licensed User

    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.
     
    Johan Hormaza likes this.
  10. MarcoRome

    MarcoRome Expert Licensed User

    Big Thanks Klaus :):)
     
  11. klaus

    klaus Expert Licensed User

    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.
     
    Last edited: Apr 14, 2018
    amaxco and Peter Simpson like this.
  12. LucaMs

    LucaMs Expert Licensed User

    And these?
    [​IMG]
     
    giga and Johan Hormaza like this.
  13. klaus

    klaus Expert Licensed User

    During programming, why not, but their lifetime would be very short.
     
    giga, Harris, Peter Simpson and 3 others like this.
  14. tufanv

    tufanv Expert Licensed User

    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
     
    Last edited: Apr 15, 2018
    David Meier likes this.
  15. klaus

    klaus Expert Licensed User

    I am always open for constructive suggestions.
    I will wait for Erels' cross platform gradients with BitmapCreator and look what could be done.
     
    David Meier, amaxco, tufanv and 2 others like this.
  16. tufanv

    tufanv Expert Licensed User

    Thanks Klaus !
     
  17. Tadeu Botelho

    Tadeu Botelho Member Licensed User

    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!
     
  18. Levit

    Levit Member Licensed User

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

    Anser Well-Known Member Licensed User

    Looks really great. Thank you Klaus.

    Will I be able to use this in ABMaterial ?
     
  20. klaus

    klaus Expert Licensed User

    I don't know, I have never used ABMaterial.
     
    Peter Simpson likes this.
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