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-4-27_11-25-39.gif

    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.

    jxCharts

      • Functions:
        • AddBar (Name As String, BarColor As Int) As String
          adds a bar
        • AddBarMultiplePoint (X As String, YArray As Double()) As String
          adds multibar points data
        • AddBarPointData (X As String, Y As Double) As String
          adds single bar point data
        • AddLine (Name As String, LineColor As Int) As String
          adds a line
        • 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"
        • AddLineMultiplePoints (X As String, YArray As Double(), ShowTick As Boolean) As String
          adds multiline points data
        • AddLinePointData (X As String, Y As Double, ShowTick As Boolean) As String
          adds single line point data
        • AddPie (Name As String, Value As Float, Color As Int) As String
          Adds a pie slice item
          Color: 0 = random color
        • AddYXLine (Name As String, LineColor As Int, StrokeWidth As Int) As String
          adds a YX line
        • 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"

        • AddYXLineMultiplePoints (X As String, YArray As Double(), ShowTick As Boolean) As String
          adds multi points to YXLines
        • AddYXLinePointData (X As String, Y As Double, ShowTick As Boolean) As String
          adds YX point data
        • ClearData As String
          clears all data, not the title nor axis names
        • DrawChart As String
          draws a chart
        • Initialize (Callback As Object, EventName As String) As String
        • NumberFormat3 (Number As Double, MaxDigits As Int) As String
          formats a number with scientific notation
        • IsInitialized As Boolean
          Tests whether the object has been initialized.
        • RemovePointData (Index As Int)
          Removes the point data at the given index.
        Properties:
        • AutomaticScale As Boolean
          gets or sets the AutomaticScale property
        • AutomaticTextSizes As Boolean
          gets or sets the AutomaticTextSizes property
        • AxisTextSize As Float
          gets or sets the AxisTextSize property
          setting this text size sets automatically AutomaticTextSizes = False
        • ChartBackgroundColor
        • ChartType As String
          gets or sets the chart type
          Possible values: BAR, STACKED_BAR
        • 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
          draws an outer frame to the chart.
        • GradientColors As Boolean
          gets or sets the GradientColors property.
        • GradientColorsAlpha As Int
          gets or sets the GradientColorsAlpha property.
        • GridColor
        • GridFrameColor
        • Height As Int
          gets or sets the Height property
        • IncludeLegend As String
          gets or sets the IncludeLegend property
          Possible values: NONE, TOP_RIGHT, BOTTOM
        • IncludeValues As String
          gets or sets the IncludeValues property
          Possible only for single bar charts or pie charts with TOP_RIGHT legend
        • IncludeBarMeanLinees As String
        • 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
        • NbPoints
          returns the number of points
        • NbXIntervals As Int
          gets or sets the number of intervals of the X axis
        • NbYIntervals As Int
          gets or sets the number of intervals of the Y axis
        • Rotation As Double
          gets or sets the chart rotation in degrees
        • ScaleTextColor
        • ScaleTextSize As Float
          gets or sets the ScaleTextSize property
          setting this text size sets automatically AutomaticTextSizes = False
        • Snapshot As B4XBitmap
          takes a snapshot of the chart
        • TextColor
        • Title As String
          gets or sets the Chart title
        • 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
        • 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
          gets or sets the X scale max value
        • XScaleMixValue
          gets or sets the X scale mix value
        • 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
        • YScaleMinValue As Double
          gets or sets the Y scale min value
    • Author: Klaus CHRISTL (klaus)
    • Version: 2.1
     

    Attached Files:

    Last edited: Aug 31, 2018
    jparraga, Beja, Informatix and 46 others like this.
  2. Erel

    Erel Administrator Staff Member Licensed User

    Excellent work!

    [​IMG]

    I've edit the title to make it a "cross platform" thread.
     
  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]
     
    Johan Hormaza likes this.
  13. klaus

    klaus Expert Licensed User

    During programming, why not, but their lifetime would be very short.
     
  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
  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.
     
    amaxco, tufanv, LucaMs and 1 other person 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