Réglage de Google Charts largeur sur les temps de chargement

J'ai cette google graphique sur mon site. C'est un graphique en nuages de points pour l'instant, mais je voudrais la solution pour tous les types de graphiques.
Si vous chargez le site avec un de 700 px de large fenêtre par exemple, les dimensions du graphique ne sont pas sensibles: le tableau est trop large.
Ci-dessous le code que j'utilise.

HTML:

<div id="chart_div"></div>

CSS:

#chart_div {
    width:100%;
    height:20%;
}

JS:

var options = {
        title: 'Weight of pro surfer vs. Volume of his pro model',
        hAxis: {title: 'Weight (kg)', minValue: 53, maxValue: 100}, //55
        vAxis: {title: 'Volume (l)'}, //, minValue: 20, maxValue: 40},   //20
        legend: 'none',
           width: '100%',
            height: '100%',
           colors: ['#000000'],
           series: {
                  1: { color: '#06b4c8' }, 
              },
        legend: {position: 'top right', textStyle: {fontSize: 8}},
        chartArea: {width: '60%'},
           trendlines: { 0: {//type: 'exponential',
                    visibleInLegend: true,
                    color: 'grey',
                    lineWidth: 2,
                    opacity: 0.2,
                    labelInLegend: 'Linear trendline\n(Performance)'
                    } 
                }    //Draw a trendline for data series 0.
    };
    var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));        
    chart.draw(data, options);
    google.visualization.events.addListener(chart, 'ready', myReadyHandler());

    function myReadyHandler() {
        chartDrawn.resolve();       }

Edit: Il semble que la div #chart_div a la bonne taille (celle que j'ai mis avec css), mais le graphique à l'intérieur de ce div ne s'adapte pas sa taille...il reste verrouillé avec
Voir l'image:
Réglage de Google Charts largeur sur les temps de chargement

Vous devez modifier la question pour spécifier que vous demandez sur le réglage de la largeur sur les temps de chargement, pas de sujet sensible graphiques.

OriginalL'auteur Louis | 2014-08-27

  1. 13

    Depuis la Visualisation de l'API graphiques ne sont pas sensibles à tous, vous avez à gérer tout sur votre propre. Typiquement, cela signifie à l'écoute de la fenêtre "zoom" de l'événement et de le restituer votre diagramme (paramètre de dimension appropriée):

    function resize () {
    //change dimensions if necessary
    chart.draw(data, options);
}
if (window.addEventListener) {
    window.addEventListener('resize', resize);
}
else {
    window.attachEvent('onresize', resize);
}
    merci pour votre réponse, mais pour l'instant je ne suis pas d'événement à penser à l'adaptation de la taille du graphique lors du redimensionnement de la windown, mais juste faire quand le site se charge...pour obtenir ses dimensions droite lorsque le chargement de la page. Resigin les fenêtres seront à l'étape suivante. Ne comprenez-vous ?
    Si vous définissez les dimensions du conteneur div en CSS pour cent, alors que la taille de la carte sera de définir dynamiquement en fonction de la taille de son conteneur.
    c'est ce que je pensais, et c'est exactement ce que je fais déjà: j'ai mis à jour la question avec le html de sorte que vous pouvez voir. Si je change le width valeur de 100% à 20% par exemple, il ne permet pas de modifier la taille du graphique. Vous ckeck le ici : boardlineapp.com/#faq
    J'ai dupliqué votre graphique (jsfiddle.net/asgallant/j3778edd) et ne pas avoir les mêmes problèmes avec les dimensions. Il est probable que certains CSS/javascript ailleurs sur votre site, qui est à l'origine du problème.
    oui en effet c'est bizarre ! Pouvez-vous inspecter le site boardlineapp.com/#faq et regardez si vous trouvez quelques interférer css ? Parce que je ne trouve rien...Merci beaucoup pour votre aide

    OriginalL'auteur asgallant

  2. 5

    Pour moi, rien de ce qui précède travaillé ou qu'ils étaient trop complexes pour moi de lui donner un essai.

    La solution que j'ai trouvé est simple et fonctionne parfaitement. Il consiste juste à la construction d'une normale Google Chart, dans mon cas, un donut graphique, puis le style à l'aide de CSS.

    @media screen and (max-width: 1080px) {
    div#donutchart {
        zoom:0.6;
        margin-left:-16%;
    }
}

    C'est tout. Bien sûr, vous pouvez définir d'autres valeurs pour max-width, de zoom et de marges d'avoir votre graphique s'adapte parfaitement. Mon tableau est de 800x600 (vous pouvez le voir ici).

    OriginalL'auteur Olaf

  3. 3

    mis largeur 100% de la carte et d'appeler la fonction de redimensionnement comme ci-dessous

    $(window).resize(function(){
   yourCallingChartFunction();
});
    Merci de nous donner quelques détails sur l'endroit où la largeur doit être mis (options, css, ou n'importe où ailleurs) et ce getShotHistory sens pour nous. Ce morceau de code que dire de nous pour écouter l'événement resize, pas plus.
    vous devez mettre votre propre fonction à la place de getShotHistory();. J'ai créé mon propre. Vous devez appeler la fonction où vous devez créer un graphique de la fonctionnalité. $(window).redimensionner(function(){ yourChartFunction(); }); Vous devez fournir la largeur à 100% dans votre chartChartFunction();
    Je suis en supposant que vous êtes en utilisant bootstrap pour le responsive design. Vous avez besoin de joindre l'ensemble du graphique div à l'intérieur de l'autre div avec certaines classes comme le col-sm-12 col-md-4, col-lg-4 col-sm-12 col-md-6, col-lg-6 tout ce que vous voulez que par l'exigence.

    OriginalL'auteur Azhar Ahmad

  4. 2

    Pour répondre à la charge de travaux:

    #chart_div {
