We Keep Coding

how to override the studies of the tradingview widget

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.

Highchart.js: use bootstrap glyphicons instead of symbols on contextbutton

How can i use bootstrap glyphicons instead of "regular" symbols in the contextbuttons of Highcharts. Going to exporting > buttons > contextButton.
I have added some glyphicon in the className propery, but the symbol shows up instead. Is there any way to override this?
Here is an example JSON object for Highcharts:
{
"chart": {
"type": "column",
"renderTo": "periodChart"
},
"title": {
"text": "Verkoop per periode"
},
"xAxis": {
"categories": ["2015", "2016", "2017"]
},
"yAxis": {
"title": {
"text": "Aantal verkochte producten"
}
},
"exporting": {
"buttons": {
"contextButton": {
"align": "right",
"symbol": "menu",
"height": 22,
"width": 24,
"y": 0,
"x": 0,
"className": "glyphicon glyphicon-print",
"enabled": true
}
}
},
"series": [{
"borderColor": "#555",
"data": [{
"name": "2015",
"y": 6121.0
}, {
"name": "2016",
"y": 6172.0
}, {
"name": "2017",
"y": 4943.0
}],
"name": "Aantallen per jaar (P/s)"
}]
}
I have added the following packages to my html, along with bootstrap and jquery:
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
Edit: when i leave the symbol property empty ("") then nothing shows up. Not using the property at all will result in the default "menu" symbol.

EDIT
The post before the edit contained only the information how to add a regular image as a background to the context button which wasn't the actual answer for this question.
Here I used glyphicon as a charcter in the text of te button: http://jsfiddle.net/kkulig/LoLtm8bn/
I haven't found a way to completely disable the symbol in the context button. The workaround for this is to hide it but the space reserved for it still remains there.
I ended up using the approach from Full text button example in this API record: https://api.highcharts.com/highcharts/exporting.buttons.contextButton.text (contextButton disabled, exportButton used instead).
Live demo: http://jsfiddle.net/kkulig/np80zf58/
END OF EDIT
Context button is an SVG element so you need to use defspattern for this:
JS:
events: {
load: function() {
var chart = this,
renderer = chart.renderer;
var pattern = renderer.createElement('pattern').add(renderer.defs).attr({
width: 1,
height: 1,
id: "image1",
patternContentUnits: 'userSpaceOnUse'
});
renderer.image('https://www.highcharts.com/samples/graphics/sun.png', 0, 0, 24, 24).add(pattern);
}
}
CSS:
// hide the default symbol
.highcharts-button-symbol {
display: none
}
// use a new one
.highcharts-button-box {
fill: url(#image1)
}
Live working example: http://jsfiddle.net/kkulig/2cpvuydd/
SO related question: Fill SVG path element with a background-image
Highcharts docs reference: https://www.highcharts.com/docs/chart-design-and-style/gradients-shadows-and-patterns
Highcharts API reference:
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer

Materialize data table fixed header with custom scroll

I am using materialize data table in my application, using which I have implemented fixed header functionality. This is working fine for default page scroll bar.
Fixed Header with default scroll bar
HTML Code:
<div id="tblContainer" class="material-table z-depth-3 hoverable">
<table id="myTable" class="highlight"></table>
</div>
JS Code:
$(document).ready(function(){
var data2 = {
"results": [{"Name":"test1", "Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"},
{"Name":"test1", "Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"},
{"Name":"test 1",
"Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"},
{"Name":"test 1","Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"},
{"Name":"test 1","Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"},
{"Name":"test 1","Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"},
{"Name":"test 1","Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"},
{"Name":"test 1","Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"},
{"Name":"test 1","Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"}
]
};
$('#myTable').dataTable({
data: data2.results,
"order": [],
"bSort": false,
"bInfo": false,
"paging": false,
"searching": false,
columns: [
{ data: 'Name', title: "Name" },
{ data: 'Amount', title: "Amount" },
{ data: 'Profit', title: "Profit" },
{ data: 'Loss', title: "Loss" },
{ data: 'Age', title: "Age" },
{ data: 'Address', title: "Address"},
{ data: 'Loss', title: "Loss" },
{ data: 'Age', title: "Age" },
{ data: 'Address', title: "Address"}
],
"columnDefs": [
{ "width": "200px", "targets": [0] },
{ "width": "100px", "targets": [1] },
{ "width": "100px", "targets": [2] },
{ "width": "100px", "targets": [3,6] },
{ "width": "100px", "targets": [4,7] },
{ "width": "200px", "targets": [5,8] }
],
"fixedHeader": {
header: true
}
});
});
But when I set width for table and used custom scrolling means fixed header is not changing based on scroll.
Fixed Header with custom scroll bar
In the above code, I changed my HTML part like this and added this css. But fixed header is not working.
HTML Code:
<div class="row">
<div class="col s8 m5">
<div id="tblContainer" class="material-table z-depth-3 hoverable">
<table id="myTable" class="highlight"></table>
</div>
</div>
</div>
CSS Code:
#myTable_wrapper {
overflow-x:auto;
}
I have attached my two example JSFiddle here. How to achieve fixed header for custom scoll bar in materialize data table?

