CODEWITHSUNDEEP
javascriptgoogle-visualization
user2095748
user2095748

Reputation: 267

Draw google chart in new browse window using javascript

var data = google.visualization.arrayToDataTable(r.d);
var myWindow = window.open('', '', 'width=500,height=500,top=200,left=200');
var doc = myWindow.document;
doc.write("<body><div id='detaildata'><body>");
var table = new google.visualization.Table(doc.getElementById('detaildata'));
table.draw(data, {
                    title: "Bug Details",
                    width: 500,
                    height: 400,
                    hAxis: { title: "Daily" }
                });
doc.close();

I am opening a new window from javascript. Writing a div to it. Then drawing a google chart table onto it. But table is not coming as google table. It is coming as a simple table with no styling. How to get proper google table in the new window.

Upvotes: 1

Views: 943

Answers (2)

user2095748
user2095748

Reputation: 267

    var options =
       {
           backgroundColor: '#E0E0E0',
           width: '100%',
           height: '100%',
           alternatingRowStyle: false,
       };

But options are not getting applied to the table. any changes required.

Upvotes: 0

WhiteHat
WhiteHat

Reputation: 61275

the new window needs access to the loader script in order to display properly

instead of opening a blank window and writing everything to it,

save a static html file, with the code you would write, already there.

example, save the following snippet to an html file,
in the same folder as the code running now

testGoogleNW.html (this will be the new window) 

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <script src="https://www.gstatic.com/charts/loader.js"></script>
    <script>
      google.charts.load('current', {
        callback: function () {
          var container = document.getElementById('detaildata');
          var table = new google.visualization.Table(container);

          // use data from opening page
          table.draw(window.opener.data, {
            title: 'Details'
          });
        },
        packages: ['table']
      });
    </script>
    <style>
      div {
        padding: 6px 6px 6px 6px;
      }
    </style>
  </head>
  <body>
    <div id="detaildata"></div>
  </body>
</html>

calling window
in the code you have now, use the following snippet to prepare the data and open the window

once the window is opened, it will take over from there

data here needs to be available via global scope,
the new window uses window.opener to get the data from this page 

var data;

google.charts.load('current', {
  callback: drawChart,
  packages: ['table']
});

function drawChart() {
  data = google.visualization.arrayToDataTable([
    ['Year', 'Sales', 'Expenses', 'Profit'],
    ['2013', 1000, 400, 200],
    ['2014', 1170, 460, 250],
    ['2015', 660, 1120, 300],
    ['2016', 1030, 540, 350]
  ]);

  // open static html file
  window.open('testGoogleNW.html', '', 'width=500,height=500,top=200,left=200');
}

you could also use localStorage to pass the variable

Upvotes: 1

Related Questions