width:inherit;
height:inherit;
}

    Bien qu'il ne marche pas de travail lorsque la taille de l'écran change en cours de session.

    OriginalL'auteur Airon Roosalu

  5. 1

    Si vous utilisez Twitter Bootstrap, depuis la v3.2 vous pouvez tirer parti de la embed-responsive styles:

    <div class="embed-responsive embed-responsive-16by9">
  <div id="chart_div" class="embed-responsive-item"></div>
</div>

    Ou si vous voulez le format 4:3:

    <div class="embed-responsive embed-responsive-4by3">
  <div id="chart_div" class="embed-responsive-item"></div>
</div>
    cela semble fonctionner, pourriez-vous m'indiquer quelques conseils tutoriels j'ai besoin de le combiner avec un réactif piehole de superposition et du centre de la légende
    oh, et devrait largeur de 100%??
    Où voulez-vous utiliser à 100%?

    OriginalL'auteur Csaba Toth

  6. 0

    Plus efficace de redimensionnement de l'extrait est ci-dessous et réutilisables;

    //bind a resizing function to the window
$(window).resize(function() {
    if(this.resizeTO) clearTimeout(this.resizeTO);
    this.resizeTO = setTimeout(function() {
        $(this).trigger('resizeEnd');
}, 500);
});
//usage of resizeEnd

$(window).bind('resizeEnd', function() {
    DoSomething();
});

    OriginalL'auteur Alex

  7. 0

    La meilleure solution est de modifier la vue graphique que de la fenêtre redimensionnée:

    google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawChart); 
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Value');
data.addColumn('number', 'Sites');
data.addColumn({type: 'string', role: 'tooltip'});
data.addColumn({type: 'string', role: 'style'});
data.addRows([
['valueA', 57, 'Value A is 57', 'stroke-color: #000; stroke-width: 1'],
['valueB', 19, 'Value B is 19', 'stroke-color: #000; stroke-width: 1'],
['valueC', 25, 'Value C is 25', 'stroke-color: #000; stroke-width: 1']
]);
var options = {
colors: ['#fff2af'],
hAxis: {textPosition: 'none',textStyle:{color:'#fff'}},
vAxis: {gridlines: {color: '#fff'},textStyle:{color:'#fff'}},
legend: {position: 'none'},
backgroundColor: '#aadaff'
};
var chart = new google.visualization.ColumnChart(document.querySelector('#chart_div'));
chart.draw(data, options);
$(window).resize(function(){
var view = new google.visualization.DataView(data);
chart.draw(view, options);
})
}

    OriginalL'auteur abdulmnam

  8. -1

    J'ai trouvé ce Code stylo exemple utile:
    Code stylo exemple de Google Graphiques Responsive
    Ils ne redessiner le graphique de la fenêtre de redimensionnement à l'aide de jQuery:

    $(window).resize(function(){
   yourCartdrawChartfuntion();
});
    Cela peut devenir très lourd très vite qu'il aura le feu avec de chaque pixel de la fenêtre est redimensionnée. Vous êtes mieux de liaison à l'événement de redimensionnement et de laisser un délai de ralentir les choses un peu.

    OriginalL'auteur mzografski