Apparently datatables' fixed header does not support scoll-x at all. I tried one or two moths ago, but couldn't find a solution. Read the topic here
Yet, i managed to solve this by changing my page design. I did not use a fixed header. But put my table at the top of the div, meaning no search box or pagination or anything on top of the table. Just like your first JSFiddle example.
After that, i gave an height to scrollY, and my header became fixed. What i mean is;
get rid of
"fixedHeader": {
header: true
}
and put these lines instead.
"ScrollX": true,
"scrollCollapse": true,
"sScrollY": 400
Try this on JSFiddle
Also, you can make the height dynamic, like:
"sScrollY": calcDataTableHeight(),
And function
var calcDataTableHeight = function() {
h = $('#wrapper').height() - 150;
return h;
};
you can play with the numbers, but dont forget to declare the function before initiating it.

Display jQuery DataTables with Ajax data source in a popup

I am trying to give a list in a popup according to Ajax request. Before Ajax request , list is in popup but after Ajax request, list stay in the page instead of popup and also there is the old list in the popup window. Here is the codes
<script>
function CreateMap() {
var chart = AmCharts.makeChart("piechartdiv", {
"type": "pie",
"theme": "light",
"fontFamily":"Calibri",
"dataProvider": [{
"product":"Following",
"value": #following,
"color": "#009688"
}, {
"product":"Not Following",
"value": #notFollowing ,
"color": "#555555"
}],
"legend": {
"align" : "right",
"fontSize" : 14
},
"marginLeft":-100,
"marginTop":-45,
"marginBottom":0,
"labelsEnabled":false,
"colorField": "color",
"valueField": "value",
"titleField": "product",
"outlineAlpha": 0.4,
"depth3D": 15,
"balloonText": "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>",
"angle": 20,
"export": {
"enabled": true
}
});
jQuery('.chart-input').off().on('input change', function () {
var property = jQuery(this).data('property');
var target = chart;
var value = Number(this.value);
chart.startDuration = 0;
if (property == 'innerRadius') {
value += "%";
}
target[property] = value;
chart.validateNow();
});
chart.addListener("clickSlice", function (event) {
if ( event.dataItem.title == 'Unfollowing')
{
document.getElementById("s_open").click();
}
});
}
var isAjax = #isAjax;
if(isAjax)
{
CreateMap();
}
else
{
AmCharts.ready(function () {
CreateMap();
});
}
}
<button id="s_open" class="s_open btn-default" style="display:none;">Open popup</button>
<div id="s_follow">
<div class="row" style="border-radius:5px; padding:20px; background-color:#fff;">
<table id="hostTable" class="table table-striped" cellspacing="0">
<thead>
<tr>
<th>Host Table</th>
</tr>
</thead>
<tbody>
#Html.Raw(comparedDataTable.ToString())
</tbody>
</table>
<button class="btn s_close btn-danger">Close</button>
</div>
<script>
$(document).ready(function () {
$('#hostTable').DataTable( {
dom: 'Bfrtip',
buttons: [
'excelHtml5',
'csvHtml5'
],
destroy: true,
} );
});
$(document).ready(function () {
// Initialize the plugin
$('#s_follow').popup({
color: 'black',
opacity: 0.5,
transition: '0.3s',
scrolllock: true
});
});
How can we put the list hostTable into popup after ajax request?

