My page speed is being damaged by the TradingView chart widget. I need to load the javascript async / defer. However, adding that to the script makes it disappear.
I use it for charts on this swedish page: https://cryptorunner.com/sv/hur-man-koper-bitcoin/
With this specific code in the wordpress editor:
<div class="tradingview-widget-container"><script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<script type="text/javascript">
new TradingView.widget(
{
"autosize": true,
"symbol": "BITFINEX:BTCUSD",
"interval": "D",
"timezone": "Etc/UTC",
"theme": "Light",
"style": "3",
"locale": "sv_SE",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"hide_top_toolbar": true,
"hide_legend": true,
"allow_symbol_change": true,
"container_id": "tradingview_7589b"
}
);
</script></div>
You will find the code here:
https://uk.tradingview.com/HTML5-stock-forex-bitcoin-charting-library/
I would really appreciate if someone could help me lazy load this chart. Any ideas why it doesn't​ work?
You could try loading their script async and initate the chart once the whole page is fully loaded.
Vanilla/native JS minimal example from https://flippening.org/:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="tradingview-widget-container">
<div id="tradingview_d2337"></div>
<div class="tradingview-widget-copyright"><span class="blue-text">ETHBTC Rates</span> by TradingView</div>
</div>
</body>
<script type="text/javascript" src="https://s3.tradingview.com/tv.js" async></script>
<script type="text/javascript">
window.onload = function(){
new TradingView.MediumWidget(
{
"symbols": [
[
"BINANCE:ETHBTC|12M"
]
],
"chartOnly": true,
"width": 1000,
"height": 400,
"locale": "en",
"colorTheme": "light",
"gridLineColor": "rgba(240, 243, 250, 0)",
"trendLineColor": "#2962FF",
"fontColor": "#787B86",
"underLineColor": "rgba(41, 98, 255, 0.3)",
"underLineBottomColor": "rgba(41, 98, 255, 0)",
"isTransparent": false,
"autosize": false,
"showFloatingTooltip": false,
"container_id": "tradingview_d2337"
}
);
};
</script>
</html>
But at some point, if you really want to optimize performance you cannot rely on a solution like tradingview. They provide a free solution to millions of websites and load a bunch load of 3rd party code which will slow down your page.
Either compare different options or do it yourself (minimal charts js library + your own data)
Related
I am using trading view simple moving average (20,44,100,200) using below code.
<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
<div id="tradingview_e2cd6"></div>
<div class="tradingview-widget-copyright"><span class="blue-text">BTCUSDT Chart</span> by TradingView</div>
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<script type="text/javascript">
new TradingView.widget(
{
"autosize": true,
"symbol": "BINANCE:BTCUSDT",
"interval": "D",
"timezone": "Asia/Kolkata",
"theme": "dark",
"style": "1",
"locale": "en",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"withdateranges": true,
"hide_side_toolbar": false,
"allow_symbol_change": true,
"studies": [
{
id: "MASimple#tv-basicstudies",
inputs: {
length: 20
}
},
{
id: "MASimple#tv-basicstudies",
inputs: {
length: 100
}
},
{
id: "MASimple#tv-basicstudies",
inputs: {
length: 44
}
},
{
id: "MASimple#tv-basicstudies",
inputs: {
length: 200
}
}
],
"container_id": "tradingview_e2cd6"
}
);
</script>
</div>
<!-- TradingView Widget END -->
However i want to change moving average line color and line width for different average, so i tried with studies_overrides function with different inputs but it seems its not working.
Example: I want to change line color to white for 20 days moving average so i tried below code
"studies_overrides": {
"moving average.lineStyle.color.0": "#ffffff", //Not working
"simple moving average.lineStyle.color.0": "#ffffff", //Not working
"MASimple#tv-basicstudies.lineStyle.color.0": "#ffffff", //Not working
}, //Same on 'lineWidth: 2' not working
any one know how to change color and line width properly?
Ref: https://static.kancloud.cn/isung/tradingview/972246, https://static.kancloud.cn/isung/tradingview/972244
Try like this,
You should use the names of the studies in the Insert Study dialog as they are but using lower case letters.
"studies_overrides": {
"moving average.ma.color": "#2A2E39",
"moving average.ma.linewidth": 2,
},
I am creating a new radial gauge and I am using canvas for this purpose. The data that I have entered inside the canvas tag needs to be placed in another file and then rendered on load of the page.
How can I do this? Please help me with it.
The following is my code.
I tried many methods but it is not working for me. I also need to pass data to this to make the pointer move. But I need this functionality to happen first. Please help me.
var gauge = new RadialGauge({
renderTo: 'canvas-id',
width: 400,
height: 400,
//units: "Km/h",
minValue: 0,
startAngle: 90,
ticksAngle: 180,
valueBox: false,
maxValue: 100,
majorTicks: [
"0",
"20",
"40",
"60",
"80",
"100"
],
minorTicks: 4,
strokeTicks: true,
borders: true,
needleType: "arrow",
needleWidth: 1,
needleCircleSize: 5,
needleCircleOuter: true,
needleCircleInner: true,
animationDuration: 1500,
animationRule: "circular"
}).draw();
<html>
<head>
<title>Gauges as Components</title>
<script src="gauge.min.js"></script>
</head>
<body>
<canvas
data-type="radial-gauge"
data-width="400"
data-height="400"
data-min-value="0"
data-start-angle="90"
data-ticks-angle="180"
data-value-box="false"
data-max-value="100"
data-major-ticks="0,20,40,60,80,100"
data-minor-ticks="4"
data-stroke-ticks="true"
data-border-shadow-width="0"
data-borders="false"
data-needle-type="arrow"
data-needle-width="1"
data-needle-circle-size="5"
data-needle-circle-outer="true"
data-needle-circle-inner="true"
data-animation-duration="1500"
data-animation-rule="circular"
></canvas>
</body>
</html>
I'm working on a website: http://www.djkeefer.com/ and in the Broadcasting Live section, I have three videos for live streaming. I'm trying to add a red light live button to indicate when someone is streaming live and the button would light up red. Any ideas on how to go about this?
This is the code for the first video, The Soulful Experience Show:
<div id="svp_player53hd3ih5qv0g"></div>
<script language="javascript" type="text/javascript" src="//play.streamingvideoprovider.com/js/dplayer.js"></script>
<script language="javascript">
var vars = {
clip_id: "53hd3ih5qv0g",
transparent: "false",
pause: "1",
repeat: "",
bg_color: "#FFFFFF",
fs_mode: "2",
no_controls: "",
start_img: "1",
start_volume: "100",
close_button: "",
brand_new_window: "1",
auto_hide: "1",
stretch_video: "",
player_align: "NONE",
offset_x: "",
offset_y: "",
player_color_ratio: 0.6,
skinAlpha: "80",
colorBase: "#202020",
colorIcon: "#FFFFFF",
colorHighlight: "#fcad37",
direct: "true",
is_responsive: "true",
viewers_limit: 0,
cc_position: "bottom",
cc_positionOffset: 70,
cc_multiplier: 0.03,
cc_textColor: "#ffffff",
cc_textOutlineColor: "#ffffff",
cc_bkgColor: "#000000",
cc_bkgAlpha: 0.7
};
var svp_player = new SVPDynamicPlayer("svp_player53hd3ih5qv0g", "", "720", "405", {
use_div: "svp_player53hd3ih5qv0g",
skin: "3"
}, vars);
svp_player.execute();
</script>
<noscript>Your browser does not support JavaScript! JavaScript is needed to display this video player.</noscript>
<!--player code end-->
Im trying to use this Gauges - https://canvas-gauges.com
I create javascript with this gauges and it works fine in chrome and Firefox, but in doesn't work in IE 11
There is my code:
<!DOCTYPE html>
<html>
<head>
<title>Gauges as Components</title>
<script src="http:////cdn.rawgit.com/Mikhus/canvas-gauges/gh-pages/download/latest/all/gauge.min.js"></script>
</head>
<body>
<h1 align="center" >CPU Dashboard</h1>
<canvas id="canvas-id" >
</canvas>
<script>
var gauge = new RadialGauge({
renderTo: 'canvas-id',
animationRule: "linear",
animationDuration: 1500,
needleCircleInner: false,
needleCircleOuter: true,
needleCircleSize: 7,
needleWidth: 2,
needleType: "arrow",
borders: false,
borderShadowWidth: 0,
colorPlate: "#fff",
highlights: [
{
"from": 160000,
"to": 200000,
"color": "rgba(255,216, 0, 1)"
},
{
"from": 200000,
"to": 268000,
"color": "rgba(255, 50, 50, .75)"
}
],
strokeTicks: true,
minorTicks: 2,
majorTicks: [
"0",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
"268000"
],
valueDec: 0,
valueInt: 5,
maxValue: 268000,
minValue: 0,
value:150000,
units: "mhz",
title:"CPU UTIL",
height: 300,
width: 300
}).draw();
</script>
</body>
</html>
I'm new in javascript. What I do wrong?
Thanks in advance!
I just use local js file and now it works in IE.
Recently I had the issue when my ES6 code does not work at IE11.
I had used IFEE, arrow functions and const.
I convert my code via the Babel recompiler and that helped me out to get everything to work just like in Chrome.
I'm using amCharts to display a map. I'm aiming to change the color of a specify country using Javascript.
I do use the following line to change the color inside my web browser :
document.getElementsByClassName("amcharts-map-area-FR")[0].setAttribute("fill", color);
But when I use it inside my html page, this does not work.
Here is the full html page :
<!DOCTYPE html>
<html>
<head>
<title>map created with amCharts | amCharts</title>
<meta name="description" content="map created using amCharts pixel map generator" />
<!--
This map was created using Pixel Map Generator by amCharts and is licensed under the Creative Commons Attribution 4.0 International License.
You may use this map the way you see fit as long as proper attribution to the name of amCharts is given in the form of link to http://pixelmap.amcharts.com/
To view a copy of this license, visit http://creativecommons.org/licenses/by/4.0/
If you would like to use this map without any attribution, you can acquire a commercial license for the JavaScript Maps - a tool that was used to produce this map.
To do so, visit amCharts Online Store: http://www.amcharts.com/online-store/
-->
<!-- amCharts javascript sources -->
<script type="text/javascript" src="http://www.amcharts.com/lib/3/ammap.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/maps/js/worldLow.js"></script>
<!-- amCharts javascript code -->
<script type="text/javascript">
AmCharts.makeChart("map",{
"type": "map",
"pathToImages": "http://www.amcharts.com/lib/3/images/",
"addClassNames": true,
"fontSize": 15,
"color": "#FFFFFF",
"backgroundAlpha": 1,
"backgroundColor": "rgba(80,80,80,1)",
"dataProvider": {
"map": "worldLow",
"getAreasFromMap": true,
"images": [
{
"top": 40,
"left": 60,
"width": 80,
"height": 40,
"pixelMapperLogo": true,
"imageURL": "http://pixelmap.amcharts.com/static/img/logo.svg",
"url": "http://www.amcharts.com"
}
]
},
"balloon": {
"horizontalPadding": 15,
"borderAlpha": 0,
"borderThickness": 1,
"verticalPadding": 15
},
"areasSettings": {
"color": "rgba(129,129,129,1)",
"outlineColor": "rgba(80,80,80,1)",
"rollOverOutlineColor": "rgba(80,80,80,1)",
"rollOverBrightness": 20,
"selectedBrightness": 20,
"selectable": true,
"unlistedAreasAlpha": 0,
"unlistedAreasOutlineAlpha": 0
},
"imagesSettings": {
"alpha": 1,
"color": "rgba(129,129,129,1)",
"outlineAlpha": 0,
"rollOverOutlineAlpha": 0,
"outlineColor": "rgba(80,80,80,1)",
"rollOverBrightness": 20,
"selectedBrightness": 20,
"selectable": true
},
"linesSettings": {
"color": "rgba(129,129,129,1)",
"selectable": true,
"rollOverBrightness": 20,
"selectedBrightness": 20
},
"zoomControl": {
"zoomControlEnabled": true,
"homeButtonEnabled": false,
"panControlEnabled": false,
"right": 38,
"bottom": 30,
"minZoomLevel": 0.25,
"gridHeight": 100,
"gridAlpha": 0.1,
"gridBackgroundAlpha": 0,
"gridColor": "#FFFFFF",
"draggerAlpha": 1,
"buttonCornerRadius": 2
}
});
</script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$( document ).ready(function() {
console.log( "document loaded" );
color = "#000000";
document.getElementsByClassName("amcharts-map-area-FR")[0].setAttribute("fill", color);
}
);
$( window ).load(function() {
console.log( "window loaded" );
});
</script>
</head>
<body style="margin: 0;background-color: rgba(80,80,80,1);">
<div id="map" style="width: 100%; height: 767px;"></div>
</body>
</html>
Hope this problem can be solved !
Thanks !
Your code to manipulate fill color of the area is correct. However, it executes immediately on page load. At that point the map is still initializing, meaning there's no such element yet, hence it not working.
There are a number of ways to go about it.
If you just need to load the map with certain areas (countries) colored, you could do that with map's config:
"dataProvider": {
"map": "worldLow",
"getAreasFromMap": true,
"areas": [ {
"id": "FR",
"color": "#00FF00"
} ],
"images": [ {
"top": 40,
"left": 60,
"width": 80,
"height": 40,
"pixelMapperLogo": true,
"imageURL": "http://pixelmap.amcharts.com/static/img/logo.svg",
"url": "http://www.amcharts.com"
} ]
}
If that is not acceptable, or if you need to manipulate the map after it's built, I suggest you use map's API functions (getObjectById() to get area object, then validate() to refresh it) to manipulate area colors, rather than CSS.
You would also need to ensure that map is initialized before doing so. We can use init event for that.
Consider the following code:
AmCharts.makeChart("map", {
"type": "map",
// ...
"listeners": [{
"event": "init",
"method": function(event) {
var area = event.chart.getObjectById("FR");
area.color = "#000000";
area.validate();
}
}]
});
Here's a working example.
You could use the same event to manipulate color of the area using your CSS code, however I strongly suggest using API functions. While manipulating CSS directly may work, the changes might be reset when there's something going on on the map, such as when you hover the area.