Ember

The charting library provides an Ember component for easy integration with Ember applications.

Installation

npm install financial-charting-library

Basic Usage

1. Import the Component

import EmberChartComponent from 'financial-charting-library/ember';

2. Create Your Component

Extend the base chart component:

// app/components/financial-chart.js
import EmberChartComponent from 'financial-charting-library/ember';
import { DemoDataFeed } from '../datafeeds/demo';

export default class FinancialChartComponent extends EmberChartComponent {
  handleChartReady() {
    console.log('Chart is ready!');
    console.log('API available:', this.api);
  }
}

3. Use in Your Template

{{! app/templates/components/financial-chart.hbs }}
<div 
  {{did-insert this.setupChart}}
  {{did-update this.updateChart @symbol @interval}}
  {{will-destroy this.willDestroy}}
  ...attributes
></div>

4. Use the Component in Your App

{{! app/templates/application.hbs }}
<h1>Financial Chart</h1>

<FinancialChart
  @symbol="AAPL"
  @interval="1D"
  @theme="light"
  @datafeed={{this.datafeed}}
  @onChartReady={{this.handleChartReady}}
/>

Component Arguments

The Ember chart component accepts these arguments:

Argument	Type	Description
@datafeed	IBasicDataFeed	Required - Datafeed instance
@symbol	string	Required - Symbol to display
@interval	string	Required - Timeframe
@theme	string	'light' or 'dark'
@width	string	Chart width
@height	string	Chart height
@onChartReady	function	Callback when chart is ready

Complete Example

Here's a complete working example:

// app/components/financial-chart.js
import Component from '@glimmer/component';
import { action } from '@ember/object';
import EmberChartComponent from 'financial-charting-library/ember';

export default class FinancialChartComponent extends EmberChartComponent {
  @action
  handleChartReady() {
    console.log('Chart is ready!');
    
    // Access the API
    const api = this.api;
    if (api) {
      console.log('Chart API:', api);
      // You can use the API here
      // api.addIndicator('RSI');
    }
  }
}

{{! app/templates/components/financial-chart.hbs }}
<div 
  {{did-insert this.setupChart}}
  {{did-update this.updateChart @symbol @interval @theme}}
  {{will-destroy this.willDestroy}}
  style="width: {{@width || '100%'}}; height: {{@height || '600px'}};"
  ...attributes
></div>

{{! app/templates/application.hbs }}
<div class="container">
  <h1>Financial Chart - Ember Example</h1>
  
  {{! Controls }}
  <div class="controls">
    <button {{on "click" (fn this.changeSymbol "AAPL")}}>AAPL</button>
    <button {{on "click" (fn this.changeSymbol "GOOGL")}}>GOOGL</button>
    <button {{on "click" (fn this.changeSymbol "MSFT")}}>MSFT</button>
    <button {{on "click" this.toggleTheme}}>Toggle Theme ({{this.theme}})</button>
  </div>

  {{! Chart }}
  <FinancialChart
    @symbol={{this.symbol}}
    @interval="1D"
    @theme={{this.theme}}
    @datafeed={{this.datafeed}}
    @onChartReady={{this.handleChartReady}}
    @width="100%"
    @height="600px"
  />
</div>

// app/controllers/application.js
import Controller from '@ember/controller';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class ApplicationController extends Controller {
  @tracked symbol = 'AAPL';
  @tracked theme = 'light';
  
  // Initialize your datafeed
  datafeed = new YourDataFeedImplementation();

  @action
  changeSymbol(newSymbol) {
    this.symbol = newSymbol;
  }

  @action
  toggleTheme() {
    this.theme = this.theme === 'light' ? 'dark' : 'light';
  }

  @action
  handleChartReady() {
    console.log('Chart is ready!');
  }
}

Lifecycle Methods

The Ember chart component provides these lifecycle methods:

• setupChart(element) - Called when the element is inserted into the DOM
• updateChart() - Called when arguments change
• willDestroy() - Called when the component is destroyed (cleanup)

Accessing the API

You can access the Chart API through the api getter:

// In your component
const api = this.api;

if (api) {
  api.addIndicator('RSI');
  api.setSymbol('GOOGL', '1D');
  api.saveLayout('My Layout');
}

Next Steps

• Learn about DataFeed implementation
• Explore Chart Configuration
• Add Custom Indicators