SOLUTION
Use onopen option to initialize the table, see the code below.
$(document).ready(function () {
$('#s_follow').popup({
color: 'black',
opacity: 0.5,
transition: '0.3s',
scrolllock: true,
vertical: "top",
onopen: function() {
// If table was initialized before
if ($.fn.DataTable.isDataTable('#hostTable')){
// Clear table
$('#hostTable').DataTable().clear();
}
$('#hostTable').DataTable( {
dom: 'Bfrtip',
buttons: [
'excelHtml5',
'csvHtml5'
],
destroy: true
});
}
});
});
DEMO
See this jsFiddle for code and demonstration.

jquery grid not filled with JSon data

Hi I am not able to get the data from JSON loaded on to grid,
HEre is my code for the grid wich displays the stock prices for the stock for a user :
$(document).ready(function () {
// $("#jQGrid").html("<table id=\"list\"></table><div id=\"page\"></div>");
jQuery("#jqTable").jqGrid({
url:jqDataUrl,
datatype: "json",
mtype: "POST",
height: 250,
// Specify the column names
colNames: ["SYMBOL", "LAST", "CHANGE", "%CHANGE","HIGH/LOW"],
// Configure the columns
colModel: [
{ name: "SYMBOL", index: "SYMBOL", width: 200, align: "left" },
{ name: "LAST", index: "LAST", width: 200, align: "left" },
{ name: "CHANGE", index: "CHANGE", width: 200, align: "left" },
{ name: "%CHANGE", index: "%CHANGE", width: 200, align: "left"},
{ name: "HIGH/LOW", index: "HIGH/LOW", width: 200, align: "left"}
],
jsonReader : {
root: "rows",
page: "page",
total: "total",
records: "records",
cell: "cell",
id: "id",
},
multiselect: false,
// paging: true,
// rowNum:10,
// rowList:[10,20,30],
pager: $("#jqTablePager"),
loadonce:true,
caption: "WatchList"
}).navGrid('#jqTablePager',{edit:false,add:true,del:true});
}
});
But when i try and run the code i am not able to get the contents on to the table (but the grid loads with no content)
And My json is of the form :
{
total: "1",
page: "1",
records: "2",
rows :
[
{id:"1", cell:["cell11", "cell12", "cell13","cell13","cell13"]},
{id:"2", cell:["cell21", "cell22", "cell23","cell13","cell13"]}
]
}
Please help me solve the problem

UPDATE:
I discovered that if you do not put repeatitems:true option into json reader, jqGrid assumes that you are using json dot notation. When you put it into jsonReader, your data is properly loaded. Here is working example: http://jsfiddle.net/a5e5F/3/
Old version:
I played a lot with your jqgrid code, and it seems that there is a bug in this version of jqGrid, which causes your jsonReader not to work. It reads data directly, ignoring root element and assuming that your data is array of json objects in format
{propertyName1:'PropertyValue1', propertyName2:'PropertyValue2', ...}
You can see what I mean on http://jsfiddle.net/a5e5F/2/
If you replace data:rows with data:data (your format of data), it does not load data. Maybe you should try to change your json data to use real json format (with properties named as columns)?
I have been trying a ton of stuff, changing column names to check for issue in #Barmar's coment, which I also thought it is the cause.