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.
<?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>
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 undefinedon Firefox andCannot read properties of undefined (reading 'style')on Chrome.The XHTML: