Julia_arch February 2016

How to place four split the screen into four and place a google chart in each division (html)

I don't know anything about HTML. So I have to produce this for a project on the fly. I need help from experts in this forum. I need to place three line charts and one gauge chart from google on one page, how do I write an HTML code that will split the screen into 4 quarters to place each chart. here is the html code for one of the line charts:

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);

        var options = {
          title: 'Company Performance',
          curveType: 'function',
          legend: { position: 'bottom' }
        };

        var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="curve_chart" style="width: 900px; height: 500px"></div>
  </body>
</html>

And here is the gauge chart html code:

<html>
  <head>
   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   <script type="text/javascript">
      google.charts.load('current', {'packages':['gauge']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['Memory', 80],
          ['CPU', 55]

        ]);

        var options = {
          width: 400, height: 120,
             

Answers


Maciej Kwas February 2016

Basically, here's the structure to divide screen into four parts

.wrapper > div {
  position:absolute;
  width:50vw;
  height:50vh;
  overflow:hidden;
}

#chart1 {top:0;left:0;}
#chart2 {top:0;right:0;}
#chart3 {bottom:0;left:0;}
#chart4 {bottom:0;right:0;}

<div class="wrapper">
  <div id="chart1"></div>
  <div id="chart2"></div>
  <div id="chart3"></div>
  <div id="chart4"></div>
</div>

Ofcourse you would have to refresh charts once the screen size changes

Here is online demo: https://jsfiddle.net/0cr5enak/

EDIT

Well, to stack vertically I would just go for setting height property to 1/4 screen size for each div: https://jsfiddle.net/0cr5enak/2/

Post Status

Asked in February 2016
Viewed 2,305 times
Voted 13
Answered 1 times

Search




Leave an answer