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
Related
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>
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>
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 -->
I have this code that is bringing in a video background file.
I am trying desperately to create multiple links that when clicked change the "filename" cloud to different file,
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="../jquery.backgroundvideo.min.js"></script>
<script>
$(document).ready(function() {
var videobackground = new $.backgroundVideo($('body'), {
"align": "centerXY",
"width": 1280,
"height": 720,
"path": "media/",
"filename": "cloud",
"types": ["mp4","ogg","webm"]
});
});
</script>
any help would be greatly appreciated
The plugin creates a div called #video_background. Just remove it and call $.backgroundVideo again. You could put that in a function with the filename as a parameter:
function changeVideo(filename){
$('#video_background').remove();
var videobackground = new $.backgroundVideo($('body'), {
"align": "centerXY",
"width": 1280,
"height": 720,
"path": "media/",
"filename": filename,
"types": ["mp4","ogg","webm"]
});
}
To call it by clicking on a link, you could do this:
Sun video
And
$('[data-video]').click(function(e){
e.preventDefault(); // prevent the link from reloading the page
changeVideo( $(this).attr('data-video') );
});
I'm using javascript inside jsp page. but the js part is not loading. the js basically is tradingView chart widget.
ArrayList<FXBreakListRow> list = tmpConn.selectFromFXBreakTable(query);
if( list.size() > 0 ){
for( FXBreakListRow tmp : list)
{
%>
<div id="tickerChart">
<div id ="chartImg">
<!-- TradingView Widget BEGIN -->
<script type="text/javascript" src="https://d33t3vvu2t2yu5.cloudfront.net/tv.js"></script>
<script type="text/javascript">
new TradingView.widget({
"width": 512,
"height": 288,
"symbol": "FX:" + tmp.getTicker(),
"interval": "60",
"timezone": "exchange",
"theme": "White",
"style": "1",
"toolbar_bg": "#f1f3f6",
"hide_top_toolbar": true,
"save_image": false,
"hideideas": true
});
</script>
<!-- TradingView Widget END -->
</div>
tmp.getTicker() appears to be JSP code, but you haven't put it between <% and %> (and I'd guess you'd also need some sort of print statement to output the return value).