Chart View

Chart View

Download PDF

Chart View

Chart is a graphical representation of data, in which "the data is represented by symbols, such as bars in a bar chart, lines in a line chart, or slices in a pie chart". A chart can represent tabular numeric data, functions or some kind of qualitative structure and provides different info.


Chart View helps to represent data in visual format for improving understandability of your app users.Using charts to display data can help users understand the information more easily than they would if it were presented in a document or spreadsheet, especially when dealing with a lot of data. With charts, you can easily see patterns in the data at a glance as opposed to reading through a whole document (or several documents) to get this information. The use of charts has been a common feature in business and fitness apps.


ConfigureIT Chart View supports Numeric, Categorical and Date/Time axes enabling you to plot any type of data. Use these axes separately or together in a single chart to plot different series against different axes. The control handles and renders against a zero-level axis. Fully Customizable - Configure.IT Chart View provides great customization flexibility to accommodate as many app scenarios as possible. You can tweak everything starting from series fills and borders, axes lines, ticks and labels, to grid fills and borders.

    Keywords:
  • line chart
  • graph
  • bar chart
  • axis chart

Properties

  • Object
    PARAMETER
    DESCRIPTION
    Xpos

    Sets the X position of the Chart View.

    YPos

    Sets the Y position of theChart View.

    Width

    Sets the width of theChart View.

    Height

    Sets the height of the Chart View.

    Object ID

    Sets unique identifier for the control. Control can be referenced with name set in this property for configuration.

    Object Parent ID

    Set "Object ID" ofChart View which contains this control or can serve as parent.

    Key Name To Data

    Sets the web service key from data received from web server, which corresponds to the value to be displayed on the control.

    Key To DataSource

    Web service key which will be used as data source forChart View.

  • Advanced
    PARAMETER
    DESCRIPTION
    Clips Subviews

    A Boolean value that determines whether subviews are confined to the bounds of the Chart View.

  • Display
    PARAMETER
    DESCRIPTION
    User Interaction Enabled

    Enables the Interaction with user, i.e. control responds when user taps on it.

    Alpha

    Used to set the transparency to the object which ranges from 0 to 1.

    Background Color

    Used to set the background color to the Chart View.

    Tint Color

    Sets the tint color for the Chart View.

  • Custom Border
    PARAMETER
    DESCRIPTION
    Border Width

    Sets border width for a Chart View.

    Border Corner Radius

    Sets radius with which control's rounded corners should be drawn. Setting this property will enable control appear with rounded corners.

    Border Color

    Sets the border color for a control. Works only if "Border Width" property is set to a value more than 0. Default would be black color.

    Dash Width For Dashed Border

    Sets width of each dash in dashed border pattern for a Chart View.

    Space Between Dashes For Dashed Border

    Helps set the spacing between Dashes for Dashed Border.

    Transform Angle

    Sets angle in degrees to which the Chart View which is in its normal state, has to be rotated. Possible values for this property are -360 to 360.

  • CIT Custom Properties
    PARAMETER
    DESCRIPTION
    Graph Type

    This property is for setting type of the graph to be displayed. You can select from following options

    Key Name to Plot Data

    Name of the key in datasource which has input data for plot.

    Key Name To Plot Name

    Name of the key in datasource which having name or details of data for plot.

    Enable Dotted Grid
    This property is for enabling plotting of dotted grid lines. If this property is enabled grid lines will be plotted as dotted lines else grid lines will be plain lines.
    Display Data In Reverse Order

    This property is used to display graph in reverse order of data.

    Plot data range

    Use this property to specify the range of data to be displayed on graph.

    Plot Background Color

    Sets BackGround color of plot area.

    Plot Border Color

    Sets color of plot area border line.

    Vertical Grid Line Color

    This property is for setting color for the horizontal grid lines of plot area.

    Horizontal Grid Line Color

    This property is for setting color for vertical grid lines of graph plot area.

    Marker Symbol Fill Color
    This property is for setting color to fill in marker symbols of scatter plot.
    Scatter Plot Gradient Color

    This property is for setting gradient color for line chart.

    Plot Line Width

    Sets width of line for line chart.

    Plot Border Width

    Sets the value of width for plot area border line.

    Plot Border Padding

    Helps setting the value of padding for plot area.

    Plot Color Code

    Sets the color for the data plot.

    Plot Marker Symbol

    Plots the Marker symbol for line chart.

    Marker Symbol Size
    This property is for setting size of marker symbol of plot.
    X-Axis Label Font Color

    This property is for setting color for text displayed on labels of X-Axis.

    X-Axis Label Font Name

    This property is for setting font name for text displayed on labels of X-Axis.

    X-Axis Label Font Size

    This property is for setting font size for text displayed on labels of X-Axis.

    X Axis Scale Labels Count

    This property is for setting step value of the interval at which the labels on X-Axis should be displayed.

    X Axis Label Rotation
    This property is for setting rotation angle in degrees to which labels on X-Axis has to be rotated.
    Y-Axis Label Font Color
    This property is for setting color for text displayed on labels of Y-Axis.
    Y-Axis Label Font Name
    This property is for setting font name for text displayed on labels of Y-Axis
    Y-Axis Label Font Size
    This property is for setting font size for text displayed on labels of Y-Axis.
    Y Axis Scale Labels Count
    This property is for setting step value of the interval at which the labels on Y-Axis should be displayed.
    Y Axis Label Rotation

    This property is for setting rotation angle in degrees to which labels on Y-Axis has to be rotated.

  • Display/AdvanceText
    PARAMETER
    DESCRIPTION
    Hide

    Hiding an element can be done by checking ‘Hide’. This property lets you hide the control.


    Advance - Sets auto resizing with respect to superview, for Chart View.

  • Pie Chart Properties
    PARAMETER
    DESCRIPTION
    Key Name To Pie Slice Text

    Sets angle in degrees to which theChart View which is in its normal state, has to be rotated. Possible values for this property are -360 to 360.

    Show legend for pie chart
    This property is for enabling flag to display legend for the Pie-Chart.
    Is pie slice label rotation relative to radius
    This property is for enabling rotation of text labels on pie slices to be relative to radius.
    Padding for selected pie slice
    Padding for the selected pie slice in pie chart
    Pie Slice Label Font Color
    Color of font for labels on pie slices
    Pie Slice Label Font Name
    Font name for labels on pie slices
    Pie Slice Label Font Size
    Size of font for labels on Pie Slices
    Legend Background Color

    This property is for background color legend.

    Legend Font Color

    This property is for setting color for text displayed in legend.

    Legend Font Name

    This property is for setting font name for text displayed in legend.

    Legend Font Size

    This property is for setting font size for text displayed in legend.

  • Layout Setting
    PARAMETER
    DESCRIPTION
    Horizontal

    Group of horizontal android default properties.

    Vertical

    Group of vertical android default properties.

    Layout Width

    Sets the width of the view
    match_parent/fill_parent : Takes the width as its parent view
    wrap_content : Takes the width as its content’s width

    Layout Height

    Sets the height of the view
    match_parent/fill_parent : Takes the height as its parent view
    wrap_content : Takes the height as its content’s height

    Left

    The padding is expressed in pixels for the left, top, right and bottom parts of the view. Padding can be used to offset the content of the view by a specific amount of pixels.


    For instance, a Left value of 2 will push the view's content by 2 pixels to the right of the left edge.

    Right

    For instance, a Right value of 2 will push the view's content by 2 pixels to the left of the right edge.

    Top

    For instance, a Top value of 2 will push the view's content by 2 pixels to the bottom of the top edge.

    Bottom

    For instance, a Bottom value of 2 will push the view's content by 2 pixels to the top of the bottom edge.

    Apply Custom Properties

    If any of the layout setting parameter(s) are selected then this value is selected to indicate user applied custom layout setting parameter(s).

    Center In Parent

    This property centers the child vertically with respect to the bounds of its parent view.

    Default Min Height

    The height of the view cannot be less than the given value.
    If user select “Default Min Height” then android default value is taken otherwise it takes 0dp.

    Default Min Width

    The width of the view cannot be less than the given value.
    If user select “Default Min Width” then android default value is taken otherwise it takes 0dp.

  • Vertical
    PARAMETER
    DESCRIPTION
    Vertical Group

    Group of vertical android default properties.

    Reference Type

    These are the android default properties to set selected view with respect of other view.

    Reference Value

    Reference object that is used for positioning selected object

    Offset Type

    marginTop : Specifies extra space on the top side of this view. This space is outside this view's bounds.
    marginBottom : Specifies extra space on the bottom side of this view. This space is outside this view's bounds.

    Offset Value

    Value defines the extra space value in pixel.

    Center Vertical

    This property centers the child vertically with respect to the bounds of its parent view.

    Apply Vertical Custom Properties

    If any of the vertical layout setting parameter(s) are selected then this value is selected to indicate user applied vertical custom layout setting parameter(s).

  • Horizontal
    PARAMETER
    DESCRIPTION
    Horizontal Group

    Group of horizontal android default properties.

    Reference Type

    Reference type is the the default property to set selected view with respect to other view.

    Reference Value

    Reference object that is used for positioning selected object.

    Offset Type

    marginLeft : Specifies extra space on the left side of this view. This space is outside this view's bounds.
    marginRight : Specifies extra space on the right side of this view. This space is outside this view's bounds.

    Offset Value

    Offset Value defines the extra space value in the pixel.

    Center Horizontal

    This property centers the child horizontally with respect to the bounds of its parent view.

    Apply Horizontal Custom Properties

    If any of the horizontal layout setting parameter(s) are selected then this value is selected to indicate user applied horizontal custom layout setting parameter(s).

Actions

  • Load

    This event is triggered on load of a Chart View. Further, the desired Action can be defined as per the requirement.

Remarks

  • Graph Type

    This property is for setting type of the graph to be displayed. You can select from following options :-
    1) Bar Chart
    2) Scatter Plot
    3) Curved Scatter Plot
    4) Stepped Scatter Plot
    5) Gradient Scatter Plot
    6) Pie Chart
    7) Donut Chart

  • Basic configuration steps for Chart View configuration

    Select Graph Type:
    ->Choose one of the available graph from “Graph Type” property.


    Assign DataSource:
    -> Set “Key Name to Plot Data” parameter with a field name from API response, which is holding value to be displayed on graph.
    -> Set “Key Name to Plot Name” parameter with a field name from API response, which is holding the text that should be displayed on x-axis for respective value.
    -> Choose a value from Plot Marker symbol parameter to display markers symbols on graph.
    -> Set “Plot Color Code” parameter with color code of the plot on graph.
    -> Set “X Axis Scale Interval” and “Y Axis Scale Interval” parameters to set the number of marker labels to be displayed on X and Y axis respectively.