tradingview / charting-library-examples Goto Github PK

As shown

Are the chart override options documented somewhere?

My team is using your react javascript example to display a trading view on our site. The headings currently look like this:

Is there a way to minimize that info by default so that the headings can look like the following image right when the page loads?

Thank you.

• Framework/library: Angular 5

how can we
use charting library with exchange ( ruby on rails ) ?

I seem to get an issue using Truffle React-Box with charting_library/charting_library.min where I am given the error:

1:107 error 'define' is not defined no-undef
1:118 error 'define' is not defined no-undef

The line in question:
"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e(t.TradingView=t.TradingView||{})

This error occurs when I switch pages.“There is no such iframe”

Can't add new widget option. i need to add the new widget option for the changing the default chart type but i can't do it on this package

I added the style option in ChartingLibraryWidgetOptions object in charting_library.min.d.ts

Moved from https://github.com/tradingview/charting_library/issues/3161#issuecomment-411318478

/cc @dandv let's discuss here

Checklist

• This issue is NOT related to the charting library itself

Expected behavior

I use Trading View with angular 6 and 7 (latest) it works as expected, you can update dependencies and provide more recent version of angular in example

To reproduce simply npm run build and then serve the build.

iFrame just creates a copy of the page, error in the console is:
Uncaught TypeError: r.contentWindow.widgetReady is not a function at HTMLIFrameElement.t

Also have the same problem outside of this example with chart implemented in my own app, runs fine in dev mode, fails in production.

Checklist

• This issue is NOT related to the charting library itself

I was stucked trying to implement the example with same files with a new generated vue-cli project, and I noticed and it's very important to mention that we need babel-core and babel-loader, I think this can will be useful for other people.

• Vanilla JS with static HTML

https://github.com/tradingview/charting_library/ seems to be inaccessible

I’ve looked carefully through the developer documentation for the library but cannot find a proper way to hook onto the creation of a trendline on the graph

I see onDataLoaded(), onSymbolChanged(), onIntervalChange() and dataReady(), none of which would trigger when the user drops a trendline on the chart. the best I seem to find is the crossHairMoved() which fires every time the cursor moves. I can use that to go find the trendline (using the getAllShapes() method) but that's both costly and stupid

what is the proper way?

Would it be possible to get a description of the data format(s) compatible with the chart?

For example, is OHLCV the ideal data format? If so, would we need to be able to supply data for 1 minute periods?

We're not yet ready to tackle integration & legal agreement, but want to ensure the backend is designed to handle the requirements. Thank you!

Is there an API key needed to run the chart in production? It seems to fail to load at runtime and complains about missing a key. I'm not sure where to get it though.

I'm happy to provide more information but I'm not sure what's most useful for the team to diagnose it.

This error occurs when I switch the market .Cannot read property 'initializationFinished' of null.
How can I avoid this error

When I run yarn build followed by serve -s build to start the example in production mode, the example does not work. Here is the error that shows up:

There is no error when simply running yarn start.

The error seems to be similar to #1

I has download charting_library and run it. i want to display BTC(bitcoin) chart.
There is code like
TradingView.onready(function()
{
var widget = window.tvWidget = new TradingView.widget({
// debug: true, // uncomment this line to see Library errors and warnings in the console
fullscreen: true,
symbol: 'AAPL',
interval: 'D',
container_id: "tv_chart_container",
// BEWARE: no trailing slash is expected in feed URL
datafeed: new Datafeeds.UDFCompatibleDatafeed("https://demo_feed.tradingview.com"),
library_path: "charting_library/",
locale: getParameterByName('lang') || "en",
// Regression Trend-related functionality is not implemented yet, so it's hidden for a while
drawings_access: { type: 'black', tools: [ { name: "Regression Trend" } ] },
disabled_features: ["use_localstorage_for_settings"],
enabled_features: ["study_templates"],
charts_storage_url: 'http://saveload.tradingview.com',
charts_storage_api_version: "1.1",
client_id: 'tradingview.com',
user_id: 'public_user_id'
});
});

