I'm a Java developer,I want to set value:symbol dynamically,but div("tradingview-widget-container__widget") always not work,can you help me?
<html>
<head>
<meta name='viewport'
content='width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no'>
</head>
<body>
<input type="hidden" value="COINBASE:BTCUSD" id="symbol"/>
<script type="text/javascript">
var symbol = document.getElementById("symbol").value;
</script>
<div class="tradingview-widget-container" style="background-color:#2A2D38">
<div class="tradingview-widget-container__widget"></div>
<div class="tradingview-widget-copyright"><a
href="https://www.tradingview.com/" rel="noopener"
target="_blank"><span class="blue-text">Data</span></a> by TradingView
</div>
<script type="text/javascript"
src="https://s3.tradingview.com/external-embedding/embed-widget-single-quote.js" async="">
console.log("wdiget:"+symbol);
{
"symbol"
:
symbol,
"width"
:
"100%",
"colorTheme"
:
"dark",
"isTransparent"
:
false,
"locale"
:
"en"
}
</script>
<!-- </div> -->
<!-- <div class="tradingview-widget-container" style="background-color:#2A2D38"> -->
<div id="tradingview_b59ae" style="background-color:#2A2D38"></div>
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<script type="text/javascript">
console.log("chart:"+symbol);
new TradingView.widget(
{
"autosize": true,
"symbol": symbol,
"interval": "D",
"timezone": "Etc/UTC",
"theme": "Dark",
"style": "3",
"locale": "en",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"withdateranges": true,
"save_image": false,
"container_id": "tradingview_b59ae"
}
);
</script>
</div>
<!-- TradingView Widget END -->
</body>
</html>
when I run it in chrome,console does not log console.log(symbol);,but div("tradingview_b59ae") get the symbol value.So how to deal with this problem with async div?
I use SpringBoot thymeleaf(Java) to modify "<input type="hidden" value="COINBASE:BTCUSD" id="symbol"/>"'s value,when client need this page,Java will set the value and post page to client,but "console.log("wdiget:"+symbol);"not work,"console.log("chart:"+symbol);" is work.
Related
I was trying to make an angular project where I am using trading view widgets. The problem is that the widgets work fine when I use them in index.html, but I want to use them as components for the website. I try to include the widget in app.component.html but the widget code doesn't work there. I'm new to angular and don't know what changes I am supposed to make in app.component.ts. Could someone help me out here?
This is the code for index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>News</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
<app-root></app-root>
<div class="container">
<h1>Forex Rates</h1>
<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
<div class="tradingview-widget-container__widget"></div>
<!-- <div class="tradingview-widget-copyright"><span class="blue-text">Forex Rates</span> by TradingView</div> -->
<script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-forex-cross-rates.js" async>
{
"width": 840,
"height": 400,
"currencies": [
"EUR",
"USD",
"JPY",
"GBP",
"CHF",
"AUD",
"CAD",
"NZD",
"CNY",
"INR"
],
"isTransparent": true,
"colorTheme": "light",
"locale": "in"
}
</script>
</div>
<!-- TradingView Widget END -->
</div>
</body>
</html>
And here is the app.component.ts:
import { Component, AfterViewInit } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'news';
}
I tried the methods given by people Embed Tradingview into Angular 5
I can't seem to understand the implementation. Again, I'm very new to angular and infact html and css too. Could someone help me out?
Edit:
This is the component.ts that I tried to inregrate for (Advanced Real Time chart)[https://in.tradingview.com/widget/advanced-chart/]
import { Component, OnInit, AfterViewInit } from '#angular/core';
declare const TradingView: any;
#Component({
selector: 'app-tradingview',
templateUrl: './trading-view.component.html',
styleUrls: ['./trading-view.component.css']
})
export class TradingviewComponent implements OnInit, AfterViewInit {
constructor() { }
ngOnInit() {
}
ngAfterViewInit(){
new TradingView.widget(
{
"width": 980,
"height": 610,
"symbol": "NASDAQ:AAPL",
"timezone": "Etc/UTC",
"theme": "Light",
"style": "1",
"locale": "en",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"withdateranges": true,
"range": "ytd",
"hide_side_toolbar": false,
"allow_symbol_change": true,
"show_popup_button": true,
"popup_width": "1000",
"popup_height": "650",
"no_referral_id": true,
"container_id": "tradingview_bac65"
}
);
}
}
And here is the html file for the same:
<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
<div id="tradingview_bac65"></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">
</script>
</div>
<!-- TradingView Widget END -->
The given code gives a console error:
ReferenceError: TradingView is not defined
Put this line <script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script> not in your component, but in index.html in the <head> tag. It will define window.TradingView before your Angular app starts up.
Post edited with more infos. I have a .asp page that gives me 3 variables. I have no problem working with them. I tried to add a donut chart to show the result using AMCHART charts code. I added the code into my .asp page. The problem is how to add those variables inside the JS code. When I type the variable values directly in the code, the charts are displayed correclty. But I need to add the variable because each customer has its own values...
Code:
<!DOCTYPE html>
<html>
<head>
<title>pie-chart test | amCharts</title>
<meta name="description" content="chart created using amCharts live editor" />
<!-- amCharts custom font -->
<link href='https://fonts.googleapis.com/css?family=Covered+By+Your+Grace' rel='stylesheet' type='text/css'>
<!-- amCharts javascript sources -->
<script type="text/javascript" src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="https://www.amcharts.com/lib/3/pie.js"></script>
<script type="text/javascript" src="https://www.amcharts.com/lib/3/themes/chalk.js"></script>
<!-- amCharts javascript code -->
<script type="text/javascript">
VAR TOTAL_IPCA;
<!-- HERE IS THE PROBLEM !!! -->
DATA1 = [
{
"TITULOS": "INFLAÇÃO",
"VALORES": <% = Result_1%>
},
{
"TITULOS": "PRÉ-FIXADO",
"VALORES": <% = Result_2%>
},
{
"TITULOS": "SELIC",
"VALORES": <% = Result_3%>
}
]
AmCharts.makeChart("chartdiv",
{
"type": "pie",
"balloonText": "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>",
"depth3D": 10,
"gradientType": "linear",
"innerRadius": 20,
"baseColor": "#FF8000",
"outlineThickness": 2,
"startEffect": "easeOutSine",
"titleField": "TITULOS",
"valueField": "VALORES",
"fontFamily": "ARIAL",
"fontSize": 15,
"handDrawScatter": 1,
"handDrawThickness": 2,
"theme": "chalk",
"allLabels": [],
"balloon": {},
"titles": [],
"dataProvider": DATA1
}
);
</script>
</head>
<body>
<div id="chartdiv" style="width: 100%; height: 300; background-color: #282828;" ></div>
</body>
</html>
I'm trying to create a chart and then change it to another with different data when I click a button but can't seem to get it to work. I'm using hardcoded data, here's my controller's function's code:
$scope.generateChart = function(chart){
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
"type": "line",
"data": {
"labels": ['Name','Name','Name','Name','Name','Name','Name','Name','Name','Name'],
"datasets": [{
"label": 'Label1',
"data": [30,30,30,30,30,30,30,30,30,30],
"fill": true,
"borderColor": "rgb(0,0, 192)",
"lineTension": 0.1
}]
},
"options": {}
});
};
And here's my template:
chart.html
<canvas id="myChart"></canvas>
<div id="buttons">
<button
ng-repeat="(key,result) in results[0]"
ng-hide="key === 'email' || key === 'country'"
ng-click="generateChart(key);">
{{key}}
</button>
</div>
results.html
<!DOCTYPE HTML>
<html>
<head></head>
<body ng-app="jellybeans">
<results></results>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<!-- build:js -->
<script type="text/javascript" src="js/all.js"></script>
<!-- endbuild -->
</body>
</html>
Is there any way to do so?
I am trying to get this piechart working.
Here is my code to draw simple piechart
<html ng-app="chartApp">
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
<!-- angular -->
<script type="text/javascript" src="https://code.angularjs.org/1.4.1/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js"></script>
<!-- fusioncharts core -->
<script type="text/javascript" src="js/fusioncharts.js"></script>
<script type="text/javascript" src="js/fusioncharts.charts.js"></script>
<!-- angular plugin -->
<script type="text/javascript" src="js/angular-fusioncharts.min.js"></script>
<!-- zune theme -->
<script type="text/javascript" src="js/zune-theme.js"></script>
<script type="text/javascript">
var pieChart = angular.module("pieChart", ["ng-fusioncharts"]);
// controller for chart
pieChart.controller("chartController", function($scope) {
$scope.myDataSource = {
chart: {
caption: "Age profile of website visitors",
subcaption: "Last Year",
startingangle: "120",
showlabels: "0",
showlegend: "1",
enablemultislicing: "0",
slicingdistance: "15",
showpercentvalues: "1",
showpercentintooltip: "0",
plottooltext: "Age group : $label Total visit : $datavalue",
theme: "fint"
},
data: [
{
label: "Teenage",
value: "1250400"
},
{
label: "Adult",
value: "1463300"
},
{
label: "Mid-age",
value: "1050700"
},
{
label: "Senior",
value: "491000"
}
]
}});
</script>
</head>
<body>
<center>
<div ng-controller="chartController">
<fusioncharts
width="600"
height="400"
type="pie3d"
datasource="{{myDataSource}}"
></fusioncharts>
</div>
</center>
</body>
</html>
I get this error
angular.js:38 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.1/$injector/modulerr?p0=chartApp&p1=Error%3…0zc%20(https%3A%2F%2Fcode.angularjs.org%2F1.4.1%2Fangular.min.js%3A20%3A30)
Your angular.module is set to "pieChart", but your ng-app directive is set to chartApp (this directive should be put on body instead of html also)... so Angular has no idea what to bootstrap. Try using angular.module("chartApp", ...) and putting ng-app directive on your 'body' tag.
I want to use a internationalization option at my jQuery Mobile and jQuery webside. I tried to generate an example with the documentation on http://i18next.com but it seems I failed. Does anybody has experiences with i18next?
Here my example:
index.html:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<script src="js/i18next-1.5.6.min.js" type="text/javascript"></script>
<script src="js/translation.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="content">
<div id="headline1" data-i18n="headline"></div>
<table width="100%" border="0" id="menu1" class="menu">
<tr id="surname">
<td width="50%" data-i18n="menu.surname"></td>
<td width="50%"> </td>
</tr>
<tr id="firstName">
<td width="50%" data-i18n="menu.firstName"></td>
<td width="50%"> </td>
</tr>
</table>
</div>
</div>
</body>
</html>
Translation files:
/locales/de/translation.json
{
"menu": {
"surname": "Name:",
"firstName": "Vorname:"
},
"headline": "Daten:",
"headline_1": "Daten Allgemein:",
"headline_2": "Daten Speziell:"
}
/locales/en/translation.json
/locales/dev/translation.json
{
"menu": {
"surname": "Name:",
"firstName": "First Name:"
},
"headline": "Data:",
"headline_1": "Daten Common:",
"headline_2": "Daten Specific:"
}
/js/translation.js
$(document).ready(function(){
language_complete = navigator.language.split("-");
language = (language_complete[0]);
console.log("Sprache (root): %s", language);
i18n.init({ lng: language });
i18n.init({ debug: true });
$(".menu").i18n();
$("headline").i18n();
});
The translation for the menu I get is "menu.name" instead of expected "Name:".
For the headline I get no translation but I expected "Data:" or "Daten:".
If i try the following direct call I get no translation:
i18n.t("menu.surname", { defaultValue: "Name:"});
Does anybody know what the problem is? Or does anybody has a working example that fits what I try to do?
Main problem is you can't call i18n.t("menu.surname", { defaultValue: "Name:"}); directly after initialization, as loading the resources from server is async, so basically you try to translate before i18next fetched the resources.
Instead load it with callback:
$(document).ready(function(){
language_complete = navigator.language.split("-");
language = (language_complete[0]);
console.log("Sprache (root): %s", language);
i18n.init({ lng: language, debug: true }, function() {
// save to use translation function as resources are fetched
$(".menu").i18n();
$("headline").i18n();
});
});
or use flag to load resources synchron.
By the way:
Your html code has one closing </div> too many.
The call to $("headline").i18n(); should be $("#headline").i18n();.
<!DOCTYPE html>
<html>
<head>
<title>Basic Sample Usage</title>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/i18next.js" type="text/javascript"></script>
</head>
<body>
<h3> you can switch lng via ?setLng='lngTag' </h3>
<a id="en" href="?setLng=en"> en </a>
|
<a id="de" href="?setLng=de"> de </a>
<h3>loaded via attribute 'data-i18n' and $('.nav').i18n();</h3>
<h5>basic text</h5>
<ul class="nav">
<li class="active"></li>
<li></li>
<li></li>
</ul>
<button id="btn" data-i18n="ns.common:add"></button>
<h5>extended usage of 'data-i18n' - apply to other attributes</h5>
<div id="extendedAttr">
<input data-i18n="[placeholder]ns.common:attr.placeholder;" type="text"></input>
<button data-i18n="[title]ns.common:attr.title;btn.hoverMe;"></button>
</div>
<script>
$.i18n.init({
//lng: 'en',
ns: { namespaces: ['ns.common', 'ns.special'], defaultNs: 'ns.special'},
useLocalStorage: false,
debug: true
}, function(t) {
//$('#navy').i18n(); for single
$('.nav').i18n(); // for group
$('#btn').i18n();
$('#extendedAttr').i18n();
});
</script>
</body>
</html>
locales/en/ns.special.json <=> make same for de/ns.speacial.json
{
"nav": {
"home": "en home",
"1": "en link 1",
"2": " en link 2"
},
"btn": {
"hoverMe": "en hover me!"
}
}
and locales/de/ns.common.json <=> make same for en/ns.speacial.json
{
"app": {
"company": {
"name": "my company"
}
},
"attr": {
"placeholder": "de translated placeholder",
"title": "translated title"
},
"add": "de add"
}