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>
Related
I have the question regarding an already provided solution at
Update the dataset of multiple AmCharts with a Single Dropdown Change Event
I needed the same solution for one of my tasks. I have downloaded and saved all the css,js, jquery and json dataset files in the same directory and changed the addresses of those in src tags in my html file. Also changed the address in index.js file for the default dataset json. But this does not work. drop down menu shows but both charts are not even showing. Can you please help. Here is the code in my index.htm file
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Dynamically loading chart datasets</title>
<link rel="stylesheet" href="style.css"></head>
<body>
<script type="text/javascript" src="amcharts.js"></script>
<script type="text/javascript" src="serial.js"></script>
<script type="text/javascript" src="pie.js"></script>
<script type="text/javascript" src="none.js"></script>
<p class="selector">
<select onchange="setDataSet(this.options[this.selectedIndex].value);">
<option value="data1.json">Data Set #1</option>
<option value="data2.json">Data Set #2</option>
<option value="data3.json">Data Set #3</option>
</select> < Select a data set
</p>
<div id="barchart"></div>
<div id="piechart"></div>
<script src='jquery-1.11.2.min.js'></script>
<script src="index.js"></script>
</body>
</html>
in case the index.js code is also needed to be seen for any correction/amendment :
AmCharts.loadJSON = function(url) {
if (window.XMLHttpRequest) {
var request = new XMLHttpRequest();
} else {
var request = new ActiveXObject('Microsoft.XMLHTTP');
}
request.open('GET', url, false);
request.send();
return eval(request.responseText);
};
var bar_chart = AmCharts.makeChart("barchart", {
"type": "serial",
"theme": "none",
"dataProvider": AmCharts.loadJSON('data1.json'),
"valueAxes": [{
"gridColor":"#FFFFFF",
"gridAlpha": 0.2,
"dashLength": 0
}],
"gridAboveGraphs": true,
"startDuration": 1,
"graphs": [{
"balloonText": "[[category]]: <b>[[value]]</b>",
"fillAlphas": 0.8,
"lineAlpha": 0.2,
"type": "column",
"valueField": "visits"
}],
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
},
"categoryField": "country",
"categoryAxis": {
"gridPosition": "start",
"gridAlpha": 0,
"tickPosition":"start",
"tickLength":20
}
});
var pie_chart = AmCharts.makeChart("piechart", {
"type": "pie",
"theme": "light",
"dataProvider": AmCharts.loadJSON('data1.json'),
"valueField": "visits",
"titleField": "country",
"balloon":{
"fixedPosition":true
}
});
function setDataSet( dataset_url ) {
bar_chart.dataProvider = pie_chart.dataProvider =
AmCharts.loadJSON(dataset_url);
bar_chart.validateData();
pie_chart.validateData();
}
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
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 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'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).