D3 Examples - dashboard2

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test-Dashboard</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dc/3.0.9/dc.min.css">
    <!-- <link rel="stylesheet" href="d3.slider.css"> -->
​
    <!-- Dashboard Dependecies -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/keen/dashboards@gh-pages/assets/css/keen-dashboards.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <!-- <script type='text/javascript' src='https://cdn.jsdelivr.net/gh/crossfilter/reductio/reductio.min.js'></script> -->
    <style>
        html, body {
            height: 100%;
            width: 100%;
        }
​
        .svg-container {
            width: 100%;
        }
​
        .irs--big.irs-with-grid {
            height: 70px;
            width: 500px;
            margin-left: 5%;
        }
​
​
/*thead {
    display: table;
    table-layout:fixed;
    width: 100%;
}
tbody {
    display: block;
    height: 19em;
    overflow-y: scroll;
}
tbody tr {
    display: table;
    table-layout:fixed;
    width: 100%;
}
th, td {
    width: auto;
    
}*/
​
    table {
      display: table;
      width: 100%;
    }
​
    table thead,
    table tbody {
      width: 100%;
    }
​
    table thead {
      overflow-y: scroll;
      display: table;
      table-layout: fixed;
      width: calc(100% - 16px);  assuming scrollbar width as 16px 
    }
​
    table tbody {
      overflow: auto;
      height: 150px;
      display: block;
    }
​
    table tr {
      width: 100%;
      text-align: left;
      display: table;
      table-layout: fixed;
    }
​
​
/*    .chart-wrapper {
        display: none;
    }*/
​
      #focus .axis.x .tick text {
        text-anchor: end;
        transform: rotate(-60deg) translate(-10px,-12px);
      }
      #range.dc-chart .axis {
        display: none;
      }
      #range svg {
          display: block; /* default inline causes padding? */
      }
​
      /* disable hover behaviors on background chart */
      .dc-chart .sub._0 rect.bar:hover {
          fill-opacity: 1;
      }
​
      .dc-chart .sub._0 rect.bar {
          cursor: pointer;
      }
​
​
​
    </style>
</head>
<body class="keen-dashboard">
    <!-- Navbar -->
    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <span>
                    <a class="navbar-brand" title="Click to view data source" target="_blank" href="https://github.com/square/crossfilter/wiki/API-Reference">
                        Dc.js Simple Dashboard
                    </a>
                </span>
            </div>
        </div>
    </div>
  <div class="container">
    <div class="row">
      <div class="table-responsive col-md-12">
        <h4>Filtered Records</h4>
        <table class='table table-hover table-striped table-bordered' id='dc-table-graph'>
          <thead>
            <tr class='table-header'>
              <!-- Programmatically insert table headers here -->
            </tr>
          </thead>
        </table>
<!--         <div class="col-sm-12" id="paging">
          Showing <span id="begin"></span>-<span id="end"></span> of <span id="size"></span>
          <input id="Prev" class="btn btn-secondary" role="button" type="button" value="Prev" onclick="javascript:prevPage()" />
          <input id="Next" class="btn btn-secondary" role="button" type="button" value="Next" onclick="javascript:nextPage()"/>
        </div> -->
      </div>
    </div>
    <div id="vertical-whitespace" style="padding: 10px"></div>
  </div>
​
            <div class="col-lg-6 col-md-6">
                <div class="row">
                    <div class="col-lg-12 col-md-12">
                        <div class="chart-wrapper">
                            <div class="chart-stage">
                                <div id="bar-chart" class="svg-container">
                                    <div class="chart-title">
                                        <span>
                                            <strong>Bar Types</strong>
                                        </span>
                                        <span>
                                                <a id="reset-focus" href="#" class="reset">reset</a>&emsp;&emsp;
                                                <a id="reset-all" href="javascript:dc.filterAll(); dc.redrawAll();" class="reset">reset all</a>
                                            <!-- <a href="javascript:focus.filterAll(); dc.redrawAll();"  class="reset">reset</a> -->
                                        </span>
                                        <!-- <div id="range"></div> -->
                                        <div id="focus"></div>
                                        <div id="first-letters"></div>
​
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
​
            <div class="col-lg-6 col-md-6">
                <div class="row">
                    <div class="col-lg-12 col-md-12">
                        <div class="chart-wrapper">
                            <div class="chart-stage">
                                <div id="pie-chart" class="svg-container">
                                    <div class="chart-title">
                                        <span>
                                            <strong>Pie Types</strong>
                                        </span>
                                        <span>
                                            <a href="javascript:pieChart.filterAll(); dc.redrawAll();" style="display:none;" class="reset">reset</a>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
      <h2>Range</h2>
    <div id="ui"></div>
​
​
​
    <script data-require="underscore.js@1.5.2" data-semver="1.5.2" src="//cdn.jsdelivr.net/underscorejs/1.5.2/underscore-min.js"></script>
 <!--    <script data-require="coffee-script@1.4.0" data-semver="1.4.0" src="//cdnjs.cloudflare.com/ajax/libs/coffee-script/1.4.0/coffee-script.min.js"></script> -->
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/js/ion.rangeslider.js"></script> -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.7/crossfilter.js"></script>
    <!-- <script src="d3.slider.js"></script> -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.15.1/d3.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
​
​
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dc/3.2.1/dc.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/reductio/1.0.0/reductio.js"></script>
​
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
    <script lang="babel" type="text/babel" src="index.js"></script>
​
​
    <!--Plugin CSS file with desired skin-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/css/ion.rangeSlider.min.css"/>
    
    <!--jQuery-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    
    <!--Plugin JavaScript file-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/js/ion.rangeslider.min.js"></script>
    
    <script src="https://d3js.org/d3-color.v1.min.js"></script>
    <script src="https://d3js.org/d3-interpolate.v1.min.js"></script>
    <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
​
</html>
​
    