how to override the studies of the tradingview widget - javascript

I am trying to customize a trading view widget without success, I want to change the color of the RSI Indicator, and change the levels, this is the code:
new TradingView.widget({
"container_id": "box" + i,
"autosize": true,
"symbol": chartTicker,
"interval": intervalValue,
"timezone": timezoneValue,
"theme": theme,
"style": "1",
"locale": "en",
"toolbar_bg": toolbarbg,
"enable_publishing": false,
// "hide_legend": true,
"hide_top_toolbar": false,
"hide_side_toolbar": false,
"save_image": false,
"allow_symbol_change": allowsymbolchange,
"show_popup_button": false,
"withdateranges": withdateranges,
"details": details,
"hideideas": true,
"disabled_features": ["use_localstorage_for_settings", create_volume_indicator_by_default"],
"enabled_features": ["move_logo_to_main_pane", "hide_left_toolbar_by_default"],
// "disabledDrawings": true,
"studies_overrides": {
"rsi.rsi.plot.color": "#2196f3",
"rsi.level.0": 20,
"rsi.level.1": 80
},
"studies": [
"RSI#tv-basicstudies"
],
});
Thanks in advance

I have this code working just right. Perhaps you can use to find the error.`
var studies = [
{
id: "IchimokuCloud#tv-basicstudies",
version: 2.0
},
{
id: "BB#tv-basicstudies",
inputs: {
length: 25
},
},
{
id: "MASimple#tv-basicstudies",
inputs: {
length: 200
}
},
{
id: "MASimple#tv-basicstudies",
inputs: {
length: 100
}
},
{
id: "MASimple#tv-basicstudies",
inputs: {
length: 50
}
},
{
id: "MASimple#tv-basicstudies",
inputs: {
length: 9
}
},
{
id: "RSI#tv-basicstudies",
},
{
id: "RSI#tv-basicstudies",
inputs: {
length: 4
}
}
];
var chart1 = new TradingView.widget(
{
autosize: true,
symbol: "OANDA:EURUSD",
interval: "3",
timezone: "America/Bogota",
theme: "dark",
style: "1",
locale: "en",
hide_side_toolbar: true,
hide_top_toolbar: false,
enable_publishing: false,
allow_symbol_change: true,
details: false,
hidevolume: true,
studies: studies,
container_id: "tradingview_1"
}
);
Hope it is useful.

the correct way to do it is, like the example below
new TradingView.widget({
"container_id": "box" + i,
"autosize": true,
"symbol": chartTicker,
"interval": intervalValue,
"timezone": timezoneValue,
"theme": theme,
"style": "1",
"locale": "en",
"toolbar_bg": toolbarbg,
"enable_publishing": false,
// "hide_legend": true,
"hide_top_toolbar": false,
"hide_side_toolbar": false,
"save_image": false,
"allow_symbol_change": allowsymbolchange,
"show_popup_button": false,
"withdateranges": withdateranges,
"details": details,
"hideideas": true,
"disabled_features": ["use_localstorage_for_settings", create_volume_indicator_by_default"],
"enabled_features": ["move_logo_to_main_pane", "hide_left_toolbar_by_default"],
// "disabledDrawings": true,
"studies": [
{
id: "RSI#tv-basicstudies",
inputs: {
length: 4
}
}
]
});
You can set inputs of any indicator like this, but I do not know how to change default styles of the indicators. Maybe you know.

Use the following code to customize RSI oscillator.
"studies_overrides": {
"relative strength index.rsi.color": "#2196f3",
"relative strength index.upper band.color": "#2100f5",
"relative strength index.lower band.color": "#2100f5",
"relative strength index.upper band.value": 80,
"relative strength index.lower band.value": 20,
},
"studies": [
"RSI#tv-basicstudies"
]

for example in tradingview constructor:
new Tradingview.widget({
overrides: {
"paneProperties.background": "#ffffff"
},
studies_overrides: {
"volume.volume.color.0": "#00FFFF",
}
})
Normally I would add more about the solution, but the library isn't open source and its licensing terms might prohibit reproducing any of its documentation.

Related

Swiper slider dynamic pagination

I'm using swiper slider and don't know how to get rid of the empty space when the slider comes to the first or last element, can you tell me please
https://monosnap.com/file/jLTCNd8CIT82h6WNqGbP5qxVKWkS8d
Tried find some property in Swiper slider API and make styles
{
"loop": true,
"slidesPerView": 3,
"observer": true,
"loopFillGroupWithBlank": true,
"slidesPerGroup": 1,
"initialSlide": 3,
"navigation": {
"nextEl": ".collection-slider-2-swiper-button-next",
"prevEl": ".collection-slider-2-swiper-button-prev"
},
"pagination": {
"el": ".swiper-pagination",
"dynamicBullets": true
},
"breakpoints": {
"320": {
"slidesPerView": 2,
"spaceBetween": 20,
"pagination": {
"type": "progressbar"
}
},
"1024": {
"slidesPerView": 2,
"pagination": {
"type": "bullets"
}
},
"1440": {
"slidesPerView": 3,
"spaceBetween": 30
}
}
}

Tradingview Simple Moving Average widget configure

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,
},

How to modify default style of tradingview widget indicators?

Right now, I know how to define default inputs for indicators of the widget (see code below). But I want to define default styles. I have not found the right way to do it. Anyone knows?
var chart = new TradingView.widget(
{
autosize: true,
symbol: "OANDA:EURUSD",
interval: "3",
timezone: "America/Bogota",
theme: "dark",
style: "1",
locale: "en",
hide_side_toolbar: true,
hide_top_toolbar: false,
toolbar_bg: "#f1f3f6",
enable_publishing: false,
allow_symbol_change: true,
details: false,
hidevolume: true,
studies: [
{
id: "IchimokuCloud#tv-basicstudies",
version: 2.0
},
{
id: "Stochastic#tv-basicstudies",
inputs: {
K: 3,
}
}
],
container_id: "tradingview_7f23e"
}
);
You should pay for tradingview and check the documentation. but
studies_overrides: {
"volume.volume.color.0": "#00FFFF",
},
i think is your answer.
search for studies_overrides

How to configure JS-CSS-HTML Formatter so multiline if conditions are formatted correctly?

I am using the JSS-CSS-HTML formatter with an 'indent_size: 2' but the formatter does not format multiline js if conditions properly. Is there a way to format the multiline if conditions such that auto indent does not apply to new break lines and are indented such that they only occur after the if parantheses?
JS-CSS-HTML formatter gives script.js below:
if (e.target.classList.contains('apple') &&
!e.target.classList.contains('orange')) {
console.log(e.target)
} else if (e.target.classList.contains('wheat') &&
e.target.classList.contains('rice')) {
console.log(e.target)
}
want script.js below:
if (e.target.classList.contains('apple') &&
!e.target.classList.contains('orange')) {
console.log(e.target)
} else if (e.target.classList.contains('wheat') &&
e.target.classList.contains('rice')) {
console.log(e.target)
}
my formatter.json config file below:
{
"onSave": true,
"javascript": {
"indent_size": 2,
"indent_char": " ",
"eol": "auto",
"preserve_newlines": true,
"break_chained_methods": false,
"max_preserve_newlines": 0,
"space_in_paren": false,
"space_in_empty_paren": false,
"jslint_happy": false,
"space_after_anon_function": false,
"keep_array_indentation": false,
"space_before_conditional": true,
"unescape_strings": false,
"wrap_line_length": 0,
"e4x": false,
"end_with_newline": false,
"comma_first": false,
"operator_position": "before-newline",
"brace_style": "collapse-preserve-inline"
},
"css": {
"indent_size": 2,
"indentCharacter": " ",
"indent_char": " ",
"selector_separator_newline": true,
"end_with_newline": false,
"newline_between_rules": true,
"eol": "\n"
},
"html": {
"indent_inner_html": false,
"indent_size": 2,
"indent_char": " ",
"indent_character": " "
}
}
I think mine is set up with what you're looking for.
"javascript": {
"indent_size": 4,
"indent_char": " ",
"eol": "auto",
"preserve_newlines": true,
"break_chained_methods": false,
"max_preserve_newlines": 0,
"space_in_paren": false,
"space_in_empty_paren": false,
"jslint_happy": false,
"space_after_anon_function": false,
"keep_array_indentation": false,
"space_before_conditional": true,
"unescape_strings": false,
"wrap_line_length": 0,
"e4x": false,
"end_with_newline": false,
"comma_first": false,
"brace_style": "collapse-preserve-inline"
},

Trying to add the values of certain keys in my array to use in my React App

I have an array of objects. One particular key/pair I want to add the total of accumulated storage.
"AllocateStorage": 200,+ "AllocateStorage": 585,+ "AllocateStorage": 103547,= 104,242
[{
"MonitoringState": "disabled",
"State_Code": 16,
"State_Name": "running",
"EbsOptimized": false,
"EnaSupport": true,
"AllocateStorage": 200,
"SourceDestCheck": true,
"SpotInstanceRequestId": "None",
"SriovNetSupport": "None",
"StateReason_Code": "None",
"StateReason_Message": "None"
},
{
"MonitoringState": "disabled",
"State_Code": 16,
"State_Name": "stopped",
"EbsOptimized": false,
"EnaSupport": true,
"AllocateStorage": 585,
"SourceDestCheck": true,
"SpotInstanceRequestId": "None",
"SriovNetSupport": "None",
"StateReason_Code": "None",
"StateReason_Message": "None"
},
{
"MonitoringState": "disabled",
"State_Code": 16,
"State_Name": "running",
"EbsOptimized": false,
"EnaSupport": true,
"AllocateStorage": 103547,
"SourceDestCheck": true,
"SpotInstanceRequestId": "None",
"SriovNetSupport": "None",
"StateReason_Code": "None",
"StateReason_Message": "None"
}
]
What would be the best way of going about this. I have looked into .reduce but the examples show only adding the whole array.
Reduce is the way to go yet:
let total = arr.reduce((total, obj) => {
return total += obj.AllocateStorage
}, 0);

Categories