user1263981 user1263981 - 1 month ago 28
CSS Question

google chart size issue

Multiple charts are displayed on one page, some users have larger screen and some have small standard screen.

Is there any way to have flexible width so it can fit on any size of monitor screen.

I have tried setting width to 100% but it doesn't work.

<table width="100%">
<tr>
<td>
<div id="chart_GP" class="chart_div">
<div class="chart_preloader">&nbsp;</div>
</div>
</td>
<td id="td_profit">
<div id="chart_Profit" class="chart_div">
<div class="chart_preloader">&nbsp;</div>
</div>
</td>

<td>
<div id="chart_Visits" class="chart_div">
<div class="chart_preloader">&nbsp;</div>
</div>
</td>
</tr>
</table>


CSS

.chart_preloader {
height:250px;
width: 100%;
background:url('/images/pie.gif') center center no-repeat;
background-color : #EEF;
}

.chart_div {
border-color: #006699;
border-style: solid;
border-width: 1px;
}


Google Chart Options

var options = {
title: "Last 12 Months Gross Profit per Month",
animation: {
duration: 1500,
startup: true //This is the new option
},
pointSize: 5,
curveType: 'function',
backgroundColor: chart_background_Color,
colors: [chartLine_Color],
legend: 'none',
width: 385,
height: 250,
tooltip: { isHtml: true },
hAxis: {
slantedText: true,
slantedTextAngle: 90
},
vAxis: {
title: 'Profit',
titleTextStyle: { italic: false, fontName: 'Calibri', fontSize: '12', bold: 'false' }
//format: '#\'%\''
}
};


enter image description here

Answer

recommend leaving width settings out of the chart options and use a css layout
which the chart will follow

rarely use tables, so depends on layout you're looking for, following is one example

to make the chart responsive, re-draw the chart when the window resizes...

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Time of Day');
    data.addColumn('number', 'Rating');

    data.addRows([
      [new Date(2015, 0, 1), 5],
      [new Date(2015, 0, 7), 3],
      [new Date(2015, 0, 14), 3],
      [new Date(2015, 0, 21), 2],
      [new Date(2015, 0, 28), 8]
    ]);

    var options = {
        title: "Last 12 Months Gross Profit per Month",
        animation: {
            duration: 1500,
            startup: true //This is the new option
        },
        pointSize: 5,
        curveType: 'function',
        backgroundColor: 'cyan',
        colors: ['red'],
        legend: 'none',
        height: 250,
        tooltip: { isHtml: true },
        hAxis: {
            slantedText: true,
            slantedTextAngle: 90
        },
        vAxis: {
            title: 'Profit',
            titleTextStyle: { italic: false, fontName: 'Calibri', fontSize: '12', bold: 'false' }
            //format: '#\'%\''
        }
    };

    var chart1 = new google.visualization.LineChart(document.getElementById('chart_GP'));
    drawChart(chart1);
    var chart2 = new google.visualization.LineChart(document.getElementById('chart_Profit'));
    drawChart(chart2);
    var chart3 = new google.visualization.LineChart(document.getElementById('chart_Visits'));
    drawChart(chart3);

    // make chart responsive
    window.addEventListener('resize', function () {
      drawChart(chart1);
      drawChart(chart2);
      drawChart(chart3);
    }, false);

    function drawChart(chart) {
      chart.draw(data, options);
    }
  },
  packages:['corechart']
});
.chart_preloader {
  height:250px;
  width: 100%;
  background:url('/images/pie.gif') center center no-repeat;
  background-color : #EEF;
}

.dashboard {
  text-align: center;
}

#chart_GP {
  float: left;
}

#chart_Profit {
  display: inline-block;
}

#chart_Visits {
  float: right;
}

.chart_div {
  border-color: #006699;
  border-style: solid;
  border-width: 1px;
  width: 32%;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="dashboard">
    <div id="chart_GP" class="chart_div">
        <div class="chart_preloader">&nbsp;</div>
    </div>
    <div id="chart_Profit" class="chart_div">
            <div class="chart_preloader">&nbsp;</div>
    </div>
    <div id="chart_Visits" class="chart_div">
        <div class="chart_preloader">&nbsp;</div>
    </div>
</div>