D3 Examples - Webcharts - Sample Dashboard

Webcharts - Sample Dashboard

This study monitoring dashboard shows common study metrics such as enrollment status, visit completion, and specimen and case report form status. The figure combines 6 different chart objects, several of which have attached controls allowing users to filter by site and change the y-axis from a relative value to an absolute count. A simple callback function is used in the top left chart to customize the legend with overall counts and provide details for the y-axis in a tooltip.

This graphic was created using webcharts version 1.4.0

xxxxxxxxxx
 
<!DOCTYPE HTML>
<html lang="en">
<head>
    <title>Interactive Dashboard</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
​
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css">
    
    <link rel="stylesheet" type="text/css" href="https://graphics.rhoworld.com/src/webcharts/webcharts.v1.4.0.css">
    <link rel="stylesheet" type="text/css" href="gg-dashboard.css">
​
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script type="text/javascript" src="https://graphics.rhoworld.com/src/webcharts/webcharts.v1.4.0.js"></script>
</head>
​
<body>
    <div class="ig-dashboard">
        <div class="tab-content">
            <div class="gg-dash-item top left">
                <h4 class="gg-dash-item-title">Screening and Randomization</h4>
                <div class="gg-dash-item-content"></div>
            </div>
            <div class="gg-dash-item top middle">
                <h4 class="gg-dash-item-title">Visit Completion</h4>
                <div class="gg-dash-item-content"></div>
            </div>
            <div class="gg-dash-item top right">
                <h4 class="gg-dash-item-title">Queries</h4>
                <div class="gg-dash-item-content"></div>
            </div>
            <div class="gg-dash-item bottom left">
                <h4 class="gg-dash-item-title">Enrollment</h4>
                <div class="gg-dash-item-content"></div>
            </div>
            <div class="gg-dash-item bottom middle">
                <h4 class="gg-dash-item-title">Protocol Deviations Over Time</h4>
                <div class="gg-dash-item-content"></div>
            </div>
            <div class="gg-dash-item bottom right">
                <h4 class="gg-dash-item-title">Form Completion</h4>
                <div class="gg-dash-item-content"></div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="study-dashboard.js"></script>
​
</html>
​
​
    