Giter Club home page Giter Club logo

angular-tradingview-widget's Introduction

angular-tradingview-widget

Angular component for rendering the TradingView Advanced Real-Time Chart Widget.

Install

npm install --save angular-tradingview-widget

Usage

Module

import { TradingviewWidgetModule } from 'angular-tradingview-widget';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    TradingviewWidgetModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

component.html

    `<tradingview-widget [widgetConfig]="widgetConfig"></tradingview-widget>`

component.ts

    widgetConfig: ITradingViewWidget = {
        symbol: 'NASDAQ:AAPL'
    }

Constants and API differences

    enum BarStyles {
        BARS= '0',
        CANDLES= '1',
        HOLLOW_CANDLES= '9',
        HEIKIN_ASHI= '8',
        LINE= '2',
        AREA= '3',
        RENKO= '4',
        LINE_BREAK= '7',
        KAGI= '5',
        POINT_AND_FIGURE= '6'
    }

    enum IntervalTypes {
        D= 'D',
        W= 'W'
    };
    
    enum RangeTypes {
        YTD= 'ytd',
        ALL= 'all'
    };

    enum Themes {
        LIGHT= 'Light',
        DARK= 'Dark'
    };
    interface ITradingViewWidget {
        allow_symbol_change?: boolean;
        autosize?: boolean;
        calendar?: boolean;
        details?: boolean;
        enable_publishing?: boolean;
        height?: number;
        hideideas?: boolean;
        hide_legend?: boolean;
        hide_side_toolbar?: boolean;
        hide_top_toolbar?: boolean;
        hotlist?: boolean;
        interval?: 
            '1' |
            '3' |
            '5' |
            '15' |
            '30' |
            '60' |
            '120' |
            '180' |
            IntervalTypes.D |
            IntervalTypes.W;
        locale?: string;
        news?: string[];
        no_referral_id?: boolean;
        popup_height?: number | string;
        popup_width?: number | string;
        referral_id?: string;
        range?: 
            '1d' |
            '5d' |
            '1m' |
            '3m' |
            '6m' |
            RangeTypes.YTD |
            '12m' |
            '60m' |
            RangeTypes.ALL;
        save_image?: boolean;
        show_popup_button?: boolean;
        studies?: string[];
        style?:  BarStyles.BARS |
            BarStyles.CANDLES |
            BarStyles.HOLLOW_CANDLES |
            BarStyles.HEIKIN_ASHI |
            BarStyles.LINE |
            BarStyles.AREA |
            BarStyles.RENKO |
            BarStyles.LINE_BREAK |
            BarStyles.KAGI |
            BarStyles.POINT_AND_FIGURE;
        symbol: string;
        theme?: Themes.LIGHT | Themes.DARK;
        timezone?: string;
        toolbar_bg?: string;
        watchlist?: string[];
        widgetType?: string;
        width?: number;
        withdateranges?: boolean;
    }

All given props are passed on to the widget config. See this page for the TradingView Advanced Real-Time Chart API.

Screen Shot 2021-04-12 at 3 22 54

License

MIT

** Note Inspired by https://github.com/rafaelklaessen/react-tradingview-widget

angular-tradingview-widget's People

Contributors

mostafizur044 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

angular-tradingview-widget's Issues

Error in constructor

Hi,
When component starts, it is giving out this error:
core.js:5980 ERROR TypeError: TradingView[widgetType] is not a constructor at TradingviewWidgetComponent.initWidget (angular-tradingview-widget.js:101) at HTMLScriptElement.wrapFn (zone-evergreen.js:1218) at ZoneDelegate.invokeTask (zone-evergreen.js:399) at Object.onInvokeTask (core.js:28289) at ZoneDelegate.invokeTask (zone-evergreen.js:398) at Zone.runTask (zone-evergreen.js:167) at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:480) at invokeTask (zone-evergreen.js:1621) at HTMLScriptElement.globalZoneAwareCallback (zone-evergreen.js:1647)

for this part:
new TradingView[widgetType](config);

This is just by using defaults as presented in readme.

[Question] How to create multiple Shapes?

Hi,
Could you please give me an example code of how to create multiple shapes?
I have a list of trades and it is used to show up/down arrows, opentime will be where it displays the up/down arrow, and tradetype is defined to display the text BUY or SELL.

Something like that
image

List of trades
image

Best regard

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.