Class Chart

The Chart Control is a versatile component designed to visually represent application data.

It supports a variety of chart types, such as line, bar, pie, and radar charts and provides a wide range of customization options. It offers a variety of templates, supports limiting the number of data records and allows for the integration of dependencies. It provides full control over chart properties and enables exporting charts in jpg, png, svg and pdf formats for further use.

Usage

The access method is slightly different from the usual control access.

  • To interact with the chart's API, a global upChart object is provided.
  • Instead of getting the control first to interact with it, you need to use the upChart helper and provide it with the DOM element (the chart control itself) that you want to access.

Example

// First, get the HTML element of the chart control you want to interact with
var chartHtmlElement = ix.api.dom.getHtml("<CHART-GUID>");

// Then, use the upChart helper to interact with the API of the given chart control
upChart.apiMethodXY(chartHtmlElement);

Library

The Chart Control is based on the AmCharts v3 library. For more information on the library and its capabilities, refer to the official documentation.

Hierarchy

  • Chart

Methods

getCategoryAxis getChart getData getGraphs getValueAxis reload removeData setData

Methods

getCategoryAxis

  • Retrieves the category axis object of a specific chart control.

    The category axis object contains all the properties and methods that can be used to manipulate the category axis within the chart.

    Parameters

    • element: HTMLElement

      The HTML element of the chart control for which the category axis object is to be retrieved.

    Returns boolean | object

    The category axis object if the element is associated with a chart, or false if no chart is associated with the element.

    Example

    var chartElement = ix.api.dom.getHtml("<CHART-GUID>");
    var chartCategoryAxis = upChart.getCategoryAxis(chartElement);

    This example demonstrates how to retrieve the category axis object for a specific chart control.

getChart

  • Retrieves the chart object associated with a specific HTML element.

    The chart object contains all the properties and methods that can be used to manipulate the chart.

    Parameters

    • element: HTMLElement

      The HTML element of the chart control for which the chart object is to be retrieved.

    Returns boolean | object

    The chart object if the element is associated with a chart, or false if no chart is associated with the element.

    Example

    var chartElement = ix.api.dom.getHtml("<CHART-GUID>");
    var chartObject = upChart.getChart(chartElement);

getData

  • Retrieves the data of a specific chart object.

    The data includes all the properties and values depending on the chart type.

    Parameters

    • chartObject: object

      The chart object for which the data is to be retrieved.

    Returns boolean | {}[]

    An array of data objects if the chart has data, or false if no data is associated with the chart.

    Example

    var chartElement = ix.api.dom.getHtml("<CHART-GUID>");
    var chartObject = upChart.getChart(chartElement);
    var chartData = upChart.getData(chartObject);

getGraphs

  • Retrieves the graph object of a specific chart control.

    The graph object contains all the properties and methods that can be used to manipulate the graph within the chart.

    Parameters

    • element: HTMLElement

      The HTML element of the chart control for which the graph object is to be retrieved.

    Returns boolean | object

    The graph object if the element is associated with a chart, or false if no chart is associated with the element.

    Example

    var chartElement = ix.api.dom.getHtml("<CHART-GUID>");
    var chartGraphs = upChart.getGraphs(chartElement);

getValueAxis

  • Retrieves the value axis object of a specific chart control.

    The value axis object contains all the properties and methods that can be used to manipulate the value axis within the chart.

    Parameters

    • element: HTMLElement

      The HTML element of the chart control for which the value axis object is to be retrieved.

    Returns boolean | object

    The value axis object if the element is associated with a chart, or false if no chart is associated with the element.

    Example

    var chartElement = ix.api.dom.getHtml("<CHART-GUID>");
    var chartValueAxis = upChart.getValueAxis(chartElement);

reload

  • Reloads a specific chart object.

    This method is used to refresh a given chart object. It can be useful when the chart's data or settings have been updated, and you want to ensure these changes are reflected in the chart.

    Parameters

    • chartObject: object

      The chart object that is to be reloaded.

    Returns void

    Example

    var chartElement = ix.api.dom.getHtml("<CHART-GUID>");
    var chartObject = upChart.getChart(chartElement);
    upChart.reload(chartObject);

removeData

  • Removes all data from a specific chart object.

    This method is used to clear all the data from a given chart object. After the data is removed, the chart will be empty until new data is added.

    Parameters

    • chartObject: object

      The chart object from which the data is to be removed.

    Returns boolean

    true if the data was successfully removed, or false if no data was associated with the chart.

    Example

    var chartElement = ix.api.dom.getHtml("<CHART-GUID>");
    var chartObject = upChart.getChart(chartElement);
    upChart.removeData(chartObject);

setData

  • Sets the data for a specific chart object.

    This method is used to provide data for a given chart object. The data should be an array of objects, where each object represents a data point in the chart.

    To see what object properties are required for your chart, use getData to fetch the current data.

    Parameters

    • chartData: {}[]

      An array of data objects for the chart. Each object should have a 'kat' property representing the category, and one or more properties representing the values for that category.

    • chartObject: object

      The chart object for which the data is to be set.

    Returns void

    Example

    // Get the chart object for a specific chart control
    var chartElement = ix.api.dom.getHtml("<CHART-GUID>");
    var chartObject = upChart.getChart(chartElement);

    // This is an example of a chart data object
    var chartData = [{
      "kat": "categoryValue-a",
      "columnValue1": "chartValue1-a",
      "columnValue2": "chartValue2-a"
    },{
      "kat": "categoryValue-b",
      "columnValue1": "chartValue1-b",
      "columnValue2": "chartValue2-b"
    }];

    // Set the data for the chart object
    upChart.setData(chartData, chartObject);

Settings

Member Visibility

Theme

On This Page