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" />
24 /* A somewhat intense way to relatively scale the charts
25 while preserving a chosen aspect ratio */
32 padding-top: 100%; /* 1:1 */
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>
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>
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>
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">
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>
90 <div id="sumpie" class="col-sm-5">
95 <div id="sumlines" class='with-3d-shadow with-transitions'>
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">
108 <th>Monthly clicks</th>
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>
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>
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>
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>
138 <td>Historical image</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>
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>
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>
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.
174 d3.select("#sumpie > svg")
176 .transition().duration(350)
184 for (var i = 1; i < 13; i++) {
187 obj.y = Math.floor(Math.random()*500);
194 {key:"Widget 1", values:genLine()},
195 {key:"Reference", values:genLine()},
196 {key:"Historical image", values:genLine()}
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')
208 nv.utils.windowResize(chart.update);