CODEWITHSUNDEEP
jquerygoogle-visualization
Louis
Louis

Reputation: 2618

simple issue with size of a Google chart

I can make my google chart (ScatterChart) reponsive, the api adds width: 400px and height: 200px to the inner div, like this :

<div id="chart_div" style="position: relative;">
  <div dir="ltr" style="position: relative; width: 400px; height: 200px;">
   <div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;">
    <svg width="400" height="200" aria-label="A chart." style="overflow: hidden;">
     <defs id="defs">
    ...

Can you help me find out why ?

And I have exactly the same code as here but for me it doesn't work

Here is my html: 

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

css: 

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

JS:

google.load("visualization", "1", {
        packages: ["corechart"],
        "callback" : drawChart
    });

$(window).resize(function(){
        drawChart();
    });
function drawChart() {
...
var options = {
            title: 'Weight vs. Volume',
            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: 'Performance linear trendline'
                        } 
                    }    // 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() {
            console.log("chartDrawn.state() before resolving:"+chartDrawn.state());
            console.log("...chart is drawn");
            chartDrawn.resolve();
            console.log("chartDrawn.state() after resolving:"+chartDrawn.state());
        }
    }

Upvotes: 1

Views: 1775

Answers (1)

nbering
nbering

Reputation: 2800

If you look at the Charts API documentation for ScatterCharts, you'll see that the width option takes a number value only, representing the width in pixels. Some of the charts take a string value which can use any measurement that you would use in css or html (the Table chart in particular does this), but most seem to only take a pixel value.

From what I've read - but haven't found in the documentation - the chart takes it's dimensions first from the options passed to it, and if none are defined then it uses the pixel dimensions of the container element, at the time it is drawn. So if you have your element hidden until the chart is ready, that can cause sizing issues. Also, if you resize your window while viewing the page it will draw once and not update the chart size until draw() is called again.

Upvotes: 2

Related Questions