Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

google.visualization.Table is broken (c is undefined) in XHTML mode #3017

Open
namedgraph opened this issue Feb 14, 2025 · 0 comments
Open

Comments

@namedgraph
Copy link

I'm using Google charts in a test XHTML page (content follows below).
If I name the file .html, the table is rendered fine. If I name the file .xhtml, I get errors: c is undefined on Firefox and Cannot read properties of undefined (reading 'style') on Chrome.

Image

Image

The XHTML:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Google Charts Table Sample</title>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      // Load the Visualization API and the table package.
      google.charts.load('current', {packages: ['table']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(drawTable);

      function drawTable() {
        // Sample JSON data for the DataTable.
        var jsonData = {
          "cols": [
            {"id": "", "label": "Name", "pattern": "", "type": "string"},
            {"id": "", "label": "Age", "pattern": "", "type": "number"},
            {"id": "", "label": "Country", "pattern": "", "type": "string"}
          ],
          "rows": [
            {"c": [{"v": "John Doe"}, {"v": 30}, {"v": "USA"}]},
            {"c": [{"v": "Jane Smith"}, {"v": 25}, {"v": "UK"}]},
            {"c": [{"v": "Pedro Perez"}, {"v": 40}, {"v": "Spain"}]},
            {"c": [{"v": "Yuki Tanaka"}, {"v": 35}, {"v": "Japan"}]}
          ]
        };

        // Create the data table from JSON.
        var data = new google.visualization.DataTable(jsonData);

        // Set options for the table.
        var options = {
          showRowNumber: true,
          width: '600px',
          height: 'auto'
        };

        // Instantiate and draw the table.
        var table = new google.visualization.Table(document.getElementById('table_div'));
        table.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="table_div"></div>
  </body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant