Skip to content

Commit

Permalink
AG-3390 - Financial Charts Overview tweaks
Browse files Browse the repository at this point in the history
  • Loading branch information
@rmc-software
rmc-software committed Jun 28, 2024
1 parent 2eefd2a commit e448255
Show file tree
Hide file tree
Showing 2 changed files with 55 additions and 177 deletions.
36 changes: 28 additions & 8 deletions ...-charts-website/src/content/docs/financial-charts/_examples/basic-financial-chart/main.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,19 +10,39 @@ const options: AgFinancialChartOptions = {
annotations: [
{
type: 'parallel-channel',
start: { x: { __type: 'date', value: 1672756200000 }, y: 136.28 },
end: { x: { __type: 'date', value: 1689773400000 }, y: 200 },
start: { x: { __type: 'date', value: 1646058600000 }, y: 160.15 },
end: { x: { __type: 'date', value: 1709000000000 }, y: 160.15 },
height: 12,
stroke: '#808080B0',
background: {
fill: '#808080B0',
},
},
{
type: 'line',
start: { x: { __type: 'date', value: 1701959400000 }, y: 193.63 },
end: { x: { __type: 'date', value: 1707489000000 }, y: 188.85 },
type: 'parallel-channel',
start: { x: { __type: 'date', value: 1678900000000 }, y: 160.0 },
end: { x: { __type: 'date', value: 1689900000000 }, y: 198.0 },
height: 8,
stroke: '#4075E0C4',
background: {
fill: '#4075E0C4',
},
},
{
type: 'horizontal-line',
value: 180.0,
stroke: 'lightseagreen',
axisLabel: {
fill: 'lightseagreen',
},
},
{
type: 'line',
start: { x: { __type: 'date', value: 1691155800000 }, y: 185.52 },
end: { x: { __type: 'date', value: 1698413400000 }, y: 166.91 },
type: 'horizontal-line',
value: 195.0,
stroke: 'red',
axisLabel: {
fill: 'red',
},
},
],
},
Expand Down
196 changes: 27 additions & 169 deletions packages/ag-charts-website/src/content/docs/financial-charts/index.mdoc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,89 +5,53 @@ hideSideMenu: true
largeExamples: true
---

Add high-performance, interactive Financial Charts to your application in seconds, without any configuation.
Build interactive financial charts featuring advanced annotations with minimal configuration.

{% chartExampleRunner title="Basic Financial Chart" name="basic-financial-chart" type="generated" /%}

## Add Financial Charts in Seconds
## Minimal Configuration

Financial charts do not require any configuration - all you need to provide is a HTML container and your data:
Financial charts come pre-configured with built-in features - just add your data!

{% if isFramework("javascript") %}

```js
// Chart Options
const options = {
// HTML Element to hold the chart
container: document.getElementById('myChart'),
// data
data: getData(),
};

// Create Chart
const chart = AgCharts.createFinancialChart(options);
AgCharts.createFinancialChart(options);
```

{% /if %}

{% if isFramework("react") %}

```jsx
import React, { useState } from 'react';
import { createRoot } from 'react-dom/client';
import { AgFinancialCharts } from 'ag-charts-react';
import { AgFinancialChartOptions } from 'ag-charts-enterprise';
import { getData } from './data';
import 'ag-charts-enterprise';

// React Chart Component
const ChartExample = () => {
// Chart Options: Control & configure the chart
const [options, setOptions] = useState({
// data
const [options, setOptions] = useState({
data: getData(),
});
});

return (
// AgFinancialCharts component with options passed as prop
return (
<AgFinancialCharts options={options} />
);
};

// Render component inside root element
const root = createRoot(document.getElementById('root'));
root.render(<ChartExample />);

);
```

{% /if %}

{% if isFramework("angular") %}

```js
import { Component } from '@angular/core';
import { AgFinancialCharts } from 'ag-charts-angular';
import { AgFinancialChartOptions } from 'ag-charts-enterprise';
import { getData } from './data';
import 'ag-charts-enterprise';

// Angular Chart Component
@Component({
selector: 'app-root',
standalone: true,
imports: [AgFinancialCharts],
// ag-charts-angular component with chartOptions attribute
template: `<ag-financial-charts
[options]="options"
class="chart"
></ag-financial-charts>`,
template: `<ag-financial-charts [options]="options"></ag-financial-charts>`,
})
export class AppComponent {
// Chart Options
public options: AgFinancialChartOptions;
constructor() {
this.options = {
// Data: Data to be displayed in the chart
data: getData(),
};
}
Expand All @@ -99,145 +63,39 @@ export class AppComponent {
{% if isFramework("vue") %}

```js
import { createApp } from 'vue';

import 'ag-charts-enterprise';
import { AgFinancialCharts } from 'ag-charts-vue3';

const ChartExample = {
template: `
<ag-financial-charts
:options="options"
class="chart"
/>
`,
components: {
'ag-financial-charts': AgFinancialCharts,
},
data() {
return {
options: {
data: getData(),
},
};
},
};

createApp(ChartExample).mount('#app');
template: `<ag-financial-charts:options="options"/>`,
components: {
'ag-financial-charts': AgFinancialCharts,
},
data() {
return {
options: {
data: getData(),
},
};
}
```

{% /if %}

{% note %}
The data should include keys of 'open', 'high', 'low', 'close' and optionally 'volume'.
This snippet assumes the supplied data includes 'open', 'high', 'low', 'close' and 'volume' (optional) keys.
{% /note %}

## Annotate Financial Charts

{% imageCaption pageName="financial-charts" imageName="annotations.gif" alt="Annotations" constrained=true/%}

AG Charts' Financial Charts support a range of annotations to help users analyse their data and identify trends. When annotations are enabled, users have the ability to create, edit and delete their own annotations. Annotations can be added to the chart by clicking on the annotation toolbar, which is displayed when the chart is in annotation mode, as shown above.

To enable annotations simply set the `annotations` property to `true` in the chart options, which will then display the annotations toolbar on the chart:

```ts
annotations: {
enabled: true,
}
```

### Annotation Types

Financial Charts currently support the following annotations:

- **Trend Line**: A single line between two points on the chart.
- **Parallel Channel**: Two parallel lines, with a fill between them and an optional centre line as well.
- **Disjoint Channel**: Two lines which do not need to be parallel, with a fill between them.
- **Horizontal Line**: A horizontal line across the entire chart. There is also an optional label over the axis.
- **Vertical Line**: A vertical line across the entire chart. There is also an optional label over the axis.

### Adding, Saving & Restoring Annotations

Developers can use the `initialState` property to add annotations at runtime:

```ts
initialState: {
annotations: [
{
type: 'line',
start: {
x: { __type: 'date', value: '2024-03-21' },
y: 1234,
},
end: {
x: { __type: 'date', value: '2024-06-21' },
y: 2345,
}
},
],
}
```

Additionally, annotations added by users can also be saved and later restored using the `getState` and `setState` methods:

```ts
function saveAnnotations() {
const newState = chart.getState();
//save to database...
}

function restoreAnnotations() {
// retrieve state from database...
chart.setState(state);
}
```
## Chart Annotations

### Example
Add and manage annotations like Trend Lines and Channels from the intuitive toolbar for enhanced data analysis.

{% chartExampleRunner title="Annotations Initial" name="annotation-initial" type="generated" /%}
{% imageCaption pageName="financial-charts" imageName="annotations.gif" alt="Annotations" constrained=true/%}

## Interact with Financial Charts
## Interactive Charts

AG Charts' Financial Charts come with a number of features to enable interactive data analysis, including [Zoom](./zoom) and [Range](./toolbar/#range-toolbar) controls.
Interactive analysis is enhanced with advanced [Zoom](./zoom) capabilities and [Range Buttons](./toolbar/#range-toolbar) for seamless time period navigation.

{% imageCaption pageName="financial-charts" imageName="zoom.gif" alt="Zoom" constrained=true/%}

### Zoom

Users can zoom directly within the chart by using the mouse wheel or trackpad:

- Scroll in and out with the mouse wheel or trackpad.
- Click and drag to pan around the zoomed in chart.
- Click and drag an axis to zoom in or out on only that axis.
- Double click anywhere to reset the zoom.

Zoom buttons are also enabled by default and allow the user to perform various operations. These will appear when the mouse is hovered near the bottom of a chart which has zoom enabled.

### Range Toolbar

The Range Toolbar contains buttons allowing the user to jump to a specific range along the chart timeline. It is also possible to override the default buttons by providing an array of button objects.

### Example

{% chartExampleRunner title="Toolbar" name="toolbar-buttons" type="generated" /%}

## Financial Chart types

Our default Financial Chart type is [Candlestick](/candlestick-series/), however, we also support a number of additional Financial Chart types:
The default chart type is [Candlestick](/candlestick-series/), with additional types like [OHLC](/ohlc-series/) and [Line](/line-series/) for versatile data visualisation.

{% imageCaption pageName="financial-charts" imageName="chart-types.gif" alt="Chart Types" constrained=true/%}

AG Charts' Financial Charts currently supports the following chart types:

- **OHLC**: Shows open and close data with horizontal tick lines, and high and low ranges with a vertical line.
- **Line**: Visualises continuous data, and is typically used to see trends or fluctuations over time.
- **Hollow Candlestick**: Shows open and close data with bars, and high and low data with wicks.
- **Step Line**: Visualises trends for non-continuous data
- **Area**: Visualises continuous data, and is primarily used to compare multiple datasets over time.
- **Range Area**: Represents data ranges using a shaded area between high and low data values.

### Example

See each of these in action by using the buttons in the example below to switch between different chart types:

{% chartExampleRunner title="Basic Financial Chart" name="switching-chart-types" type="generated" /%}

0 comments on commit e448255

Please sign in to comment.