Develop Reference

Change ticker of tradingview widget with an interval

It's probably really easy but I just can't figure out how to change the ticker symbol in the Tradingview widget. I want the chart to change to the tickers in a array i got. The chart needs to change every 30 seconds with a new ticker and do that forever.
This is what I got so far:
<div class="tradingview-widget-container">
<div id="tradingview_5889e"></div>
<div class="tradingview-widget-copyright"><span class="blue-text">RIG</span> <span class="blue-text">chart</span> by TradingView</div>
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<script type="text/javascript">
var i = 0
function createchart(){
var companies = ['NYSE:SDRL','NYSE:RIG','CHXEUR:SEVDRO','NYSE:TK','CHXEUR:GBBP']
new TradingView.widget(
{
"width": 980,
"height": 610,
"symbol": companies[i],
"interval": "15",
"timezone": "Etc/UTC",
"theme": "Light",
"style": "1",
"locale": "en",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"hide_top_toolbar": true,
"save_image": false,
"hideideas": true,
"container_id": "tradingview_5889e"
}
);
i++;
}
setInterval(createchart(),10000)
</script>
</div>
Hope you guys can help me out. Been struggeling on this for way too long.

You can write it like this also
setInterval(createchart, 10000);

Try using:
setInterval(function(){
createchart()
}, 10000);
For some reasons it usually doesnt work the other way

Python flask passing variable to html file not working under script tag

I have a python flask app that I need to create a java script bar chart. I have tried various ways and I know my variables are getting passed to the html file as I have moved them to other places in the html file and its working. The place I need to pass these variables to is under the script tag in the html file. I am new to all of this and is there some special handling i need to do to make my variables show up, so the chart can be built?
Not sure if it matters but the variables I am passing is just a date and number.
# this is my python route that calls a function that fetches a date and a
# number from mongodb. This data im trying to display in my graph.
#app.route('/meritgraph/')
def meritgraph():
score_graph_data, score_date = get_chart_data()
return render_template("graphing.html", chart_data=zip(score_date,
score_graph_data))
# This is working for me but I want this to run inside a javascript tag.
<ol>{% for score_date, score_graph_data in chart_data %}
<li>{{score_date|safe}} and {{score_graph_data}}</li>
{% endfor %}
</ol>{%endblock%}
# for the example above I get the following return output.
Wed May 24 18:11:01 PDT 2017 and 100
Tue May 23 14:39:27 PDT 2017 and 77
Tue May 23 14:14:02 PDT 2017 and 62
# This is what I would like to do inside the script tag. Some reason when I
# run it inside the script tag it wont work. Is there anything special I
# need to do here?
<script type="text/javascript">
<ol>{% for score_date, score_graph_data in chart_data %}
<li>{{score_date|safe}} and {{score_graph_data}}</li>
{% endfor %}
</ol>{%endblock%}
</script>

You've messed up your commas a bit. Try the below. If that doesn't work, please provide more information on the error you're getting (probably in the JavaScript execution)
<script type="text/javascript">
AmCharts.makeChart("chartdiv",
{
"type": "serial",
"categoryField": "category",
"dataDateFormat": "YYYY-MM-DD",
"startDuration": 1,
"theme": "dark",
"categoryAxis": {
"gridPosition": "start",
"parseDates": true
},
"chartCursor": {
"enabled": true
},
"chartScrollbar": {
"enabled": true
},
"trendLines": [],
"graphs": [
{
"fillAlphas": 1,
"id": "AmGraph-1",
"title": "graph 1",
"type": "column",
"valueField": "column-1"
}
],
"guides": [],
"valueAxes": [
{
"id": "ValueAxis-1",
"title": "score range"
}
],
"allLabels": [],
"balloon": {},
"titles": [
{
"id": "Title-1",
"size": 15,
"text": "Merit Score Chart"
}
],
"dataProvider": [
{% for score_date, score_graph_data in chart_data %}
{
"category": '{{score_date|safe}}',
"column-1": '{{score_graph_data}}'
}
{{ "," if not loop.last }}
{% endfor %}
]
}
);
</script>

Try changing your syntax within the script for jinja per this example:
{{score_date}} to <%=score_date%>

karthick was right at least in my experience the jinja within script tags needs to be in quotes. On top of that you shouldn't put html tags inside script tags, you would use document.all or document.getElementById functions.

TradingView widget replacing entire HTML body

Trying to add TradingView widget into my website.
This widget must load when user select an option from a dropdown.
Issue: The widget loads, but it replaces everything in the body and thereby the dropdown disappear.
Example:
HTML Code:
<select name="fx" class="fx">
<option value="EURUSD">EURUSD</option>
<option value="EURJPY">EURJPY</option>
</select>
JS:
function changeFX(fx){
var fxWidget = new TradingView.widget({
"width": 500,
"height": 400,
"symbol": "FX:"+fx,
"interval": "1",
"timezone": "Etc/UTC",
"theme": "White",
"style": "2",
"locale": "en",
"toolbar_bg": "#f1f3f6",
"hide_top_toolbar": true,
"save_image": false,
"hideideas": true
});
return themeWidget;
}
$(document).on('change','.fx',function(){
var widget = changeFX(this.value);
// do something with widget.
});
http://jsfiddle.net/livewirerules/3e9jaLku/5
(select dropdown option, and see widget loads but dropdown disappears)
Any advice how to make the dropdown doesn't disappear and still TradingView widget load?

