TradingView Javascript to Work in Anvil

Anvil Q&A
1

What I’m trying to do:
I’m trying to load the trading view charting library. I feel I"m getting close but trading view isn’t referencing and Im really new to javascript. How do I debug the javascript and print out to console?
What I’ve tried and what’s not working:
I tried putting the script in the native libraries but that doesn’t seem to be working. I’m following this tutorial.

This is the Error I got:

[An internal error has occurred] - see browser console for more details
SyntaxError: Unexpected identifier 'type'
    at https://anvil.works/runtime-new/runtime/dist/runner.bundle.js?sha=32557e83f4393eef89d55626581aba8a37f5b5f157e966d2ba9aff661b766300:572:1824
[An internal error has occurred] - see browser console for more details
ReferenceError: Tradingview is not defined
    at <anonymous>:2:13
    at https://anvil.works/runtime-new/runtime/dist/runner.bundle.js?sha=32557e83f4393eef89d55626581aba8a37f5b5f157e966d2ba9aff661b766300:572:1824

Clone link:
share a copy of your app

2

I can’t seem to clone the app, not sure what’s going on there. Can you post the code where you’re using the Trading View library?

Or create a smaller example app to show the problem?

1 Like
3

yea hope this works
https://anvil.works/build#clone:36DR2YYE34CUKFCV=MX2FLOWJDLD2VH643FNDFSVJ

4

Huh, that’s still not working for me. Getting a Javascript error on the import about invalid JSON.

5

Hey,
Yea i noticed the javascript runs and stops and runs again, but nothing ever shows. I don’t know if its in an infinite loop but feelsl ike it. I uploaded to my public github, i wasn’t able to clone my own link either. but all the trading view library is in theme asset folder

6

I don’t see anywhere in that github repo that you’re actually trying to use the library. I see it included in the Native Libraries and assets, but no forms that use it.

Here’s a clone that incorporates the lightweight charts example from GitHub - tradingview/lightweight-charts: Financial lightweight charts built with HTML5 canvas

https://anvil.works/build#clone:ZK6UISE4DUPVRD5U=JGNQUYMYTIVALPETBIPNXIDU

Maybe that’ll get you started?

2 Likes
7

It feels really strange, like when I load the javascript, anvil doesn’t save my code, and the project link you have me check out and clone, just refreshes and takes along time to load and I’m still waiting. I don’t know if its because I’m on the lowest tier plan and its going slow. Been waiting several minutes and its still spinning.

image
image1600×852 127 KB

I had put this in my html but didnt’ save for some reason when I put it in my personal github. All u see is it spinning and thinking but nothing shows but white background.

image
image1600×852 227 KB 

<center style="font-style:italic; color:#888; margin: 3em;">
<!DOCTYPE HTML>
<html>
	<head>

		<title>TradingView Charting Library demo</title>

		<!-- Fix for iOS Safari zooming bug -->
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">

		<script type="text/javascript" src="_/theme/assets/charting_library-master/charting_library/charting_library.standalone.js"></script>
		<script type="text/javascript" src="_/theme/assets/charting_library-master/datafeeds/udf/dist/bundle.js"></script>

		<script type="text/javascript">

			function getParameterByName(name) {
				name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
				var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
					results = regex.exec(location.search);
				return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
			}

			function initOnReady() {
				var datafeedUrl = "https://demo-feed-data.tradingview.com";
				var customDataUrl = getParameterByName('dataUrl');
				if (customDataUrl !== "") {
					datafeedUrl = customDataUrl.startsWith('https://') ? customDataUrl : `https://${customDataUrl}`;
				}

				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: '1D',
					container: "tv_chart_container",

					//	BEWARE: no trailing slash is expected in feed URL
					datafeed: new Datafeeds.UDFCompatibleDatafeed(datafeedUrl),
					library_path: "_/theme/assets/charting_library-master/charting_library/",
					locale: getParameterByName('lang') || "en",

					disabled_features: ["use_localstorage_for_settings"],
					enabled_features: ["study_templates"],
					charts_storage_url: 'https://saveload.tradingview.com',
					charts_storage_api_version: "1.1",
					client_id: 'tradingview.com',
					user_id: 'public_user_id',
					theme: getParameterByName('theme'),
				});
			};

			window.addEventListener('DOMContentLoaded', initOnReady, false);
		</script>

	</head>

	<body style="margin:0px;">
		<div id="tv_chart_container"></div>
	</body>

</html>

</center>
8

Custom HTML forms are already inside a web page, so you do not want to put an entire web page inside them. The only HTML you put into a custom HTML page is the specific HTML for the component. e.g. a div, etc.

Your script tags should generally go into the Native Libraries section of your app, so they get loaded once when the app is loaded. You also don’t need to work in Javascript at all, the Anvil Javascript bridge allows you to do it all from Python, as in the example app.

I can confirm that my example app works fine in a free plan. If you’re seeing an infinite spinner, then something else is going on.

9

IIRC, the last time we saw this in the Forum, it was a recursive function call (using __init__).

10

The same app works for me, so I assume it’s something more local.