CODEWITHSUNDEEP
google-visualization
Louis
Louis

Reputation: 2608

google visualization chart, size in percentage

How do you set the size of a google chart in percentage : I have this in the html:

<div id="chart_div" width="90%" height="20%"></div>

and no width nor height in the options in the js.

But the chart size doesn't adapt to the viewport.

Upvotes: 29

Views: 67698

Answers (6)

Ameer
Ameer

Reputation: 123

The actual size of the element, and instead set the height/width of the chart to 500px each manually by adding those to your options:

options = {   title: 'My Daily Activities'  
,chartArea:{left:0,top:0,width:"100%",height:"100%"}   ,height: 500  
,width: 500 };

Upvotes: 0

Mohammad
Mohammad

Reputation: 71

Please Remove the width and the height properties from the options in the scripts and then add the following style to your page 

<style>
    .chart {
        width: 100%;
        min-height: 450px;
    }

    .row {
        margin: 0 !important;
    }
</style>

Upvotes: -1

asgallant
asgallant

Reputation: 26340

First, use styles to set your dimensions, not attributes:

<div id="chart_div" style="width: 90%; height: 20%;"></div>

The chart will draw to the size of the div by default, but the charts are not responsive. You have to hook a "resize" event handler to the window (or other element if you are resizing within a window) that redraws the chart:

function resizeChart () {
    chart.draw(data, options);
}
if (document.addEventListener) {
    window.addEventListener('resize', resizeChart);
}
else if (document.attachEvent) {
    window.attachEvent('onresize', resizeChart);
}
else {
    window.resize = resizeChart;
}

Upvotes: 33

Janie B
Janie B

Reputation: 313

$(window).resize(function(){
    var container = document.getElementById("chart_div").firstChild.firstChild;
    container.style.width = "100%";

    chart.draw(data, options);
});

Upvotes: 2

nole
nole

Reputation: 581

By multiplying with appropriate factor to $(window).width() or $(window).height() in the chart options

var options = {
        width: $(window).width(),
        height: $(window).height()*0.75
};

Upvotes: 21

themrflibble
themrflibble

Reputation: 313

Google recommend that you style, like the answer above, with correct CSS and this makes a less-glitchy Chart. However, you can size it up in Javascript...
https://developers.google.com/chart/interactive/docs/basic_customizing_chart
So, for the options when you draw the chart (using chart.draw(data, options) as above)...

var options = {
    width:400,
    height:300
}

A good fiddle for a responsive design is here...
http://jsfiddle.net/toddlevy/pyAz5/

Upvotes: 7

Related Questions