Connecting to XML Data over HTTP

RazorFlow can access data from URLs that serve XML and use that to build dashboards in components.

Note

This documentation dependended on Twitter’s open-for-all XML API which has been recently shut down (June 11th). We are working to update the documentation to use a service which is still available.

Using a XML Data Source

Consider Twitter’s XML Search service. You can access this URL: https://search.twitter.com/search.rss?q=html5 to find messages from people talking about HTML5.

This returns a XML string, which when formatted properly, looks like this:

<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
    xmlns:google="http://base.google.com/ns/1.0"
    xmlns:openSearch="http://a9.com/-/spec/opensearch/1.1/"
    xmlns:media="http://search.yahoo.com/mrss/"
    xmlns:twitter="http://api.twitter.com/">
    <channel>
        <title>html5 - Twitter Search</title>
        <description>html5 - Twitter Search</description>
        <link>http://search.twitter.com/search?q=html5</link>
        <twitter:refresh_url>http://search.twitter.com/search.rss?since_id=343996269271846912&amp;q=html5</twitter:refresh_url>
        <pubDate>Mon, 10 Jun 2013 07:41:16 +0000</pubDate>
        <openSearch:itemsPerPage>15</openSearch:itemsPerPage>
        <item>
            <title>RT @soymarios: Buena gu&#xed;a de como tener en cuenta el HTML5 a la hora de hacer un formularios y como favorecer la UX http://t.co/VerQyZLiYR &#x2026;</title>
            <link>http://twitter.com/junglademonos/statuses/343996269271846912</link>
            <description>RT @&lt;a class="" href="https://twitter.com/soymarios"&gt;soymarios&lt;/a&gt;: Buena gu&#xed;a de como tener en cuenta el &lt;em&gt;HTML5&lt;/em&gt; a la hora de hacer un formularios y como favorecer la UX &lt;a href="http://t.co/VerQyZLiYR" class=""&gt;http://t.co/VerQyZLiYR&lt;/a&gt; &#x2026;</description>
            <pubDate>Mon, 10 Jun 2013 07:41:16 +0000</pubDate>
            <guid>http://twitter.com/junglademonos/statuses/343996269271846912</guid>
            <author>junglademonos@twitter.com (Miriam)</author>
            <media:content type="image/jpg" height="48" width="48" url="http://a0.twimg.com/profile_images/3679074133/56377fd1d6679679c3049ae6b9dd8621_normal.jpeg"/>
            <google:image_link>http://a0.twimg.com/profile_images/3679074133/56377fd1d6679679c3049ae6b9dd8621_normal.jpeg</google:image_link>
            <twitter:metadata>
                <twitter:result_type>recent</twitter:result_type>
            </twitter:metadata>
        </item>
        <item>
            <title>"A Guide to the New HTML5 Form Input Types"  http://t.co/LjWRbCAUhA</title>
            <link>http://twitter.com/shanejones/statuses/343996216092270592</link>
            <description>"A Guide to the New &lt;em&gt;HTML5&lt;/em&gt; Form Input Types"  &lt;a href="http://t.co/LjWRbCAUhA" class=""&gt;http://t.co/LjWRbCAUhA&lt;/a&gt;</description>
            <pubDate>Mon, 10 Jun 2013 07:41:03 +0000</pubDate>
            <guid>http://twitter.com/shanejones/statuses/343996216092270592</guid>
            <author>shanejones@twitter.com (Shane Jones)</author>
            <media:content type="image/jpg" height="48" width="48" url="http://a0.twimg.com/profile_images/2701399835/f89c6fb0c7f88f239924cdc3c020d00d_normal.png"/>
            <google:image_link>http://a0.twimg.com/profile_images/2701399835/f89c6fb0c7f88f239924cdc3c020d00d_normal.png</google:image_link>
            <twitter:metadata>
                <twitter:result_type>recent</twitter:result_type>
            </twitter:metadata>
        </item>
  </channel>
</rss>

Some results have been removed for brevity.

To use this JSON in our dashboard, we need to take the following steps:

  1. Create a XMLDataSource object
  2. Set the URL of the XML using XMLDataSource::setUrl
  3. Set the Schema which contains information about how the datasource is structured. We do this using XMLDataSource::setSchema the schema will also include the xpath to each value starting from each item as the root of the XML.
  4. The key of the each item in the schema is used as the column from the component.

For example:

$twitterDS = newXMLDataSource();
$twitterDS->setUrl('https://search.twitter.com/search.json?q=html5');
$xmlDS->setSchema(array(
      'Author' => array(
              'type' => 'text',
              'xpath' => 'author'
      ),
      'Link' => array(
              'type' => 'text',
              'xpath' => 'link'
      ),
      'Description' => array(
              'type' => 'text',
              'xpath' => 'description'
      ),
      'created_at' => array(
              'type' => 'datetime',
              'xpath' => 'pubDate'
      )
));

Setting the Data Object Path

The XML Data Source will only work with XML Arrays. So for example, in the twitter XML response, there are many tags in the root object. But the main data is in the ``item``s. For this, you need to specify the Data Object Path relative the root. This is an XPath.

$twitterDS->setDataObjectPath('/channel/item');

Creating a Dashboard Component

To use the DataSource, simply use the keys from the schema as column expressions.

$table = new TableComponent();
$table->setDataSource($twitterDS);

$table->addColumn("User", "Author");
$table->addColumn("Tweet", "Description");
$table->addColumn("Tweet Time", "created_at");

Dashboard::addComponent($table);

Start building interactive, mobile-friendly Dashboards in PHP. See DemosDownload