Scraperwiki Glue Between the Ergast Experimental Motor Racing API and Google Chart Tools

Another experiment in using a Scraperwiki view – transforming the JSON output from the Ergast experimental motor racing API into the format used by the Google Chart Tools and then rendering it.

Whilst it would be possible to use a single Scraperwiki view to grab the Ergast data, transform it to the data representation used by the Google Chart tools and then render the data using those chart components within the same Scraperwiki view, I have instead separated the transformation and the rendering into two steps: a view (Ergast API to Datasource Response Format) that takes the Ergast API data and then republishes it as a JSON data feed using the Chart Tools Datasource Protocol (V0.6) response format, and a view that accepts the datasource response and uses it within an end-user view, such as an interactive dashboard (Ergast Data Viewer demo).

As a proof of concept, the data representation transformer only covers race laps data, although it is possible to request data for a race in a supported year using a URI of the form:

https://views.scraperwiki.com/run/ergastf1racelaps_2_gviz_converter/?year=YEAR&race=RACENUM

The demo view is similarly keyed by year and race, as for example demonstrated here where we request data for the first race (race=1) in 2012 (year=2012):

https://views.scraperwiki.com/run/ergastf1gviz_demo_1/?year=2012&race=1

The demo provides a paged tabular view over lap time data that can also be filtered by lap number and/or driver:

(And yes, I know the ‘time in seconds’ column is wrong… there was a typo in the original script when I generated that view – fixed now…)

The following code fragment shows how straightforward it is construct the dashboard:

    google.load('visualization', '1.1', {packages:['controls']});

    google.setOnLoadCallback(drawTable);

    function drawTable() {

      var json_data = new google.visualization.DataTable(data, 0.6);

    var json_table = new google.visualization.ChartWrapper({'chartType': 'Table','containerId':'table_div_json','options': {allowHtml: true,page:'enable',pageSize:24,'pagingButtonsConfiguration':'auto' }});

     var formatter = new google.visualization.NumberFormat( {fractionDigits: 3} );
     formatter.format(json_data,4);

    var stringFilter = new google.visualization.ControlWrapper({
      'controlType': 'StringFilter',
      'containerId': 'control1',
      'options': {
        'filterColumnLabel': 'Lap',
        'matchType': 'any'
      }
    });

  var categoryPicker = new google.visualization.ControlWrapper({
    'controlType': 'CategoryFilter',
    'containerId': 'control2',
    'options': {
      'filterColumnLabel': 'Driver ID',
      'ui': {
      'labelStacking': 'vertical',
        'allowTyping': false,
        'allowMultiple': false
      }
    }
  });
  var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard')).bind([stringFilter,categoryPicker], [json_table]).draw(json_data);
 
    }

So what are the next steps?

In terms of user facing views, I’ll try to have a play generating a range of different visualisation types/dashboard setups using different chart controls and chart types. As far as the data transformation goes, it would be worth generalising the approach so we can data from any of the Ergast API data table into the Google Chart Tools datasource format. Of course, if this data representation turns out to be useful, then maybe the Ergast API will support it directly? (Helper libraries for transforming data to the format are available for Java and Python: Implementing the Chart Tools Datasource Protocol.)

PS from the Google Chart tools documentation, I notice a new experiment feature for the datatable – column typing in the form of data roles.