I am creating a website on AWS ElasticBeanstalk for examining crypto and stock prices. Currently, in my code, I show a graph from TradingView which I got from their API page:
</script>
<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
<div id="tradingview_8ae14"></div>
<div class="tradingview-widget-copyright">
<a href="https://www.tradingview.com/symbols/NASDAQ-MSFT/" rel="noopener" target="_blank">
<span class="blue-text">MSFR Chart</span>
</a> by TradingView
</div>
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<script type="text/javascript">
new TradingView.widget(
{
"width": 980,
"height": 610,
"symbol": "NASDAQ:MSFT",
"interval": "D",
"timezone": "Etc/UTC",
"theme": "Dark",
"style": "1",
"locale": "en",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"allow_symbol_change": true,
"container_id": "tradingview_8ae14"
}
);
</script>
</div>
<!-- TradingView Widget END -->
On my website, the user can change the ticker symbol and from there my program will use regex and replace the "symbol": "NASDAQ:MSFT" line with the exchange name and the ticker symbol that the user specified. This works locally just as I would like. However, the TradingView graph does not change on ElasticBeanstalk. How can I make changes to the index.html file on AWS? Any help or pointers would be appreciated.
Try to put the entire widget creation inside a function and call it every time the user selection changes, A similar question here, Change ticker of tradingview widget with an interval
Related
I have an embeded Tradingview widget, the only problem im facing is the issue for the right panel called details.
The width of it is to small for my liking, how would i proceed to adjust the widht of that right panel?
<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
<div id="tradingview_93c62"></div>
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<script type="text/javascript">
new TradingView.widget(
{
"width": "100%",
"height": "700",
"symbol": "NASDAQ:AAPL",
"interval": "D",
"timezone": "Etc/UTC",
"theme": "light",
"style": "2",
"locale": "en_EN",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"hide_top_toolbar": true,
"hide_legend": true,
"save_image": false,
"details": true,
"container_id": "tradingview_93c62"
}
);
</script>
</div>
<!-- TradingView Widget END -->
on the Iframe code embeded in the widget its labeled for "layout__area--right", i tried applying css for that div class but doesnt seem to work.the width of that section remains the same
To adjust the width of the "details" section of the TradingView widget, you can use CSS to set a fixed width for the element with class "layout__area--right". You can add the following CSS code to your HTML file:
<style>
.layout__area--right {
width: 50% !important;
}
</style>
In the above code, you can adjust the width percentage to your desired value. The !important declaration is used to override any inline styles defined by the TradingView widget.
Note that the CSS code must be added before the TradingView widget script.
I've made a simple html web app (to get more complex later), and need to a script to download a copy as a pdf. When I run the script to generate the pdf, I can't get it to show anything other than the google login page.
I have toggled all options for the web app. I have also gone through a few different ways to generate the pdf, as well as generating a doc, which also didn't work.
function htmlToPDF() {
var html = "https://script.google.com/macros/s/AKfycbztkYQGmAowe21IITtpaUVsTwuNdbLmRC_B4opqp9A/exec" ;
var response = UrlFetchApp.fetch(html);
var htmlBody = response.getContentText();
var blob = Utilities.newBlob(response, "text/html", "text.html");
var pdf = blob.getAs("application/pdf");
DriveApp.createFile(pdf).setName("text.pdf");
}
Here's an example of the PDF I get.
https://drive.google.com/file/d/1P-uK4-nhXA76tkpqABOK-xnoTnra9-4M/view?usp=sharing
Web app code:
<!DOCTYPE html PUBLIC>
<html>
<head>
<base target="_top">
</head>
<body>
<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
<div id="tradingview_68bbc"></div>
<div class="tradingview-widget-copyright"><span class="blue-text">AAPL Chart</span> by TradingView</div>
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<script type="text/javascript">
new TradingView.widget(
{
"width": 980,
"height": 610,
"symbol": "NASDAQ:AAPL",
"timezone": "Etc/UTC",
"theme": "Light",
"style": "2",
"locale": "en",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"hide_top_toolbar": true,
"range": "all",
"save_image": false,
"container_id": "tradingview_68bbc"
}
);
</script>
</div>
<!-- TradingView Widget END -->
</body>
</html>
function doGet() {
return HtmlService.createHtmlOutputFromFile('index')
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
I re-deployed, and now I get this mostly blank pdf:
https://drive.google.com/open?id=1Gz3Sy0UXhpxHwwTUzFCFoDkwRrofd4g7
You had two issues
You had authorization problems because of not deploying the script as public - you solved this issue now.
The website contents are not displayed correctly in the pdf you create.
The latter issue is a tricky one
The problem is that your web site contents are rendered dynamically in the browser and cannot be captured with the UrlFetchApp.
You need to use a workaround, e.g. call with UrlFetchApp an external API that would take a screenshot of the browser contents and pass them as an image to Apps Script.
I'm using AngularJs. I started to write simple controller that will output Hello world!
In my cribsControler.js code looked liked this:
angular
.module('ngCribs')
.controller('cribsController', function($scope){
$scope.hello = 'hello world';
});
and it worked. Then I changed my code to display details that are shown in the example below.
app.js
angular.module('ngCribs', ['ui.bootstrap']);
cribsController.js
angular
.module('ngCribs')
.controller('cribsController', function($scope){
$scope.cribs = [
{
"type": "condo",
"price": 22000,
"address": "nameOfStreet1",
"description": "description1"
},
{
"type": "hose",
"price": 54000,
"address": "nameOfStreet2",
"description": "description2"
},
{
"type": "cotage",
"price": 1000,
"address": "nameOfStreet3",
"description": "description3."
}
];
});
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
<title></title>
</head>
<body ng-app="ngCribs" ng-controller="cribsController">
<pre>{{ cribs | json}}</pre>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.2.0/ui-bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.2.0/ui-bootstrap-tpls.min.js"></script>
<script src="app.js"></script>
<script src="scripts/cribsController.js"></script>
</html>
When I edited, saved, and than ran it in a browser I got a blank page. When I clicked view page source and then when I clicked on my script link: <script src="scripts/cribsController.js"></script>, I can see that it didn't update from "Hello World" to the display details.
What can I do to actually update it? Or maybe there is error in my code?
I development phase you should have the development console up. Press f12 to open It. Somewhere in the console you will find a setting that says something like: clear cache whille console is open(depends on which browser you use). Browser cache JavaScript files by default
I'm pretty new to coding, but I would like to create a simple UWP app for my phone just to see FX charts on-the-go - sadly, there are not too much related apps for this -.
I really like TradingView's WebCharts, and they provide real-time web widgets, what would fit for the task :)
Is it possible to show these in a UWP App?
Example:
<!-- TradingView Widget BEGIN -->
<script type="text/javascript" src="https://d33t3vvu2t2yu5.cloudfront.net/tv.js"></script>
<script type="text/javascript">
new TradingView.widget({
"width": 980,
"height": 610,
"symbol": "NASDAQ:AAPL",
"interval": "D",
"timezone": "Etc/UTC",
"theme": "White",
"style": "1",
"locale": "en",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"allow_symbol_change": true,
"hideideas": true,
"show_popup_button": true,
"popup_width": "1000",
"popup_height": "650"
});
</script>
<!-- TradingView Widget END -->
Thank you for the answers :)
Matt
TradingView's WebCharts js lib targets Web Application. It's not 100% fit for UWP(JS) Application.
I made a demo and found that the document.write inside TradingView's JS library will crash the UWP(JS) Application.
So as a personal workaround for using TradingView in UWP. You can do the following steps:
Download the WebCharts js lib from https://d33t3vvu2t2yu5.cloudfront.net/tv.js and add the js lib to your project.(UWP doesn't support remote js reference).
Open package.appxmanifest file->Content URIs tag->add https://dwq4do82y8xi7.cloudfront.net like below:
Open the downloaded js lib and search for document.write(widgetHtml). Modify the result line like below:
/*document.write(widgetHtml)*/document.getElementById("container").innerHTML=widgetHtml
Add a Div with id="container" to html:
<body>
<div id="container"></div>
<script src="js/main.js"></script>
</body>
Now you can get the WebCharts run in UWP App.
Here is the complete Demo: TradingViewSample.
here is my js file dashboard.js
Ext.onReady(function(){
Ext.QuickTips.init(); // **want to know why this is used**
// NOTE: This is an example showing simple state management. During development,
// it is generally best to disable state management as dynamically-generated ids
// can change across page loads, leading to unpredictable results. The developer
// should ensure that stable state ids are set for stateful components in real apps.
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());**want to know why this is used**
// create the data store
var store = new Ext.data.JsonStore({
// store configs
autoDestroy: true,
autoLoad :true,
url: 'api/index.php?_command=getresellers',
storeId: 'getresellers',
// reader configs
root: 'cityarray',
idProperty: 'cityname',
fields: ['cityname', 'totfollowup', 'totcallback', 'totnotintrested', 'totdealsclosed', 'totcallsreceived', 'totcallsentered', 'totresellerregistered',
'countiro', 'irotransferred', 'irodeferred'
]
});
// create the Grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{
id :'cityname',
header : 'cityname',
width : 160,
sortable : true,
dataIndex: 'cityname'
}
],
stripeRows: true,
autoExpandColumn: 'cityname',
height: 350,
width: 600,
title: 'Reseller Dashboard',
// config options for stateful behavior
stateful: true,
stateId: 'grid'
});
// render the grid to the specified div in the page
grid.render('dashboard');
});
I putted some comments where i want to know why this is used ..
want to know why this is used
Here is my html file
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Reseller DashBoard</title>
<!-- ** CSS ** -->
<!-- base library -->
<link rel="stylesheet" type="text/css" href="css/ext-all.css" />
<!-- overrides to base library -->
<!-- ** Javascript ** -->
<!-- ExtJS library: base/adapter -->
<script type="text/javascript" src="lib/ext-base-debug.js"></script>
<!-- ExtJS library: all widgets -->
<script type="text/javascript" src="lib/ext-all-debug.js"></script>
<!-- overrides to base library -->
<!-- page specific -->
<script type="text/javascript" src="lib/dashboard.js"></script>
</head>
<body>
<div id="dashboard">
</div>
</body>
</html>
Here is my json which i am also rendering in firebug ..
{
"countothercities": "0",
"directreseller": "14",
"totalresellersregisteredfor8cities": 33,
"cityarray": [{
"cityname": "bangalore",
"totfollowup": "3",
"totcallback": "4",
"totnotintrested": "2",
"totdealsclosed": "0",
"totcallsreceived": "0",
"totcallsentered": "68",
"totresellerregistered": "6",
"countiro": "109",
"irotransferred": "83",
"irodeferred": "26"
}, {
Please check .
The Ext.QuickTips functionality provides attractive and customizable tooltips for any element. Have a look at this tutorial from Sencha learning site for details. The init method is called to initialize the singleton class of Ext.QuickTip.
The Ext.state.Manager is the global state manager. To make use of the state manager, you must initialize it with a provider. This is what you are doing with the statement:
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
Here you are using CookieProvider. By using this, you are asking the ExtJS library to store the state information of the components in cookies.
Update: the Error is occurring at getColumnWidth() method. check if you have proper values for the width attribute in your column model. For debugging, try removing the width detail for all the columns. I think you have more code that you have not put up here to simplify. There might be some typo.
Try this:
//grid.render('dashboard'); //delete this line
grid.renderTo = 'dashboard';
grid.show();
Update
try to remove this line
autoExpandColumn: 'company'
Here is your bug:
autoExpandColumn: 'company',
There is no column with this id.