We Keep Coding

Cant align center cytoscape graph

I want to align my cytoscape graph on the center of the canvass, can anyone help?
This is the result i get:
Heres my layout code:
var cy = window.cy = cytoscape({
// Contenedor
container: document.getElementById('graficaCytoscape'),
// Layout
layout: {
name: 'cose',
idealEdgeLength: 100,
nodeOverlap: 20,
refresh: 20,
padding: 30,
randomize: false,
componentSpacing: 100,
nodeRepulsion: 400000,
edgeElasticity: 100,
nestingFactor: 5,
gravity: 80,
numIter: 1000,
initialTemp: 200,
coolingFactor: 0.95,
minTemp: 1.0
},
// Styles
style: [{
"selector": "node",
"style": {
"width": "mapData(score, 0, 25, 30, 70)",
"height": "mapData(score, 0, 25, 30, 70)",
"content": "data(name)",
"font-size": "12px",
"background-color": "#c2c2c2",
"text-outline-color": "#555",
"text-outline-width": "2px",
"color": "#fff",
"overlay-padding": "6px",
"z-index": "10"
}
}, {
"selector": "edge",
"style": {
"curve-style": "haystack",
"haystack-radius": "0.5",
"opacity": "0.4",
"line-color": "#EC0000",
"width": "mapData(weight, 0, 1, 1, 8)",
"overlay-padding": "3px"
}
}],
// Data
elements: data
});
So what i need is that the graph goes to the center of its container.
I think its a easy question but i never worked before with cytoescape and im stucked in this.
Thanks.

You may try to use cy.center() when you in .js file while rendering your graph.
Cytoscape.js documentation: https://js.cytoscape.org/#cy.center
You can try to add cy.center() in script.js file to see the effect in this example: http://embed.plnkr.co/O7mWEfZuIhhtahdAhsAM/
Alternatively, from your code, you can also try to add cy.center() at the end of the cy variable declaration.

At last i could do it with:
pan: { x: 400, y: 100 },

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.

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);

Why is vis.js adding an unexpected amount of space between trees?

With regards to the code below, I could not figure out why vis.js added a lot of space between trees.
var options = {
//locale: 'en',
interaction:{hover:true, dragNodes :false},
layout: {
randomSeed: undefined,
hierarchical: {
enabled: true,
parentCentralization: true,
}
},
edges: {
color: {
opacity: 0.4,
}},
};
https://jsfiddle.net/pavn23/zmttds9q/

It has to do with the physics default.
You can change it to false.
You can also config the treeSpacing like so...
physics: false,
/*layout: {
hierarchical: {
enabled: true,
levelSeparation: 190,
nodeSpacing: 250,
treeSpacing: 280,
sortMethod: "hubsize"
}
}*/

bxslider can't use jQuery functions in navigation

I'm trying to call a jQuery click function at the navigation of my bxslider like the following:
$("a.bx-next").click(function(){
alert("works!");
});
the problem is, that somehow i can't access anything that is in the .bx-controls section... if i try to:
$(".bx-viewport li").click(function(){
alert("works!");
});
it works as expected...
is there anyone, who experienced the same or knows, what the problem could be?
thanks in advance :)
EDIT
Actually i am using Drupal and the views slideshow plugin to include the bxslider... i don't know, what impact that could have, but these are the options given in JSON:
"viewsSlideshowBxslider": {
"views_slideshow_bxslider_images_1": {
"general": {
"mode": "horizontal",
"speed": 500,
"slideMargin": 0,
"startSlide": 0,
"randomStart": 0,
"infiniteLoop": 1,
"hideControlOnEnd": 0,
"captions": 1,
"ticker": 0,
"tickerHover": 0,
"adaptiveHeight": 0,
"adaptiveHeightSpeed": 500,
"video": 0,
"touchEnabled": 1,
"preloadImages": "all",
"disable_standard_css": 0,
"useCSS": 1,
"align_image": "left",
"align_caption": "left",
"swipeThreshold": 50,
"oneToOneTouch": 1,
"preventDefaultSwipeX": 1,
"preventDefaultSwipeY": 0,
"color_caption": "80, 80, 80, 0.75"
},
"controlsfieldset": {
"controls": 1,
"nextText": "",
"prevText": "",
"startText": "",
"stopText": "",
"autoControls": 0,
"autoControlsCombine": 0
},
"pagerfieldset": {
"pager": 1,
"pagerType": "full",
"pagerShortSeparator": " \/ "
},
"autofieldset": {
"pause": 4000,
"autoStart": 1,
"auto": 0,
"autoHover": 0,
"autoDelay": 0,
"autoDirection": "next"
},
"carousel": {
"minSlides": 4,
"maxSlides": 6,
"moveSlides": 1,
"slideWidth": 0
},
"callback": [
],
"fixes": {
"height_does_not_dyn_change": 0
}
}
}

okay, i found it on my own...
i'm not sure if it didn't work, because of the implementation via Drupal.
I had to define custom navigation like
<p><span id="slider-prev"></span> | <span id="slider-next"></span></p>
and then in a custom js file
$('.bxslider').bxSlider({
nextSelector: '#slider-next',
prevSelector: '#slider-prev',
nextText: 'Onward →',
prevText: '← Go back',
onSlideNext: function(){
handleBxNav("next");
},
onSlidePrev: function(){
handleBxNav("prev");
}
});
function handleBxNav(direction){
if(direction == "prev"){
console.log("prev");
}else{
console.log("next");
}
}
with this solution, i can add custom events to the navigation :)
hope it helps if anyone is running in the same issue