When trying to display a Google pie chart using xsl, InvalidStateError will be thrown.
Note:
1. in the below example I used hardcoded values for the Google chart data (normally, I would take data from a valid xml file-this is just to ease the analysis)
2. the 2 files (xsl and xml) need to run locally (they won't be placed on a websever)
3. the same below code works on IE
So:
1. xml file: test.xml (just a dummy xml)
Code: Select all
<?xml-stylesheet type="text/xsl" href="stylesheet.xsl"?>
<node1>
<node2 name="content">
</node2>
<node3 name="conten1">
</node3>
</node1>
2. xsl file: stylesheet.xsl - code taken dirrectly from Google examples
Code: Select all
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html"/>
<xsl:template match="/">
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.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);
}
</script>
</head>
<body>
<div id="piechart" style="width: 900px; height: 500px;"></div>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Can someone please tell me why I get this error, and most important, how can I solve it?
Thanks a lot,
George