Dapper & Charts

Dapp functions in action

This example uses two functions: dapp.list to retrieve the data for the columns and dapp.value to retrieve the project name.

The following invocation retrieves the download statistics for Deki Wiki:

dapp.list(
    'SourceForgeDownloadStatistics',
    'Stats/Downloads',
    'http://sourceforge.net/project/stats/?group_id=173074&ugn=dekiwiki'
) 

This invocation returns: [ ]

Similarly, this invocation returns the project name (i.e. ):

dapp.value(
    'SourceForgeDownloadStatistics',
    'Project',
    'http://sourceforge.net/project/stats/?group_id=173074&ugn=dekiwiki'
)

Behind the scenes: Dapp XML

So how does this work?  When Dapper executes the dapp, it converts the data it finds on the target HTML page (e.g. http://sourceforge.net/project/stats...4&ugn=dekiwiki) into an XML document.  This document looks like this:

The dapp functions use the XPath expression to select the XML node that contains the desired data.  For the project name, that would be 'Project'.  For the column data, that would be 'Stats/Download'.  Depending on the dapp function, the XPath expression is used to retrieve the first value or all values that match the path.

Feeding a dapp into another function (google.barchart)

Now the story wouldn't be complete if we didn't make good use of the data we just collected.  First, let's repeat the above operations to retrieve Alfresco's statistics as well.  Now, let's use google.barchart to create the graph.

The Google barchart functions takes the following parameters:

1. width: width in pixel of the chart; we use 600
   
2. height: height in pixel of the chart; we use 200
   
3. values: column data to plot; we use two dapp.list calls to fetch the data
   
4. legends: labels for the values; we use two dapp.value calls to fetch the project name
   
5. colors: colors for the values; we use [ "A00B0B", "0066CC" ]
   
6. vertical: show a vertical or horizontal chart; we want horizontal, so we use false
   
7. stacked: stack the columns; we want them next to each other, so we use false
   
8. xaxis: labels for the x-axis; we use dapp.list to fetch the statistic dates
   
9. yaxis: lables for the y-axis; we leave it empty to get the default labels showing 0, the mid-value, and the max-value

Putting it all together, this is what it looks like:

google.barchart(
    600, 
    200, 
    [
        dapp.list(
            'SourceForgeDownloadStatistics',
            'Stats/Downloads',
            'http://sourceforge.net/project/stats/?group_id=173074&ugn=dekiwiki'
        ),
        dapp.list(
            'SourceForgeDownloadStatistics',
            'Stats/Downloads',
            'http://sourceforge.net/project/stats/?group_id=143373&ugn=alfresco'
        )
    ], 
    [
        'MindTouch',
        'Alfresco'
    ],
    [ "A00B0B", "0066CC" ], 
    _, 
    _,
    dapp.list(
        'SourceForgeDownloadStatistics',
        'Stats/Date',
        'http://sourceforge.net/project/stats/?group_id=173074&ugn=dekiwiki'
    ),
    _
)

Misc: embedding HTML results from a dapp

One function we didn't use for creating our Google Chart is dapp.html.  This function makes it easy to embed an HTML element from a dapp.  For example, the XML above contains the location of the SourceForge.net download chart for the project.  Emedding this graphic is as simple as using this code:

dapp.html(
    'SourceForgeDownloadStatistics', 
    'Chart', 
    'http://sourceforge.net/project/stats/?group_id=173074&ugn=dekiwiki'
)