Chart

You have to go through a three-step form wizard to enable this Control, i.e., Design, API & Advance. Let’s explain these steps below:

1st Step – Design

  1. Key (mandatory): Unique identifier for the chart data.
  2. Label (mandatory): Display label for the chart element.
  3. Name (mandatory): Name of the chart or data series.
  4. Column Width: Define the width of the chart columns.
  5. Data Series: Select the type of data series to visualize.
    1. Chart Type: Choose a chart type such as Bar Charts, Pie Charts, Line/Area Charts, or Other Charts.
  6. Dimensions: Configure the dimensions of the chart.
    1. Fit Container: Enable the chart to fit its container.
  7. Color Scheme: Configure the colors used in the chart.
    1. Color: Select the primary color for the chart.
  8. Options: Additional display and behavior settings for the chart.
    1. Show X Axis: Enable or disable the X-axis display.
    2. Show Y Axis: Enable or disable the Y-axis display.
    3. Show Grid Lines: Display grid lines on the chart.
    4. Round Domains: Round the domain values for the chart.
    5. Gradient: Apply a gradient effect to the chart.
    6. Show Legend: Enable or disable the chart legend.
    7. Legend Position: Set the position of the legend on the chart.
    8. Round Edges: Round the edges of bars or shapes in the chart.
    9. Tooltip Disabled: Disable tooltips on hover.
    10. Show X Axis Label: Enable or disable the label for the X-axis.
    11. Display Text: Set the text to display on the chart.
    12. X Axis Label: Define the label for the X-axis.
    13. Y Axis Label: Define the label for the Y-axis.

2nd Step – API

  1. Data
    1. Bind with data model: This step involves linking the component to a data model for dynamic content binding.
    2. Choose Data Source: Select data source from the following AI, HTTP, Workflow, No SQL, or RDBMS.
      1. HTTP: A data source type for retrieving data through HTTP requests.
        1. Data Connection: The configuration used to establish a connection to the data source.
        2. Method (mandatory): Select method from the following GET, PUT, POST, PATCH, DELETE, or POCO. This determines the type of HTTP request to send.
        3. API URL (mandatory): The URL endpoint for the API being called.
        4. Query Parameters: Optional parameters included in the API request to filter or modify the response.
          1. Key: The name of the query parameter.
          2. Value: The value assigned to the query parameter.
          3. Query Variable: A variable used in the query parameter.
          4. Select Type: The type of query parameter (e.g., string, number, etc.).
        5. Headers: Additional metadata sent with the request.
          1. Name: The name of the header.
          2. Value: The value assigned to the header.
        6. Others: Additional settings for the HTTP request.
          1. Enable raw query: Option to send a raw query without formatting.
    3. Response Attribute: The data or property that will be returned in the response from the API or data source.
  2. Mapping
    1. API Field Mapping: A process to map API data fields to chart or binding fields.
      1. Chart Field: Select option from the dropdown menu. This is the field in the chart that corresponds to a data value.
      2. Binding Field: Select option from the dropdown menu. This field binds the data from the API to the chart.
      3. Chart Click Filter: A filter triggered by a click on the chart to refine or narrow down the data displayed.
      4. Is Collection: Indicates whether the field represents a collection of data (e.g., an array of items).
    2. Collection Field Mapping: Mapping fields for collections of data, typically in key-value pairs.
      1. Enter Key: The key representing the unique identifier or field name in the collection.
      2. Enter Value: The value corresponding to the key, representing the data associated with it.

3rd Step – Advance

  1. Design
    1. No. of Column (mandatory): Specifies the number of columns to be displayed. This field is required for layout configuration.
    2. Height: Defines the height of the component or chart, allowing for customization of its vertical size.
    3. Hide Data Tab: Option to hide the data tab from the interface, preventing users from accessing raw data directly.
    4. Hide Chart Tab: Option to hide the chart tab from the interface, preventing users from switching to the chart view.
  2. Others
    1. No Data Configuration: Configuration options for displaying content when no data is available.
      1. No Data Image URL: The URL for the image displayed when no data is present.
      2. Background Color: The color of the background to be used when there is no data.
      3. Image Width: Defines the width of the image displayed in the "No Data" view.
      4. Cover Height: The height of the cover or placeholder image displayed when no data is available.
      5. Title: A title message shown when no data is available, often used to inform the user.
      6. Message: A custom message displayed along with the title when there is no data.

Click “Confirm” and “Chart” control is configured.