vue-charting
VueJS component for rendering the TradingView Chart Widget with custom data feed.
What is Charting Library
Charting Library is a standalone solution for displaying charts. This free, downloadable library is hosted on your servers and is connected to your data feed to be used in your website or app. Learn more and download.
Install
yarn add vue-charting
or
npm install --save vue-charting
Usage
Basic example
<template> <div class="hello"> <VueCharting :options="options" /> </div></template> <script>;; name: 'HelloWorld' props: msg: String components: VueCharting { return options: datafeed: Datafeed library_path: '/charting_library/' ; }</script>
;const supportedResolutions = "1" "3" "5" "15" "30" "60" "120" "240" "D" const config = supported_resolutions: supportedResolutions; { console } { console } { // expects a symbolInfo object in response console // console.log('resolveSymbol:',{symbolName}) var split_data = symbolName // console.log({split_data}) var symbol_stub = name: symbolName description: '' type: 'crypto' session: '24x7' timezone: 'Etc/UTC' ticker: symbolName exchange: split_data0 minmov: 1 pricescale: 100000000 has_intraday: true intraday_multipliers: '1' '60' supported_resolution: supportedResolutions volume_precision: 8 data_status: 'streaming' // onResolveErrorCallback('Not feeling it today') } { console } { console } { console } { //optional console // while optional, this makes sure we request 24 hours of minute data at a time // CryptoCompare's minute data endpoint will throw an error if we request data beyond 7 days in the past, and return no data return resolution < 60 ? resolutionBack: 'D' intervalBack: '1' : undefined } { //optional console } { //optional console } { console }
"time": 1533478500000 "low": 6966 "high": 696602 "open": 6966 "close": 696601 "volume": 356 "time": 1533478560000 "low": 6965 "high": 696601 "open": 696601 "close": 6965 "volume": 27 "time": 1533478620000 "low": 6950 "high": 6965 "open": 6965 "close": 6950 "volume": 378 ;