Black Lives Matter. Please consider donating to Black Girls Code today.
Learn how to use COVID-19 data in open source Dash apps. Register for the Sept 23rd webinar with IQT!

Autoresize function multiple charts on same page

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

Back,

I’ve tried this incorporation, but it doesn’t display.
Should i delete my trace1 variable and replace it by ‘gd’ directly ?

How to handle the last part where i initiate the function to the data, and still respect my div emplacement and layout ?
Much appreciated if anyone had an idea on this rather simple issue.

                    (function() {
                                var d3 = Plotly.d3;

                            var WIDTH_IN_PERCENT_OF_PARENT = 10,
                                HEIGHT_IN_PERCENT_OF_PARENT = 20;

                            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();
                            
                var xValue = ['3','3','3','3','3','4','4','4','4','4','4','4','4','4','4','4','4','4','4','4','5','5','5','5','5','5','5','5','5','5','6','6','6','7','7','8','8','9','9','11','11','14','16','17','18','19','20','22','25','28'];
                var yValue = ['HEINZ US','NAVY SYSTEMS COMMAND','UNIVs ANGERS FR','UNIVs ANNAMALAI NAGAR IN','UNIVs BEIJING CN','CIRAD FR','CIVIL UNIV ILLINOIS','UNIVs BARI IT','UNIVs BASEL CH','UNIVs GIZA EG','UNIVs LONDON GB','UNIVs NANCHONG CN','UNIVs RIVERSIDE US','UNIVs SAO PAULO BR','UNIVs VIENNA AT','CREC COTONOU BENIN','DEFENCE RES TEZPUR ASSAM IN','ESC VET UNIV GOIANIA BR','INST TROP MED ANTWERP BELGIUM','UNIV CHIANG MAI TH','INDIAN INST TECHNOL IN','INRA FR','UNIV ATHENS  GREECE','UNIVs BURNABY CA','UNIVs NAGASAKI JP','UNIVs NEW YORK NY US','UNIVs PRETORIA ZA','UNIVs RALEIGH US','UNIVs RECIFE BR','UNIVs UPPSALA SE','IRD FR','UNIVs CAMBRIDGE MA US','UNIVs SEOUL KR','INST PASTEUR SHANGHAI','UNIVs GAINESVILLE FL US','UNIVs DAVIS US','ANAST MOSQU AUGUSTINE FL USA','BAYER DE','UNIVs TEHRAN IR','MERIAL','UNIVs NEW DELHI IN','UNIVs PISA IT','IFAKARA INST TZ','CNRS FR','UNIV TUMAINI & MOSHI MUHEZA TZ','INST LADKRABANG BANGKOK TH','LONDON TROPICAL MED UK','UNIVs MISSISSIPPI US','UNIVs BANGKOK TH','USDA US'];


                Plotly.plot(gd, [{

                var trace1 = {
                 x: xValue, 
                 y: yValue,
                 orientation:'h',
                 type: 'bar',
                 marker: {
                    color: 'rgb(237,125,49)',
                    opacity: 0.6,
                    line: {
                        color: 'rbg(8,48,107)',
                        width: 0
                        }
                     }
                    
                };

                var annotationContent = [];
                var data = [trace1];

                var layout = {
                    title: '<b>Répartition des volumes publiés par acteurs</b>',
                    titlefont:{size:15,family:'Corbel'},
                    font: {
                        size:8.5,
                        },
                    annotations: annotationContent,
                    xaxis: {
                        title: '<b>Volume de publications</b>',
                        titlefont: {
                            family: 'Corbel',
                            size: 15,
                            color: ' #34495e '
                            }
                    }, 
                    yaxis: {
                        title: '<b>Affiliations</b>',
                        titlefont: {
                            family: 'Corbel',
                            size:15,
                            color: '  #34495e  '
                            }

                    },
                    height:665,
                    margin: {
                        l: 220,
                        r: 30,
                        b: 40,
                        t: 80,
                        pad: 1,
                    }
                    
                }}];

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

                window.onresize = function() {
                                Plotly.Plots.resize('myDiv13', gd, layout);
                            };
                            
                //Plotly.newPlot('myDiv13', data, layout);

Okay, i managed to make it work on my browser.

Although, as i’m using side-by-side histograms, i copy/pasted the js module and change the data / variable names respectuflly to make the next histogram adapt to frame size as well.

They both display, but it seems only one of the two takes the autoresize function.
Is there something about that i can’t use a specific function for two graphs or more on the same page ?

        (function() {
        var d3 = Plotly.d3;

        var WIDTH_IN_PERCENT_OF_PARENT = 100;

        var gd3 = d3.select('#myDiv13')
            .style({
                width: WIDTH_IN_PERCENT_OF_PARENT + '%',
                'margin-left': (100 - WIDTH_IN_PERCENT_OF_PARENT) / 2 + '%',

            });

        var gd = gd3.node();

        // Build ('where_to_store_chart', 'which_data', 'which_layout')
        Plotly.plot(gd, [{
            
            // insert here the data, may it be in-line or stocked in variables
            type: 'bar',
            orientation:'h',
            x: xValue, 
            y: yValue,
            marker: {
                color: '#C8C2C8',
                line: {
                    width: 0.0
                }
            }

        }], {

            // insert here all lay-out parameters
            title: '<b>Répartition des volumes publiés par entités</b>',
            lenmode: 'fraction',
            titlefont: {
                size:15,family:'Corbel'
                },
            font: {
                size:8.8,
            },
            
            height: 650,
            
            xaxis: {
                title: '<b>Volume de publications</b>',
                titlefont: {
                    family: 'Corbel',
                    size: 15,
                    color: '#34495e'
                }
            },
            
            yaxis: {
                title: '<b>Acteurs</b>',
                titlefont: {
                    family: 'Corbel',
                    size:15,
                    color: '#34495e'
                }    
            },
            
            margin: {
                l: 220,
                r: 30,
                b: 40,
                t: 80,
                pad: 3,
            },
            
        }),

        window.onresize = function() {
            Plotly.Plots.resize(gd);
        };

        })();

You might wan to look at Responsive plotly.js was working, now it is not

1 Like

Bummer…

Thank you so much.