Attivio v5.6 Documentation
Page tree
Skip to end of metadata
Go to start of metadata

Overview

One of the features that underwent a large upgrade in AIE version 4.0 is our REST API. The REST API now supports JSON, JSONP and XML as well as providing support for indexing content, executing queries, as well as a REST API dedicated to autocomplete / type ahead search capabilities.

Our new SAIL search interface makes use the JAVA API and some of the REST based APIs to render content but it is a complete search user interface which is hard for some users to get their hands around in a short amount of time. This page boils down the whole process into a single HTML page of ~30 lines of code that renders a chart dynamically based on user input. The file is heavily commented so that even those unfamiliar with the relevant technologies can follow the example.
technologies used:

  • HTML5 + Javascript
    • We use standard HTML5 compliant markup and JavaScript for this example.
  • Highcharts
    • Highcharts is a modern, responsive client side charting library.
  • jQuery
    • jQuery is the defacto standard for rapid javascript development. There are a number of alternatives that could be used but Highcharts uses jQuery by default so we have decided to stick with it for simplicity.

REST API Parameters

The master list of QueryRequest REST parameters is on the HTTP REST APIs page.

View incoming links.

REST API from JavaScript

The HTML page exposes a one-line form.  You can enter the location of the AIE node, the query string, and the name of the facet that you want to display as a bar chart.  Then click the Show Chart button.

The HTML file is attached to this page if you would like to download it.

chart4.1.html

chart4.1.html (attached to this page)
<html>
  <head>
    <title>AIE REST API + Highcharts Example</title>
  </head>
  <body>
    <!-- Import jquery and highcharts javascript libraries -->
    <script src="http://code.jquery.com/jquery-1.11.0.min.js" type="application/javascript"></script>
    <script src="http://code.highcharts.com/highcharts.js" type="application/javascript"></script>
    
    <!-- A simple form to let users select a query and facet to display -->
    AIE Host + Port: <input id="aie" value="localhost:17000" />
    Query: <input id="q" value="*" />
    Facet: <input id="facet" value="country" />
    <button id="getchart">Show Chart</button>
    
    <!-- the container for the chart to be rendered in -->
    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
    
    <!-- the script to render the chart based on the user inputs -->
    <script>
      $('#getchart').click(function() {
        // this is the URL and inputs to the AIE REST API.  
        // jsonpCallback is required by the AIE REST API to indicate that we are interested in getting back JSONP
        // JSONP allows us to make this request across domains.
        var restSearchApiUrl = 'http://' + $('#aie').val() + '/rest/searchApi/simpleJsonpCgi?jsonpCallback=?';
        var restSearchApiOptions = {
            q: $('#q').val(),            //   The query to run to filter content and faceted data by
            facet: $('#facet').val(),    //   The facet to request whose data will be rendered in the chart
            hits: 0                     //   We request 0 hits because we are only interested in faceted data for this chart            
        }
        // execute the query and retrieve the facet data from AIE using the standard jQuery getJSON() function.
        $.getJSON(restSearchApiUrl, restSearchApiOptions)
            .done(function(searchResult) {                
                // get the facet object from the results.  Since we only request 1 facet it is always first
                var facet = searchResult.facets[0];
                // some basic error checking to see if the facet exists
                if (facet['buckets'] == null) {
                    alert('Facet field ' + $('#facet').val() + ' is not defined');
                }
                // standard highcharts options for a simple column chart.  
                var chart = new Highcharts.Chart({
                    chart: {
                        type: 'column', // can change this to bar/pie
                        renderTo: 'container',
                    },
                    title: { 
                        text: 'Query = ' + $('#q').val() + '   Facet=' + $('#facet').val(),  // show the users what query they ran to get the chart
                    },
                    series: [{
                        name: facet['label'], // provides a label for the data series based on the facet name
                        data: [] // provide an empty array for now, we will add data points next
                    }]
                });
                // loop over all the facet buckets and add a data point to the series for each
                $.each(facet['buckets'], function(index, val) {
                    // create a Highcharts point object from the facet bucket
                    var point = {
                    name: val['label'],
                    y: val['count']
                }
                // add the point to the chart
                chart.series[0].addPoint(point);
            });
        })
        .fail(function(jqxhr, textStatus, error) {
            alert("Error getting chart data: " + textStatus + ":" + error);
        });
      });
    </script>    
  </body>
</html>
  • No labels