1. datafeed url on which format data would be?
2. i had change my site url at charts_storage_url and symbol:BTCUSD but nothing happen?
3. i had setup my datafeed url which has responce like
   {"status":"success","result":[{"id":"196","Qty":"20000.00000000","Price":"5.00","exactprice":"100000.00000000","dateexecuted":"2018-03-08 11:18:56","timestamp":"1520488136"},{"id":"195","Qty":"1.00000000","Price":"20000.00","exactprice":"20000.00000000","dateexecuted":"2018-03-08 11:19:20","timestamp":"1520488160"},{"id":"194","Qty":"1.00000000","Price":"19000.00","exactprice":"19000.00000000","dateexecuted":"2018-03-08 11:19:15","timestamp":"1520488155"},{"id":"193","Qty":"1.00000000","Price":"17000.00","exactprice":"17000.00000000","dateexecuted":"2018-03-08 11:19:09","timestamp":"1520488149"},{"id":"192","Qty":"1.00000000","Price":"16000.00","exactprice":"16000.00000000","dateexecuted":"2018-03-08 11:19:02","timestamp":"1520488142"},{"id":"191","Qty":"1.00000000","Price":"16000.00","exactprice":"16000.00000000","dateexecuted":"2018-03-08 11:13:50","timestamp":"1520487830"},{"id":"190","Qty":"1.00000000","Price":"16000.00","exactprice":"16000.00000000","dateexecuted":"2018-03-08 11:13:50","timestamp":"1520487830"},{"id":"189","Qty":"1.00000000","Price":"16000.00","exactprice":"16000.00000000","dateexecuted":"2018-03-08 11:10:22","timestamp":"1520487622"},{"id":"188","Qty":"1.00000000","Price":"16000.00","exactprice":"16000.00000000","dateexecuted":"2018-03-08 11:10:22","timestamp":"1520487622"},
   can you explain me in which format json data would be?
4. how can i change chart to own trading bitcoin data view chart?

explain me asap. thanks in advance.

Node.js + Nuxt.js

I added 'charting_library.min.js' file to the 'static' folder in my nuxt.js folder and connect this file inside my nuxt.config.js file like this:
head: {
script: [
{
src: '/js/charting-library.min.js',
}
]
}
After that I downloaded TVContainer.vue example component from you github and added it to my project. But when I run the page I get this error: "Uncaught TypeError: i.contentWindow.widgetReady is not a function
at HTMLIFrameElement.n (charting-library.min.js:1)"
Could you help me out, please?

Sorry, my english is bad,
I try with example but i got an issue when import {widget} from '../../../../../charting_library/charting_library.min'.
.
How can i fix an issue
thanks

The error is as follows:

Uncaught TypeError: r.contentWindow.widgetReady is not a function
    at HTMLIFrameElement.t (charting_library.min.js:2)

anyone ever experience this?

1 => there is no charting library exist when i download project from github using link
https://github.com/tradingview/charting-library-examples/

so i have to manually add the charting library js into folder.

Then i set allow js option into tsconfig.json

2 => ERROR in app/tv-chart-container/tv-chart-container.component.ts(7,8):
error TS6143: Module '../../assets/charting_library/charting_library.min' was resolved to 'G:/01 - Important/charting-library-examples-master/charting-library-examples-master/angular5/src/assets/charting_library/charting_library.min.js',
but '--allowJs' is not set.

Then i set allow js option into tsconfig.json

"allowJs": true,

3=> Then going to build using ng build option

ERROR in app/tv-chart-container/tv-chart-container.component.ts(7,8): error TS2306: File 'G:/01 - Important/charting-library-examples-master/charting-library-examples-master/angular5/src/assets/charting_library/charting_library.min.js' is not a module.

sudo npm start
when i run this command on my ubuntu 14.04 i get below error

[email protected] start /var/www/html/workspace/react-example
react-scripts-ts start

Starting type checking and linting service...
Using 1 worker with 2048MB memory limit
Watching: /var/www/html/workspace/react-example/src

Starting the development server...

ts-loader: Using [email protected] and /var/www/html/workspace/react-example/tsconfig.json
No valid rules have been specified

Failed to compile.

/var/www/html/workspace/react-example/public/datafeeds/udf/src/requester.ts
(32,4): Type 'object' is not assignable to type 'Headers | string[][] | { [key: string]: string; } | undefined'.
Type 'object' is not assignable to type '{ [key: string]: string; }'.
Index signature is missing in type '{}'.

There are too many documents in this chart system.

The solution you offer is very good.

thanks for your contributions

How will this system connect my data?
Will the database listen?
Should I connect with database information?
Should I re-write the entire site infrastructure for the chart?

https://github.com/tradingview/charting_library/wiki was not found but email to me, Trading View CoFounder.

https://github.com/tradingview/charting_library/wiki link.

but 404 not found.

how to request it?

is this https://github.com/tradingview/charting_library ?

thnx for reading.
best regards...

Checklist

• This issue is NOT related to the charting library itself

Describe the bug
I use this examples in my project with React.js .
I write TVChartComponent in page A, and other page B.
when i switch frequently between A and B, i found the memory growth. (picture blow)
In TVChartComponent, i do the unmount :

tvWidget.onChartReady(() => {this.amountd = true});

public componentWillUnmount(): void {
		this.setState = (state) => {
			return;
		}
		if (this.tvWidget !== null) {
			if (this.amountd) {
				this.tvWidget.remove();
				this.tvWidget = null;
			} else {
                              this.tvWidget = null;
                         }

		}
		try {
			if (this.socket.isConnected()) {
				this.socket.socket.close();
			}
		} catch (e) {
			console.warn('close....tv ws error ', e);
		}
}

To Reproduce

Expected behavior

Screenshots

Additional context

the picture above, and there are 17 instances in the memory, expect only one instance and others will be recycle.

Checklist

• This issue is NOT related to the charting library itself

Describe the bug

Sorry for english. I got the library from the official site. And I wanted to run an assembly example from this repository. But this causes an error.
The first thing the debugger shows is on "line1: define is not define". Then I tried to fix it but without success. I just ran the assembly without this string. but eventually got even more errors. What's wrong?

To Reproduce

Steps to reproduce the behavior:

1. Clone the repo
2. Put library into /public and /src, and datafeed into /public
3. npm install
4. npm start

Expected behavior

any ideas?

I clone react-javascript demo,
then yarn install packages
and put charting_library file to destination dir
and yarn start
the browser and terminal output errors

Failed to compile
...... in charting_library.min.js
  Line 1:  'define' is not defined  no-undef
  Line 1:  'define' is not defined  no-undef

Search for the keywords to learn more about each error.

How shoud I config the tradingview code to avoid this issues? It seems the k line zoomed .

I create vuejs app using
vue init webpack my-project
Then import charting-library but when I compiled, it got an error in TVChartContainer.vue file
"export 'widget' was not found in './charting_library.min'
Please check this issue. Thank you!

Checklist

• [ x] This issue is NOT related to the charting library itself

Describe the bug

Followed the instructions to install and run the react-javascript example. Upon loading the page, react displays an error message:

Failed to compile.

./src/charting_library/charting_library.min.js
  Line 1:  'define' is not defined  no-undef
  Line 1:  'define' is not defined  no-undef

Search for the keywords to learn more about each error.

To Reproduce

Steps to reproduce the behavior:

1. Install dependencies npm install.
2. Copy charting_library folder from https://github.com/tradingview/charting_library/ to /public and to /src folders.
3. Copy datafeeds folder from https://github.com/tradingview/charting_library/ to /public.
4. Run npm start. It will build the project and open a default browser with the Charting Library.

Expected behavior

Should not get any errors.

Additional context

I'm using the latest, current version from each repository.

on this page: https://github.com/tradingview/charting-library-examples/tree/master/react-example step 2 of "How To Start" indicate:

Copy charting_library folder from https://github.com/tradingview/charting_library/ to /public. The earliest supported version of the Charting Library is 1.12.

however, the link provided produces a 404. where am I supposed to get that folder from?

• Android
• iOS

Failed to compile
./src/charting_library/charting_library.min.js
Line 1: 'define' is not defined no-undef
Line 1: 'define' is not defined no-undef

Search for the keywords to learn more about each error.
This error occurred during the build time and cannot be dismissed.

TypeError: i.contentWindow.widgetReady is not a function. (In 'i.contentWindow.widgetReady(function(){t._ready=!0;for(var e=0,o=t._readyHandlers;e<o.length;e++){o[e].call(t)}i.contentWindow.initializationFinished()})', 'i.contentWindow.widgetReady' is undefined)

Hi,

I found a really weird bug, I cloned the repo and copied the required folders to a public folder, everything is working fine, but when I put /something/ in the url then page seems to loop itself forever. Here's how it looks.

I put the alert inside the bundle file to show that the whole script is called multiple times when there's subroute in url. here's where I put it.

I'm using the latest tradingView lib version (1.12) I didn't make any modifications other than putting that alert in bundle. Problem is also present on Firefox. I'm developing on Windows machine.

Would like to know how to fix that or any workaround because my page depends on what tokens are in url to determine what data should chart show and this issue prevents me from integrating TradingView.

I also found the same behaviour using fresh create-react-app app HERE

Is there an example of the react-js version now?

I get 'UDFCompatibleDatafeed' undefined error Angular Version 7

Sorry to bother in this area, but trying to find the documentation for the charting library and this is the only place in Github. Links on this page to Github docs are broken - https://www.tradingview.com/HTML5-stock-forex-bitcoin-charting-library

Describe the bug

Getting 404s in Github for all the charting library docs linked on this page:
https://www.tradingview.com/HTML5-stock-forex-bitcoin-charting-library/

To Reproduce

Click the links for documentation on the TradingView library page.

Expected behavior

See the docs

• This issue is NOT related to the charting library itself

Describe the bug

charting_library works fine with angular, but after I add angular route, it can not work.

To Reproduce

Steps to reproduce the behavior:

1. Clone the repo
2. Create routing module, and apply it in app.component.html
3. Open in browser
4. See error

Expected behavior

trading view works well.

Screenshots

If applicable, add screenshots to help explain your problem.

Additional context

Should we create a angular library to fix that? Just like ag-grid(https://github.com/ag-grid/ag-grid-angular-example) did.

I forked this repo and add one more page
https://github.com/arpitprod/charting-library-react

First open index page, Chart will show
then on Index page, click on 'AnotherPage' link and open another page
then click on 'GoToIndexPage' link and page will move to index page again

but chart will not show now

You have 2 themes for charts on TradingView.com (light and dark) and the widget supports them as well but how can I set the dark theme if I am using the charting library with my datafeed instead of the widget? It doesn't seem to have any impact on the theme:

{
  "theme": "Dark"
}

1. How to get the js values of high, low, close, volume with the help of your api to the bar graphics on which the cursor is hovered http://prntscr.com/kl5422?
2. How to display the month and date on the timeline of the chart https://prnt.sc/k4djkk?

Failed to compile
/Users/alibaba/Downloads/charting-library-examples-master/react-example/src/components/TVChartContainer/index.tsx
(6,8): Cannot find module '../../../public/charting_library/charting_library.min'.
This error occurred during the build time and cannot be dismissed.

I clone the project charting-library-examples. and run "npm install" in react-javascript folder.

then errors shows, what's the problem?