Question

I’m trying to use Google visualisation (for the first time – so, please bear with me) to build a simple column chart. The things are made a bit more complicated by the fact that I have to work within an existing MVC structure including Smarty – however this is by-the-by.

In php I get the correct set of data, which I pass to smarty. Smarty then formats the data for google visualisation, so I get this (copy-paste from browser ‘view source’):

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load('visualization', '1');
    google.setOnLoadCallback(drawVisualisation);

    function drawVisualisation() {
        var wrapper = new google.visualization.ChartWrapper({
            chartType: 'ColumnChart',
            dataTable: [['', 'android', 'iphone', 'unknown'],['2012-01-24', 2, 1, 2],['2012-01-25', 1, 1, 1]],
            options: {'title': 'Periods'},
            containerId: 'access-chart'
        });
        wrapper.draw();
    };
</script>

However when executed, this results in “Table has no data”.

What’s really strange is that if I copy this generated code and paste it directly into the template (without formatting it from the passed data), then the chart is shown correctly.

What can be the issue here and how do I fix it?

Answer 1

Apparently, I got caught out by one of the silliest mistakes. The problem was caused by some very unwanted caching. Naturally, I didn’t get the code correct on the first attempt and it took me a few edits until all the JS/HTML was right. Yet, apparently, the javascript code was cached by the browser and when the HTML (php-generated) page was reloaded, the javascript was not – resulting in incomplete javascript and therefore no chart. Once the caching was resolved, the graph is now displayed as expected.