Connecting to JSON Data over HTTP

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

Note

This documentation dependended on Twitter’s open-for-all JSON 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 JSON Data Source

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

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

{
        "completed_in": 0.027,
        "max_id": 3.400947249983e+17,
        "max_id_str": "340094724998299648",
        "next_page": "?page=2&max_id=340094724998299648&q=html5",
        "page": 1,
        "query": "html5",
        "refresh_url": "?since_id=340094724998299648&q=html5",
        "results": [
        {
          "created_at": "Thu, 30 May 2013 13:17:55 +0000",
          "from_user": "bittersweetryan",
          "from_user_id": 22634178,
          "from_user_id_str": "22634178",
          "from_user_name": "Ryan Anklam",
          "geo": null,
          "id": 3.400947249983e+17,
          "id_str": "340094724998299648",
          "iso_language_code": "en",
          "metadata": {
            "result_type": "recent"
          },
          "profile_image_url": "http:\/\/a0.twimg.com\/profile_images\/2268762415\/f56gp1ndubtvx3f02ndp_normal.jpeg",
          "profile_image_url_https": "https:\/\/si0.twimg.com\/profile_images\/2268762415\/f56gp1ndubtvx3f02ndp_normal.jpeg",
          "source": "<a href="http:\/\/www.hootsuite.com">HootSuite<\/a>",
          "text": "RT @ncdevcon: Call For Speakers deadline is quickly approaching!  http:\/\/t.co\/ziTHrDqClU  #javascript #html5 #coldfusion #mobile #coolstuff"
        },
        {
          "created_at": "Thu, 30 May 2013 13:17:38 +0000",
          "from_user": "Neurotic",
          "from_user_id": 5727802,
          "from_user_id_str": "5727802",
          "from_user_name": "Mark Mandel",
          "geo": null,
          "id": 3.4009465182868e+17,
          "id_str": "340094651828678656",
          "iso_language_code": "en",
          "metadata": {
            "result_type": "recent"
          },
          "profile_image_url": "http:\/\/a0.twimg.com\/profile_images\/3574954842\/03070c2d182cee05c48b7728053da850_normal.png",
          "profile_image_url_https": "https:\/\/si0.twimg.com\/profile_images\/3574954842\/03070c2d182cee05c48b7728053da850_normal.png",
          "source": "<a href="http:\/\/levelupstudio.com\/plume">Plume\u00a0for\u00a0Android<\/a>",
          "text": "RT @DanWilson: RT Please @ncdevcon Call For Speakers deadline is quickly approaching!  http:\/\/t.co\/PVQPNovuxO  #javascript #html5 #coldfusion #mobile"
        },
        {
          "created_at": "Thu, 30 May 2013 13:17:38 +0000",
          "from_user": "_lucasjohnson",
          "from_user_id": 110812452,
          "from_user_id_str": "110812452",
          "from_user_name": "Lucas Johnson",
          "geo": null,
          "id": 3.400946515938e+17,
          "id_str": "340094651593797632",
          "iso_language_code": "en",
          "metadata": {
            "result_type": "recent"
          },
          "profile_image_url": "http:\/\/a0.twimg.com\/profile_images\/3544242087\/8a97987df33749945de993ff2226db09_normal.jpeg",
          "profile_image_url_https": "https:\/\/si0.twimg.com\/profile_images\/3544242087\/8a97987df33749945de993ff2226db09_normal.jpeg",
          "source": "<a href="http:\/\/itunes.apple.com\/us\/app\/bbc-news\/id364147881?mt=8&uo=4">BBC News on iOS<\/a>",
          "text": "#BOO. @W3C's proposed new #HTML5 Web locks will 'stifle innovation.' http:\/\/t.co\/B6koVcBTmF"
        }
        ]
}

Some results have been removed for brevity.

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

  1. Create a JSONDataSource object
  2. Set the URL of the JSON using JSONDataSource::setUrl
  3. Set the Schema which contains information about how the datasource is structured. We do this using JSONDataSource::setSchema
  4. The key of the each item in the schema is used as the column from the component.
$twitterDS = new JSONDataSource();
$twitterDS->setUrl('https://search.twitter.com/search.json?q=html5');
$twitterDS->setSchema ( array (
        'text' => array('type' => 'text'),
        'iso_language_code' => array('type' => 'text'),
        'from_user_name' => array('type' => 'text'),
        'created_at' => array('type' => 'datetime'),
        'from_user' => array('type' => 'text'),
        'id_str' => array('type' => 'text')
));

Setting the Data Object Path

The JSON Data Source will only work with JSON Arrays. So for example, in the twitter JSON response, there are many parameters in the root object. But the main data array is in the results object. For this, you need to specify the Data Object Path relative the root. Here, it is simply results.

$twitterDS->setDataObjectPath('results');

Using the datasource

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

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

$table->addColumn("User", "from_user_name");
$table->addColumn("Tweet", "text");
$table->addColumn("Tweet Time", "created_at");

Dashboard::addComponent($table);

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