Photograph Daddy

Create a dynamic graph of Plugin Downloads

Using Google’s Visualization API and data made available by the rah_plugin_download plugin you can easily create a graph showing plugin downloads.

The prerequisite is having articles for each plugin and a custom field containing the plugin’s name.

In the head of your page you need to add a script tag for the Google JavaScript API and then load the visualizations package like so:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
 google.load("visualization", "1", {packages:["corechart"]});
    </script>

In this case I’m using the imagebarchart.

Then you need to add your custom JavaScript.

    <script type="text/javascript">
      function drawVisualization() {
        // Create and populate the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Plugin');
        data.addColumn('number', 'Downloads');
        data.addColumn('number', 'Days Available');
        data.addRows(3);

For that last line I’m manually providing the number of plugins to avoid an additional txp:article_custom call but if desired you could replace that with a count provided by txp:article_custom and a plugin like adi_count which we’re already using below.

Now some Textpattern tags to get the data and complete the graph:

<txp:variable name="currentRow" value='-1'/>
<txp:article_custom category="plugins">
data.setValue(<txp:adi_calc name="currentRow" add="1" display="1"/>, 0, '<txp:title/>');
data.setValue(<txp:variable name="currentRow" />, 0, '<txp:title/>');
data.setValue(<txp:variable name="currentRow" />, 1, <txp:rah_plugin_download name='<txp:custom_field name="plugin"/>' type="count" />);
data.setValue(<txp:variable name="currentRow" />, 2, <txp:rah_replace from=" days ago" to=""><txp:posted format="since"/></txp:rah_replace>);
</txp:article_custom>
        // Create and draw the visualization.
        var chart = new google.visualization.corechart(document.getElementById('visualization'));
            chart.draw(data, null);
      }

      google.setOnLoadCallback(drawVisualization);
    </script>

See the Demo