Module Ext_chart_Chart

module Ext_chart_Chart: sig .. end

Charts provide a flexible way to achieve a wide range of data visualization capablitities. Each Chart gets its data directly from a Store, and automatically updates its display whenever data in the Store changes. In addition, the look and feel of a Chart can be customized using Themes.

Creating a Simple Chart

Every Chart has three key parts - a Store that contains the data, an array of Axes which define the boundaries of the Chart, and one or more Series to handle the visual rendering of the data points.

1. Creating a Store

The first step is to create a Model that represents the type of data that will be displayed in the Chart. For example the data for a chart that displays a weather forecast could be represented as a series of "WeatherPoint" data points with two fields - "temperature", and "date":

Ext.define('WeatherPoint', {
    extend: 'Ext.data.Model',
    fields: ['temperature', 'date']
});

Next a Store must be created. The store contains a collection of "WeatherPoint" Model instances. The data could be loaded dynamically, but for sake of ease this example uses inline data:

var store = Ext.create('Ext.data.Store', {
    model: 'WeatherPoint',
    data: [
        { temperature: 58, date: new Date(2011, 1, 1, 8) },
        { temperature: 63, date: new Date(2011, 1, 1, 9) },
        { temperature: 73, date: new Date(2011, 1, 1, 10) },
        { temperature: 78, date: new Date(2011, 1, 1, 11) },
        { temperature: 81, date: new Date(2011, 1, 1, 12) }
    ]
});

For additional information on Models and Stores please refer to the Data Guide.

2. Creating the Chart object

Now that a Store has been created it can be used in a Chart:

Ext.create('Ext.chart.Chart', {
   renderTo: Ext.getBody(),
   width: 400,
   height: 300,
   store: store
});

That's all it takes to create a Chart instance that is backed by a Store. However, if the above code is run in a browser, a blank screen will be displayed. This is because the two pieces that are responsible for the visual display, the Chart's axes and series, have not yet been defined.

3. Configuring the Axes

Axes are the lines that define the boundaries of the data points that a Chart can display. This example uses one of the most common Axes configurations - a horizontal "x" axis, and a vertical "y" axis:

Ext.create('Ext.chart.Chart', {
    ...
    axes: [
        {
            title: 'Temperature',
            type: 'Numeric',
            position: 'left',
            fields: ['temperature'],
            minimum: 0,
            maximum: 100
        },
        {
            title: 'Time',
            type: 'Time',
            position: 'bottom',
            fields: ['date'],
            dateFormat: 'ga'
        }
    ]
});

The "Temperature" axis is a vertical Numeric Axis and is positioned on the left edge of the Chart. It represents the bounds of the data contained in the "WeatherPoint" Model's "temperature" field that was defined above. The minimum value for this axis is "0", and the maximum is "100".

The horizontal axis is a Time Axis and is positioned on the bottom edge of the Chart. It represents the bounds of the data contained in the "WeatherPoint" Model's "date" field. The dateFormat configuration tells the Time Axis how to format it's labels.

Here's what the Chart looks like now that it has its Axes configured:

4. Configuring the Series

The final step in creating a simple Chart is to configure one or more Series. Series are responsible for the visual representation of the data points contained in the Store. This example only has one Series:

Ext.create('Ext.chart.Chart', {
    ...
    axes: [
        ...
    ],
    series: [
        {
            type: 'line',
            xField: 'date',
            yField: 'temperature'
        }
    ]
});

This Series is a Line Series, and it uses the "date" and "temperature" fields from the "WeatherPoint" Models in the Store to plot its data points:

See the Line Charts Example for a live demo.

Themes

The color scheme for a Chart can be easily changed using the theme configuration option:

Ext.create('Ext.chart.Chart', {
    ...
    theme: 'Green',
    ...
});

For more information on Charts please refer to the Charting Guide.

class type t = object .. end

class type configs = object .. end

class type events = object .. end

class type statics = object .. end

val of_configs : configs Js.t -> t Js.t

val to_configs : t Js.t -> configs Js.t