How do I use Screenfull.js to make a Google chart fullscreen?

45
May 15, 2018, at 9:10 PM

I am using screenfull.js to allow a Google chart to be viewed in fullscreen.

I want the chart to use 100% of the screen width/height when in full screen mode but be a specific size otherwise (width: 100%; height: 200px). The problem is that my current code results in black bars above and below the chart in fullscreen mode. What am I doing wrong?

My fiddle is here

HTML:

<html>
  <body>
    <input type="button" value="Full Screen Mode" id="button1">
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/screenfull.js/1.0.4/screenfull.min.js"></script>
    <script>

    </script>
    <div id="piechart" style="width: 100%; height: 200px;"></div>
  </body>
</html>

Javascript (which adapts the Google pie chart example code):

$(function() {
  $('#button1').click(function() {
    screenfull.request(document.getElementById('piechart'));
  })
})

google.charts.load('current', {
  'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Task', 'Hours per Day'],
    ['Work', 11],
    ['Eat', 2],
    ['Commute', 2],
    ['Watch TV', 2],
    ['Sleep', 7]
  ]);
  var options = {
    title: 'My Daily Activities'
  };
  var chart = new google.visualization.PieChart(document.getElementById('piechart'));
  chart.draw(data, options);
  $(window).resize(function() {
    chart.draw(data, options);
  });
}
Answer 1

the style attribute on the chart's container will need to be changed once in full screen mode,
or else it will still be height: 200px;

let's use a css class instead, then we can listen for screenfull's 'change' event,
and switch the class name, then re-draw the chart, just to be safe

  screenfull.on('change', function () {
    if (screenfull.isFullscreen) {
      chartContainer.className = 'chart-full';
    } else {
      chartContainer.className = 'chart-normal';
    }
    drawChart();
  });

next, the chart will not fill the container completely by default,
we can use the following config options to maximize the chart

chartArea: {
  height: '100%',
  width: '100%',
  top: 48,
  left: 16,
  right: 16,
  bottom: 16
},
height: '100%',
width: '100%'

see following snippet...

js

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Task', 'Hours per Day'],
    ['Work', 11],
    ['Eat', 2],
    ['Commute', 2],
    ['Watch TV', 2],
    ['Sleep', 7]
  ]);
  var options = {
    title: 'My Daily Activities',
    chartArea: {
      height: '100%',
      width: '100%',
      top: 32,
      left: 16,
      right: 16,
      bottom: 16
    },
    height: '100%',
    width: '100%'
  };
  var chartContainer = $('#piechart').get(0);
  var chart = new google.visualization.PieChart(chartContainer);
  $('#button1').click(function() {
    if (screenfull.enabled) {
      screenfull.request(chartContainer);
      screenfull.on('change', function () {
        if (screenfull.isFullscreen) {
          chartContainer.className = 'chart-full';
        } else {
          chartContainer.className = 'chart-normal';
        }
        drawChart();
      });
    }
  })
  drawChart();
  $(window).resize(drawChart);
  function drawChart() {
    chart.draw(data, options);
  }
});

css

.chart-normal {
  height: 200px;
}
.chart-full {
  height: 100%;
}

html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/screenfull.js/3.3.2/screenfull.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<input type="button" value="Full Screen Mode" id="button1">
<div class="chart-normal" id="piechart"></div>

working fiddle --> https://jsfiddle.net/0m3x6aea/

READ ALSO
Bootstrap table fix header with custom column width

Bootstrap table fix header with custom column width

I want to fix header in bootstrap table with tbody scrollI have search many result but not getting proper answer yet

28
Color on ColorPicker not being picked correctly

Color on ColorPicker not being picked correctly

I am trying to implement a jQuery colorPickerI found eyeCon color picker and I am encountering that for certain colors it just does not allow to set it so:

33
html page external files not loading [on hold]

html page external files not loading [on hold]

I am currently finishing up a website for a client (https://wwwsecondhouseinspain

50
Modal using Jquery and css

Modal using Jquery and css

Hi guys I am trying to create a modal using Jquery and CSSThe problem is with the clicks

35