Skip to content

RhoInc/query-overview

Folders and files

NameName
Last commit message
Last commit date

Latest commit

e2773a2 · Jan 29, 2019
Dec 10, 2018
Dec 11, 2018
Dec 10, 2018
Dec 7, 2018
Dec 10, 2018
Jun 10, 2016
Jun 10, 2016
Aug 9, 2018
May 1, 2018
Apr 2, 2018
Dec 3, 2018
Dec 10, 2018
Apr 2, 2018
Dec 11, 2018

Repository files navigation

Query Overview Bar Charts

alt tag

Overview

Query Overview is a JavaScript library built using Webcharts (1, 2) that creates an interactive bar chart showing the distribution of queries that have been issued regarding data collected in a clinical trial. A typical chart created with query-overview looks like the chart pictured above.

Clicking on a bar outputs a listing of the queries themselves:

Listing

Users can group, rearrange, and sort the bars and filter the data; the full functionality is described here. The library expects a dataset with a form, field, and status column. Users can specify additional columns by which to group and filter the data. Full details about chart configuration are here.

Typical Usage

Provided the input data matches the default column names the library expects, the code to initialize the chart looks like this:

    d3.csv('queries.csv', function(data) {
        queryOverview('body', {}).init(data);
    });

The chart can be configured to facilitate non-standard data formats and to alter the chart itself. Overwrite the defaults with a custom settings object like so:

    let settings = {
        form_col: 'QDATASTR',
        formDescription_col: 'QFORM',
        field_col: 'QVARNAME',
        fieldDescription: 'QVARDESC',
        status_col: 'QSTATUS',
        groups: [
            {value_col: 'AVISIT', label: 'Visit'}],
        filters: [
            {value_col: 'QOPENBY', label: 'Query Opened by'}]
        details: [
            {value_col: 'QFORM', label: 'Form'},
            {value_col: 'QVARDESC', label: 'Field'},
            {value_col: 'QSTATUS', label: ''},
            {value_col: 'QOPENBY', label: 'MarkingGroup'},
            {value_col: 'SUBJID', label: 'Subject ID'},
            {value_col: 'AVISIT', label: 'Visit'}]
        };

    d3.csv('ADQUERY.csv', function(data) {
        queryOverview('body', settings).init(data);
    });

Click here to open an interactive example of query-overview.

Links