Won't render multiple charts of the same type in the same page

[Steven Noble]

I have a HTML document containing one bubble chart and several gauge charts.

When I view the document in a web browser, I see all the charts.

But when I send it to the Prince XML to PDF converter, I only see the bubble chart plus the first of the gauge charts.

I'm wondering if this is because the page keeps loading the gauge visualisation package over and over.

Here's part of the generated HTML:

        <script type="text/javascript">
          google.load('visualization','1', {packages: ['gauge'], callback: draw_ca433e86445344969f6265807d461464});
          function draw_ca433e86445344969f6265807d461464() {
            var data_table = new google.visualization.DataTable();data_table.addColumn({"type":"string","label":"Label"});data_table.addColumn({"type":"number","label":"Value"});data_table.addRow([{v: "Effective"}, {v: 52.0}]);
        var formatter = new google.visualization.NumberFormat({suffix: "%", fractionDigits: 1});
        formatter.format(data_table, 1);
            var chart = new google.visualization.Gauge(document.getElementById('ca433e86445344969f6265807d461464'));
            chart.draw(data_table, {width: 150, height: 150, redFrom: 0, redTo: 27.0, yellowFrom: 27.0, yellowTo: 42.0, greenFrom: 42.0, greenTo: 100, minorTicks: 5});
          };
        </script>
        <div class="gauge" id="ca433e86445344969f6265807d461464" style="position: relative;">

    ....

<script type="text/javascript">
          google.load('visualization','1', {packages: ['gauge'], callback: draw_a9585b4d84a7400bbea45daa57c42930});
          function draw_a9585b4d84a7400bbea45daa57c42930() {
            var data_table = new google.visualization.DataTable();data_table.addColumn({"type":"string","label":"Label"});data_table.addColumn({"type":"number","label":"Value"});data_table.addRow([{v: "Persuasive"}, {v: 37.5}]);
        var formatter = new google.visualization.NumberFormat({suffix: "%", fractionDigits: 1});
        formatter.format(data_table, 1);
            var chart = new google.visualization.Gauge(document.getElementById('a9585b4d84a7400bbea45daa57c42930'));
            chart.draw(data_table, {width: 150, height: 150, redFrom: 0, redTo: 7.1, yellowFrom: 7.1, yellowTo: 25.3, greenFrom: 25.3, greenTo: 100, minorTicks: 5});
          };
        </script>
        <div class="gauge" id="a9585b4d84a7400bbea45daa57c42930" style="position: relative;">

Any thoughts on how to fix this?

[Winston]

I have never used PrinceXML before, so I am not sure how it works, and your hypothesis might be true. Sorry can't help much in that aspect.