It's certainly too late, but you can use the argument "container_id" to choose where to place the graph.
source : https://github.com/mmmy/css3demos/wiki/Widget-Constructor

So what i can make out from the widgets website. Whatever is happening is how it works. So for this to behave the way you want. You will have to use a iframe. in your index.html and create a separate file say chart.html and give the src of the iframe as chart.html. And on change even change the src of the frame with a query parameter and read that query parameter in your chart.html and create the chart. Below is the code for your reference.
index.html
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-git1.min.js"></script>
<script>
$(document).on('change','.fx',function(){
//var widget = changeFX(this.value);
document.getElementById('content').src = "chart.html?value="+this.value;
document.getElementById('content').style.display = "block";
});
</script>
<style>
iframe{
height:400px;
width:600px;
display:none;
}
</style>
</head>
<body>
<select name="fx" class="fx">
<option value="EURUSD">EURUSD</option>
<option value="EURJPY">EURJPY</option>
</select>
<iframe src="chart.html" id="content" >
</iframe>
</body>
</html>
chart.html
<html>
<head>
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<script>
function getParameterByName(name, url) {
if (!url) {
url = window.location.href;
}
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
var fx = getParameterByName('value');
var fxWidget = new TradingView.widget({
"width": 500,
"height": 400,
"symbol": "FX:"+fx,
"interval": "1",
"timezone": "Etc/UTC",
"theme": "White",
"style": "2",
"locale": "en",
"toolbar_bg": "#f1f3f6",
"hide_top_toolbar": true,
"save_image": false,
"hideideas": true
});
</script>
</head>
<body>
</body>
</html>
Here is a plunker Demo i have created.
The link that i used for the code to get queryparameters.
How can I get query string values in JavaScript?
Hoe it helps :)

This work for me:
My html code:
<div class="dropdown no-arrow">
<select id="my_stocks" class="form-control">
<option value=" ">Select Stock</option>
<option value="AAPL">AAPL</option>
<option value="TSLA">TSLA</option>
</select>
</div>
<div class="card-body">
<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container tech_analysis">
<div id="tradingview_3418f"></div>
<div class="tradingview-widget-copyright">
</div>
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<script type="text/javascript">
new TradingView.widget(
{
"width": "100%",
"height" : 610,
"symbol": "NASDAQ:AAPL",
"interval": "D",
"timezone": "Etc/UTC",
"theme": "Light",
"style": "1",
"locale": "en",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"allow_symbol_change": true,
"container_id": "tradingview_3418f"
});
</script>
</div>
<!-- TradingView Widget END -->
</div>
My Jquery:
<script>
$(document).on('change','#my_stocks',function(){
var stock_selected = $(this).val();
var fxWidget = new TradingView.widget({
"width": "100%",
"height" : 610,
"symbol": "NASDAQ:"+stock_selected,
"interval": "D",
"timezone": "Etc/UTC",
"theme": "Light",
"style": "1",
"locale": "en",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"allow_symbol_change": true,
"container_id": "tradingview_3418f"
});
});
</script>

Print a js variable inside the function

I want to get the value onclick and print it in symbol "symbol": +sym+,
.
check my code:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
</head>
<body>
<p>click here</p>
<!-- TradingView Widget BEGIN -->
<script type="text/javascript" src="https://d33t3vvu2t2yu5.cloudfront.net/tv.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").click(function(){
var sym = $(this).val();
alert("alert is working but value is not updating in symbol input");
});
});
new TradingView.widget({
"width": 400,
"height": 450,
"symbol": +sym+,
"interval": "D",
"timezone": "Etc/UTC",
"theme": "White",
"style": "1",
"locale": "en",
"toolbar_bg": "#f1f3f6",
"allow_symbol_change": true,
"hideideas": true,
"show_popup_button": true,
"popup_width": "1000",
"popup_height": "650",
"no_referral_id": true
});
</script>
<!-- TradingView Widget END -->
</body>
</html>

First of all you need to change this "symbol": +sym+, to this: "symbol": sym,. If what you want to achieve is to change the value of the variable "sym" inside the new "TreadingView.widget" object everytime you click on the paragraph "p" you are doing it wrong. You need to update that value everytime the element is clicked, otherwise the widget object will always hold the original value of the variable "sym", you need to 1)Update the "sym" value and then 2)Recreate the widget or update, you may use:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
</head>
<body>
<p>click here</p>
<!-- TradingView Widget BEGIN -->
<script type="text/javascript" src="https://d33t3vvu2t2yu5.cloudfront.net/tv.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").click(function(){
var sym = $(this).text();
new TradingView.widget({
"width": 400,
"height": 450,
"symbol": sym,
"interval": "D",
"timezone": "Etc/UTC",
"theme": "White",
"style": "1",
"locale": "en",
"toolbar_bg": "#f1f3f6",
"allow_symbol_change": true,
"hideideas": true,
"show_popup_button": true,
"popup_width": "1000",
"popup_height": "650",
"no_referral_id": true
});
alert("alert is working but value is not updating in symbol input");
});
});
</script>
<!-- TradingView Widget END -->
</body>
</html>

You need to change from this:
var sym = $(this).val();
to this:
var sym = $(this).html();
or to this:
var sym = $(this).text();
depending on what you want to get. You may know that the p tag doesn't hold a value property.

try this
<script type="text/javascript">
var sym = null;
$(document).ready(function(){
$("p").click(function(){
sym = $(this).text();
alert("alert is working but value is not updating in symbol input");
});
});
setTimeout(function(){
sym = $(this).text();
new TradingView.widget({
"width": 400,
"height": 450,
"symbol": +sym+,
"interval": "D",
"timezone": "Etc/UTC",
"theme": "White",
"style": "1",
"locale": "en",
"toolbar_bg": "#f1f3f6",
"allow_symbol_change": true,
"hideideas": true,
"show_popup_button": true,
"popup_width": "1000",
"popup_height": "650",
"no_referral_id": true
});},5000);
</script>

How to keep document.write() from overwriting my HTML when the script is external and non-editable?

I am having trouble designing my website because the scripts are using document.write() which overwrites everything that I am trying to create.
I have no way of changing this(as far as I know) since this is a script provided from FeedWind(http://feed.mikle.com/).
FeedWind provides an very neat RSS widget that I can use for my news feed, the only downside is that I do not yet know a way of getting around the document.write() problem.
I am currently using the meteor framework.
I would be extremely happy to recieve some help, thank you!
Here is the script provided to me, all I've edited is the layout just to make it readable.
<!-- start feedwind code -->
<script type="text/javascript">
document.write
(
'\x3Cscript type="text/javascript" src="' +
('https:' == document.location.protocol ? 'https://' : 'http://') +
'feed.mikle.com/js/rssmikle.js">\x3C/script>'
);
</script>
<script type="text/javascript">
(function()
{
var params =
{
rssmikle_url: "http://www.nrk.no/norge/toppsaker.rss|\
http://tv2.no/rss/tv2nyhetene-innenriks-siste.xml?_ga=1.56852137.2011408189.1427372857|\
http://www.smp.no/?widgetName=polarisFeeds&widgetId=6485103&getXmlFeed=true|\
http://www.rbnett.no/?widgetName=polarisFeeds&widgetId=6485383&getXmlFeed=true|\
http://www.adressa.no/?widgetName=polarisFeeds&widgetId=3185248&getXmlFeed=true|\
http://www.tk.no/service/rss|http://www.vg.no/rss/feed/?categories=&keywords=&limit=100&format=rss",
rssmikle_frame_width: "300",
rssmikle_frame_height: "400",
frame_height_by_article: "0",
rssmikle_target: "_blank",
rssmikle_font: "Arial, Helvetica, sans-serif",
rssmikle_font_size: "12",
rssmikle_border: "on",
responsive: "off",
rssmikle_css_url: "",
text_align: "left",
text_align2: "left",
corner: "off",
scrollbar: "on",
autoscroll: "on",
scrolldirection: "up",
scrollstep: "3",
mcspeed: "20",
sort: "New",
rssmikle_title: "on",
rssmikle_title_sentence: "",
ssmikle_title_link: "",
rssmikle_title_bgcolor: "#0066FF",
rssmikle_title_color: "#FFFFFF",
rssmikle_title_bgimage: "",
rssmikle_item_bgcolor: "#FFFFFF",
rssmikle_item_bgimage: "",
rssmikle_item_title_length: "55",
rssmikle_item_title_color: "#0066FF",
rssmikle_item_border_bottom: "on",
rssmikle_item_description: "on",
item_link: "on",
rssmikle_item_description_length: "150",
rssmikle_item_description_color: "#666666",
rssmikle_item_date: "on",
rssmikle_timezone: "Europe/Oslo",
datetime_format: "%e.%m.%Y %k:%M:%S",
item_description_style: "text+tn",
item_thumbnail: "full",
item_thumbnail_selection: "auto",
article_num: "15",
rssmikle_item_podcast: "off",
keyword_inc: "taxi;oslo",
keyword_exc: ""
};
feedwind_show_widget_iframe(params);})();
</script>
<div style="font-size:10px; text-align:center; width:300px;">
<a href="http://feed.mikle.com/"
target="_blank"
style="color:#CCCCCC;">
RSS Feed Widget
</a>
<!--Please display the above link in your web page according to Terms of Service.-->
</div>
<!-- end feedwind code -->