Hello everyone,
I’m trying to apply Plotly’s autoresize function to a couple of “divs” laid out side-by-side.
Those div contain histograms made with plotly resources aswell.
Although, i’m not sure of how to build the auto-resize syntax elements without altering the ploting itself.
Could somebody direct me to how incorporate the function in the .js module ?
Thanks very much for your help.
Function :
(function() {
var d3 = Plotly.d3;
var WIDTH_IN_PERCENT_OF_PARENT = 60,
HEIGHT_IN_PERCENT_OF_PARENT = 80;
var gd3 = d3.select('body')
.append('div')
.style({
width: WIDTH_IN_PERCENT_OF_PARENT + '%',
'margin-left': (100 - WIDTH_IN_PERCENT_OF_PARENT) / 2 + '%',
height: HEIGHT_IN_PERCENT_OF_PARENT + 'vh',
'margin-top': (100 - HEIGHT_IN_PERCENT_OF_PARENT) / 2 + 'vh'
});
var gd = gd3.node();
Plotly.plot(gd, [{
type: 'bar',
x: [1, 2, 3, 4],
y: [5, 10, 2, 8],
marker: {
color: '#C8A2C8',
line: {
width: 2.5
}
}
}], {
title: 'Auto-Resize',
font: {
size: 16
}
});
window.onresize = function() {
Plotly.Plots.resize(gd);
};
})();
Histogram :
var xValue = ['6','6','6','7','7','7','7','7','7','7','7','7','8','8','8','8','8','8','8','8','8','8','8','9','9','9','9','9','10','10','10','11','11','11','11','11','12','13','13','14','14','14','15','15','15','18','21','22','23','30'];
var yValue = ['Blythe Eugene k','Chauhan Kamal r','Dabire Roch k','Abdel-ghaffar Fathy','Khan I a','Kim Soon-il','Kisinza William n','Kitau Jovin','Kongmee Monthathip','Leal Walter s','Matowo Johnson','Sathantriphop Sunaiyana','Ahn Young-joon','Akogbeto Martin c','Bouhsira Emilie','Conti Barbara','Corbel Vincent','Dhiman Sunil','Franc Michel','Mehlhorn Heinz','Nguessan Raphael','Rabha Bipul','Tsikolia Maia','Ali Arshad','Dickens Joseph c','Logan James g','Prabaripai Atchariya','Xue Rui-de','Kramer Matthew','Mosha Franklin w','Tungu Patrick k','Chandre Fabrice','Magesa Stephen m','Moore Sarah jane','Stanneck Dorothee','Veer Vijay','Wedge David e','Bangs Michael j','Benelli Giovanni','Demirci Betul','Fourie Josephus johannes','Grieco John paul','Achee N l','Baser Kemal husnu can','Soonwera Mayura','Ali Abbas','Khan Ikhlas a','Bernier Ulrich r','Chareonviryiphap Theeraphap','Tabanca Nurhayat'];
var trace1 = {
x: xValue,
y: yValue,
orientation:'h',
mode: 'text',
type: 'bar',
marker: {
color: 'rgb( 248, 196, 113 )',
opacity: 0.6,
line: {
color: 'rbg(8,48,107)',
width: 0
}
}
};
var annotationContent = [];
var data = [trace1];
var layout = {
title: '<b>Les auteurs les plus prolifiques en termes de publications</b>',
lenmode: 'fraction',
titlefont:{size:15,family:'Corbel'},
font: {
size:8.8,
},
annotations: annotationContent,
xaxis: {
title: '<b>Volume de publications</b>',
titlefont: {
family: 'Corbel',
size: 15,
color: ' #34495e '
}
},
yaxis: {
title: '<b>Auteurs</b>',
titlefont: {
family: 'Corbel',
size:15,
color: ' #34495e '
}
},
height:660,
margin: {
l: 160,
r: 40,
b: 40,
t: 80,
pad: 2,
}
};
for( var i = 0 ; i < xValue.length ; i++ ){
var result = {
x: xValue[i],
y: yValue[i],
text: xValue[i],
xanchor: 'left',
yanchor: 'middle',
showarrow: false
};
annotationContent.push(result);
}
Plotly.newPlot('myDiv14', data, layout);