examples/htdocs/widgetsrising/index.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5     <meta name="viewport" content="width=device-width, initial-scale=1">
   6     <title>Widgets Rising</title>
   7     <link rel="stylesheet" href="http://cdn.jsdelivr.net/jquery.ui/1.11.2/themes/base/minified/jquery-ui.min.css">
   8     <link rel="stylesheet" href="http://cdn.jsdelivr.net/bootstrap/3.3.1/css/bootstrap.min.css">
   9     <link rel="stylesheet" href="http://cdn.jsdelivr.net/bootstrap/3.3.1/css/bootstrap-theme.min.css">
  10     <link rel="stylesheet" href="nv.d3.css" />
  11   </head>
  12   <style>
  13     #content {
  14       max-width: 860px;
  15     }
  16     nav {
  17       margin-bottom: 20px;
  18     }
  19
  20     table .progress {
  21       margin: 0;
  22     }
  23
  24     /* A somewhat intense way to relatively scale the charts
  25        while preserving a chosen aspect ratio */
  26     #sumpie {
  27       position: relative;
  28     }
  29     #sumpie:before{
  30       content: "";
  31       display: block;
  32       padding-top: 100%;  /* 1:1 */
  33     }
  34     #sumpie > svg {
  35       position:  absolute;
  36       top: 0;
  37       left: 0;
  38       bottom: 0;
  39       right: 0;
  40       width: 100%;
  41       height: 100%;
  42     }
  43
  44     #sumlines {
  45       position: relative;
  46     }
  47     #sumlines:before{
  48       content: "";
  49       display: block;
  50       padding-top: 50%;
  51     }
  52     #sumlines > svg {
  53       position:  absolute;
  54       top: 0;
  55       left: 0;
  56       bottom: 0;
  57       right: 0;
  58       width: 100%;
  59       height: 100%;
  60     }
  61   </style>
  62   <body>
  63     <nav class="navbar-static-top navbar-default">
  64       <div class="container-fluid">
  65         <div class="navbar-header">
  66           <a class="navbar-brand" href="#">Widget Admin</a>
  67         </div>
  68         <ul class="nav navbar-nav navbar-left">
  69           <li><a href="#">Add widget</a></li>
  70           <li><a href="#">Billing</a></li>
  71           <li><a href="#">Help</a></li>
  72         </ul>
  73         <ul class="nav navbar-nav navbar-right">
  74           <li><p class="navbar-text">Logged in as Syndicated Incorporated</p></li>
  75           <li><a href="#">Logout</a></li>
  76         </ul>
  77       </div>
  78     </nav>
  79
  80     <div id="content" class="container">
  81       <div class="col-sm-12"><div class="panel panel-default">
  82         <div class="panel-heading"><h3 class="panel-title">Summary</h3></div>
  83         <div class="panel-body">
  84           <div class="row">
  85             <div class="col-sm-7">
  86               <h3>Widgets configured: 3<h3>
  87               <h3>Widgets active: 2</h3>
  88               <h3>Total clicks this month: 3058</h3>
  89             </div>
  90             <div id="sumpie" class="col-sm-5">
  91               <svg></svg>
  92             </div>
  93           </div>
  94           <div class="row">
  95             <div id="sumlines" class='with-3d-shadow with-transitions'>
  96               <svg></svg>
  97             </div>
  98           </div>
  99         </div>
 100       </div></div>
 101
 102       <div class="col-sm-12"><div class="panel panel-default">
 103         <div class="panel-heading"><h3 class="panel-title">Widgets</h3></div>
 104         <table class="table">
 105           <tr>
 106             <th>Widget</th>
 107             <th>Actions</th>
 108             <th>Monthly clicks</th>
 109             <th>Budget</th>
 110           </tr>
 111           <tr>
 112             <td>Widget 1</td>
 113             <td>
 114               <a class="edit-widget" href="#"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></a>
 115               <a href="#"><span class="glyphicon glyphicon-off" aria-hidden="true"></span></a>
 116               <a href="#"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a>
 117             </td>
 118             <td>363</td>
 119             <td>
 120               <div class="progress">
 121                 <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">$48.00 / $80.00</div></div>
 122             </td>
 123           </tr>
 124           <tr>
 125             <td>Reference</td>
 126             <td>
 127               <a class="edit-widget" href="#"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></a>
 128               <a href="#"><span class="glyphicon glyphicon-off" aria-hidden="true"></span></a>
 129               <a href="#"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a>
 130             </td>
 131             <td>210</td>
 132             <td>
 133               <div class="progress">
 134                 <div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">$35.00 / $70.00</div></div>
 135             </td>
 136           </tr>
 137           <tr>
 138             <td>Historical image</td>
 139             <td>
 140               <a class="edit-widget" href="#"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></a>
 141               <a href="#"><span class="glyphicon glyphicon-off" aria-hidden="true"></span></a>
 142               <a href="#"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a>
 143             </td>
 144             <td>471</td>
 145             <td>
 146               <div class="progress">
 147                 <div class="progress-bar" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" style="width: 95%;">$95.00 / $100.00</div></div>
 148             </td>
 149           </tr>
 150         </table>
 151       </div></div>
 152     </div>
 153     <script src="http://cdn.jsdelivr.net/jquery/2.1.3/jquery.min.js"></script>
 154     <script src="http://cdn.jsdelivr.net/jquery.ui/1.11.2/jquery-ui.min.js"></script>
 155     <script src="http://cdn.jsdelivr.net/bootstrap/3.3.1/js/bootstrap.min.js"></script>
 156     <script src="http://cdn.jsdelivr.net/d3js/3.5.2/d3.min.js"></script>
 157     <script src="nv.d3.js"></script>
 158     <script>
 159       // Summary pie chart
 160       var obj = [{label: "Spent this month", value: 102.65}, {label: "Remaining budget", value: 47.35}];
 161       nv.addGraph(function() {
 162         var chart = nv.models.pieChart()
 163             .x(function(d) { return d.label })
 164             .y(function(d) { return d.value })
 165             .showLabels(true)     //Display pie labels
 166             .pieLabelsOutside(false)
 167             .labelThreshold(.05)  //Configure the minimum slice size for labels to show up
 168             .labelType("value") //Configure what type of data to show in the label. Can be "key", "value" or "percent"
 169             .donut(true)          //Turn on Donut mode. Makes pie chart look tasty!
 170             .donutRatio(0.35)     //Configure how big you want the donut hole size to be.
 171             .title("January");
 172             ;
 173
 174           d3.select("#sumpie > svg")
 175               .datum(obj)
 176               .transition().duration(350)
 177               .call(chart);
 178
 179         return chart;
 180       });
 181
 182       function genLine() {
 183         var line = [];
 184         for (var i = 1; i < 13; i++) {
 185           var obj = {};
 186           obj.x = i;
 187           obj.y = Math.floor(Math.random()*500);
 188           line.push(obj);
 189         }
 190         return line;
 191       }
 192
 193       var obj2 = [
 194         {key:"Widget 1", values:genLine()},
 195         {key:"Reference", values:genLine()},
 196         {key:"Historical image", values:genLine()}
 197       ];
 198       nv.addGraph(function() {
 199         var chart = nv.models.lineWithFocusChart();
 200         chart.xAxis.tickFormat(d3.format(',f'));
 201         chart.x2Axis.tickFormat(d3.format(',f'));
 202         chart.yAxis.tickFormat(d3.format(',f'));
 203         chart.yAxis.axisLabel("Clicks");
 204         chart.y2Axis.tickFormat(d3.format(',f'));
 205         d3.select('#sumlines > svg')
 206             .datum(obj2)
 207             .call(chart);
 208         nv.utils.windowResize(chart.update);
 209         return chart;
 210       });
 211
 212     </script>
 213   </body>
 214 </html>