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.
Related
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.
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 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 am using angular-cli to create a new Angular 2 project. I am trying to add a js library kinto.
However Angular 2 use typescript, and kinto is a js library, when i want to import it , Angular doesn't detect kinto.js which is in my node_modules.
I tried to directly import it in my index.html and it doesn't work
app.component.ts
import { Component } from '#angular/core';
import { EnvComponent } from "./env/env.component"
import { Kinto } from "../../node"
// Routage
import { ROUTER_DIRECTIVES } from '#angular/router';
#Component({
moduleId: module.id,
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
directives: [ROUTER_DIRECTIVES, EnvComponent]
})
export class AppComponent {
constructor(){
}
}
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ModuleApp</title>
<base href="/">
{{#unless environment.production}}
<script src="/ember-cli-live-reload.js" type="text/javascript"></script>
{{/unless}}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="vendor/materialize-css/dist/css/materialize.css">
<link rel="stylesheet" href="styles.css">
<script src="../node_modules/requirejs/require.js"></script>
</head>
<body>
<header>
<img src="app/ressources/img/INTESENS-logo-site-internet.png" alt="">
</header>
<app-root>
<div class="preloader-wrapper big active" id="loader">
<div class="spinner-layer spinner-green-only">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
</app-root>
{{#each scripts.polyfills}}
<script src="{{.}}"></script>
{{/each}}
<script src="../node_modules/kinto/dist/kinto.js"></script>
<script>
System.import('system-config.js').then(function () {
System.import('main');
}).catch(console.error.bind(console));
</script>
</body>
</html>
system.config.ts
/***********************************************************************************************
* User Configuration.
**********************************************************************************************/
/** Map relative paths to URLs. */
const map: any = {
};
/** User packages configuration. */
const packages: any = {
};
////////////////////////////////////////////////////////////////////////////////////////////////
/***********************************************************************************************
* Everything underneath this line is managed by the CLI.
**********************************************************************************************/
const barrels: string[] = [
'materialize-css',
// Angular specific barrels.
'#angular/core',
'#angular/common',
'#angular/compiler',
'#angular/forms',
'#angular/http',
'#angular/router',
'#angular/platform-browser',
'#angular/platform-browser-dynamic',
// Thirdparty barrels.
'rxjs',
// App specific barrels.
'app',
'app/shared',
'app/module',
'app/env',
/** #cli-barrel */
];
const cliSystemConfigPackages: any = {};
barrels.forEach((barrelName: string) => {
cliSystemConfigPackages[barrelName] = { main: 'index' };
});
/** Type declaration for ambient System. */
declare var System: any;
// Apply the CLI SystemJS configuration.
System.config({
map: {
'#angular': 'vendor/#angular',
'rxjs': 'vendor/rxjs',
'main': 'main.js',
'materialize' : 'vendor/materialize-css'
},
packages: cliSystemConfigPackages
});
// Apply the user's configuration.
System.config({ map, packages });
Thanks for your Help !
making a test app for Angular 2 but for some reason I can't resolve, my app is stuck on "Loading..."
Here are the files:
app.component.ts:
import {Component} from '#angular/core';
import {LittleTourComponent} from './little-tour.component';
#Component({
selector: 'my-app',
template: `
<h1>Test</h1>
<little-tour></little-tour>
`,
directives: [LittleTourComponent]
})
export class AppComponent { }
little-tour.component.ts:
import {Component} from '#angular/core';
#Component ({
selector: 'little-tour',
template: `
<input #newHero (keyup.enter)='addHero(newHero.value)'
(blur)="addHero.(newHero.value); newHero.value = '' ">
<button (click) = addHero(newHero.value)>Add</button>
<ul><li *ngFor='let hero of heroes'>{{hero}}</li></ul>
`,
})
export class LittleTourComponent {
heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];
addHero (value: string) {
if (value) {
this.heroes.push(value);
}
}
}
index.html:
<html>
<head>
<title>Angular 2 QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
and the main.ts:
import {bootstrap} from '#angular/platform-browser-dynamic';
import {AppComponent} from './app.component';
bootstrap(AppComponent);
The terminal doesn't yield any errors when I start npm but I'm sure there's something I must've missed in the code. Since I'm still trying to wrap my head around the basics of Angular 2, your help would be greatly appreciated. Thank you!
It works now with this:
<input #newHero (keyup.enter)='addHero(newHero.value)'
(blur)="addHero" newHero.value = '' >
plunker
You can add value from your input box to the list like so:
<input [(ngModel)] = "newHero">
<button (click) = addHero(newHero)>Add</button>
<ul><li *ngFor='let hero of heroes'>{{hero}}</li></ul>