|
| 1 | +<!DOCTYPE html> |
| 2 | +<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> |
| 3 | +<head> |
| 4 | + <meta charset="utf-8"> |
| 5 | + <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
| 6 | + <meta name="viewport" content="width=device-width, initial-scale=1"> |
| 7 | + <title>Local HTML Report</title> |
| 8 | + <link rel="stylesheet" href="css/bootstrap.css" type="text/css"> |
| 9 | + <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"> |
| 10 | + <link rel="stylesheet" href="css/bootstrap-theme.min.css" type="text/css"> |
| 11 | + <link rel="stylesheet" href="css/nv.d3.css" type="text/css"> |
| 12 | + <link rel="stylesheet" href="css/bootstrap-select.min.css" type="text/css"> |
| 13 | + <script src="js/jquery-3.2.1.min.js"></script> |
| 14 | + <script src="js/bootstrap.min.js"></script> |
| 15 | + <script src="js/bootstrap-select.min.js"></script> |
| 16 | + <script src="js/d3.v3.js"></script> |
| 17 | + <script src="js/nv.d3.js"></script> |
| 18 | + <script src="js/d3.layout.cloud.js"></script> |
| 19 | +</head> |
| 20 | +<body><div class="container"> |
| 21 | + |
| 22 | +<H1 id="7">ArES Components</H1> |
| 23 | +<H2 id="0">ComboLineBar Components</H2> |
| 24 | +<font id="1"> |
| 25 | + This object will combine a line and a bar chart. |
| 26 | + The first item should be the line chart |
| 27 | + |
| 28 | + The second will the bar chart |
| 29 | + |
| 30 | + Reference website: http://nvd3.org/examples/linePlusBar.html |
| 31 | + </font> |
| 32 | +<div id="chart2" class="span4"> |
| 33 | +<svg width="960" height="500"></svg> |
| 34 | +</div> |
| 35 | + |
| 36 | +<H2 id="3">Source Code</H2> |
| 37 | +<p id="5">You can download the input data here: <a href="json\linePlusBarData.json">Data Source</a></p> |
| 38 | +<pre><code id="6" class=""> var chart_0 = nv.models.linePlusBarChart() |
| 39 | + .margin({top: 30, right: 60, bottom: 50, left: 70}) |
| 40 | + .x(function(d,i) { return i }) |
| 41 | + .y(function(d,i) { return d[1] }) |
| 42 | + ; |
| 43 | + |
| 44 | + chart_0.xAxis.tickFormat(function(d) { |
| 45 | + var dx = data_0[0].values[d] && data_0[0].values[d][0] || 0; |
| 46 | + return d3.time.format('%x')(new Date(dx)) |
| 47 | + }); |
| 48 | + |
| 49 | + chart_0.y1Axis.tickFormat(d3.format(',f')); |
| 50 | + |
| 51 | + chart_0.y2Axis.tickFormat(function(d) { return '$' + d3.format(',f')(d) }); |
| 52 | + |
| 53 | + chart_0.bars.forceY([0]); |
| 54 | + |
| 55 | + |
| 56 | +// Data section for chart_0 |
| 57 | + var data_0 = [{'key': 'Quantity', 'color': '#ccf', 'bar': 1, 'values': [[1136005200000, 1271000.0], [1138683600000, 1271000.0], [1141102800000, 1271000.0], [1143781200000, 0], [1146369600000, 0], [1149048000000, 0], [1151640000000, 0], [1154318400000, 0], [1156996800000, 0], [1159588800000, 3899486.0], [1162270800000, 3899486.0], [1164862800000, 3899486.0], [1167541200000, 3564700.0], [1170219600000, 3564700.0], [1172638800000, 3564700.0], [1175313600000, 2648493.0], [1177905600000, 2648493.0], [1180584000000, 2648493.0], [1183176000000, 2522993.0], [1185854400000, 2522993.0], [1188532800000, 2522993.0], [1191124800000, 2906501.0], [1193803200000, 2906501.0], [1196398800000, 2906501.0], [1199077200000, 2206761.0], [1201755600000, 2206761.0], [1204261200000, 2206761.0], [1206936000000, 2287726.0], [1209528000000, 2287726.0], [1212206400000, 2287726.0], [1214798400000, 2732646.0], [1217476800000, 2732646.0], [1220155200000, 2732646.0], [1222747200000, 2599196.0], [1225425600000, 2599196.0], [1228021200000, 2599196.0], [1230699600000, 1924387.0], [1233378000000, 1924387.0], [1235797200000, 1924387.0], [1238472000000, 1756311.0], [1241064000000, 1756311.0], [1243742400000, 1756311.0], [1246334400000, 1743470.0], [1249012800000, 1743470.0], [1251691200000, 1743470.0], [1254283200000, 1519010.0], [1256961600000, 1519010.0], [1259557200000, 1519010.0], [1262235600000, 1591444.0], [1264914000000, 1591444.0], [1267333200000, 1591444.0], [1270008000000, 1543784.0], [1272600000000, 1543784.0], [1275278400000, 1543784.0], [1277870400000, 1309915.0], [1280548800000, 1309915.0], [1283227200000, 1309915.0], [1285819200000, 1331875.0], [1288497600000, 1331875.0], [1291093200000, 1331875.0], [1293771600000, 1331875.0], [1296450000000, 1154695.0], [1298869200000, 1154695.0], [1301544000000, 1194025.0], [1304136000000, 1194025.0], [1306814400000, 1194025.0], [1309406400000, 1194025.0], [1312084800000, 1194025.0], [1314763200000, 1244525.0], [1317355200000, 475000.0], [1320033600000, 475000.0], [1322629200000, 475000.0], [1325307600000, 690033.0], [1327986000000, 690033.0], [1330491600000, 690033.0], [1333166400000, 514733.0], [1335758400000, 514733.0]]}, {'key': 'Price', 'color': '#333', 'values': [[1136005200000, 71.89], [1138683600000, 75.51], [1141102800000, 68.49], [1143781200000, 62.72], [1146369600000, 70.39], [1149048000000, 59.77], [1151640000000, 57.27], [1154318400000, 67.96], [1156996800000, 67.85], [1159588800000, 76.98], [1162270800000, 81.08], [1164862800000, 91.66], [1167541200000, 84.84], [1170219600000, 85.73], [1172638800000, 84.61], [1175313600000, 92.91], [1177905600000, 99.8], [1180584000000, 121.191], [1183176000000, 122.04], [1185854400000, 131.76], [1188532800000, 138.48], [1191124800000, 153.47], [1193803200000, 189.95], [1196398800000, 182.22], [1199077200000, 198.08], [1201755600000, 135.36], [1204261200000, 125.02], [1206936000000, 143.5], [1209528000000, 173.95], [1212206400000, 188.75], [1214798400000, 167.44], [1217476800000, 158.95], [1220155200000, 169.53], [1222747200000, 113.66], [1225425600000, 107.59], [1228021200000, 92.67], [1230699600000, 85.35], [1233378000000, 90.13], [1235797200000, 89.31], [1238472000000, 105.12], [1241064000000, 125.83], [1243742400000, 135.81], [1246334400000, 142.43], [1249012800000, 163.39], [1251691200000, 168.21], [1254283200000, 185.35], [1256961600000, 188.5], [1259557200000, 199.91], [1262235600000, 210.732], [1264914000000, 192.063], [1267333200000, 204.62], [1270008000000, 235.0], [1272600000000, 261.09], [1275278400000, 256.88], [1277870400000, 251.53], [1280548800000, 257.25], [1283227200000, 243.1], [1285819200000, 283.75], [1288497600000, 300.98], [1291093200000, 311.15], [1293771600000, 322.56], [1296450000000, 339.32], [1298869200000, 353.21], [1301544000000, 348.5075], [1304136000000, 350.13], [1306814400000, 347.83], [1309406400000, 335.67], [1312084800000, 390.48], [1314763200000, 384.83], [1317355200000, 381.32], [1320033600000, 404.78], [1322629200000, 382.2], [1325307600000, 405.0], [1327986000000, 456.48], [1330491600000, 542.44], [1333166400000, 599.55], [1335758400000, 583.98]]}] ; |
| 58 | + |
| 59 | + d3.select("#chart0 svg") |
| 60 | + .datum(data_0).transition() |
| 61 | + .duration(350) |
| 62 | + .call(chart_0); |
| 63 | + </code></pre> |
| 64 | +<script> |
| 65 | +nv.addGraph(function() { |
| 66 | + |
| 67 | + var chart_2 = nv.models.linePlusBarChart() |
| 68 | + .margin({top: 30, right: 60, bottom: 50, left: 70}) |
| 69 | + .x(function(d,i) { return i }) |
| 70 | + .y(function(d,i) { return d[1] }) |
| 71 | + ; |
| 72 | + |
| 73 | + chart_2.xAxis.tickFormat(function(d) { |
| 74 | + var dx = data_2[0].values[d] && data_2[0].values[d][0] || 0; |
| 75 | + return d3.time.format('%x')(new Date(dx)) |
| 76 | + }); |
| 77 | + |
| 78 | + chart_2.y1Axis.tickFormat(d3.format(',f')); |
| 79 | + |
| 80 | + chart_2.y2Axis.tickFormat(function(d) { return '$' + d3.format(',f')(d) }); |
| 81 | + |
| 82 | + chart_2.bars.forceY([0]); |
| 83 | + |
| 84 | + |
| 85 | +// Data section for chart_2 |
| 86 | + var data_2 = [{'key': 'Quantity', 'color': '#ccf', 'bar': 1, 'values': [[1136005200000, 1271000.0], [1138683600000, 1271000.0], [1141102800000, 1271000.0], [1143781200000, 0], [1146369600000, 0], [1149048000000, 0], [1151640000000, 0], [1154318400000, 0], [1156996800000, 0], [1159588800000, 3899486.0], [1162270800000, 3899486.0], [1164862800000, 3899486.0], [1167541200000, 3564700.0], [1170219600000, 3564700.0], [1172638800000, 3564700.0], [1175313600000, 2648493.0], [1177905600000, 2648493.0], [1180584000000, 2648493.0], [1183176000000, 2522993.0], [1185854400000, 2522993.0], [1188532800000, 2522993.0], [1191124800000, 2906501.0], [1193803200000, 2906501.0], [1196398800000, 2906501.0], [1199077200000, 2206761.0], [1201755600000, 2206761.0], [1204261200000, 2206761.0], [1206936000000, 2287726.0], [1209528000000, 2287726.0], [1212206400000, 2287726.0], [1214798400000, 2732646.0], [1217476800000, 2732646.0], [1220155200000, 2732646.0], [1222747200000, 2599196.0], [1225425600000, 2599196.0], [1228021200000, 2599196.0], [1230699600000, 1924387.0], [1233378000000, 1924387.0], [1235797200000, 1924387.0], [1238472000000, 1756311.0], [1241064000000, 1756311.0], [1243742400000, 1756311.0], [1246334400000, 1743470.0], [1249012800000, 1743470.0], [1251691200000, 1743470.0], [1254283200000, 1519010.0], [1256961600000, 1519010.0], [1259557200000, 1519010.0], [1262235600000, 1591444.0], [1264914000000, 1591444.0], [1267333200000, 1591444.0], [1270008000000, 1543784.0], [1272600000000, 1543784.0], [1275278400000, 1543784.0], [1277870400000, 1309915.0], [1280548800000, 1309915.0], [1283227200000, 1309915.0], [1285819200000, 1331875.0], [1288497600000, 1331875.0], [1291093200000, 1331875.0], [1293771600000, 1331875.0], [1296450000000, 1154695.0], [1298869200000, 1154695.0], [1301544000000, 1194025.0], [1304136000000, 1194025.0], [1306814400000, 1194025.0], [1309406400000, 1194025.0], [1312084800000, 1194025.0], [1314763200000, 1244525.0], [1317355200000, 475000.0], [1320033600000, 475000.0], [1322629200000, 475000.0], [1325307600000, 690033.0], [1327986000000, 690033.0], [1330491600000, 690033.0], [1333166400000, 514733.0], [1335758400000, 514733.0]]}, {'key': 'Price', 'color': '#333', 'values': [[1136005200000, 71.89], [1138683600000, 75.51], [1141102800000, 68.49], [1143781200000, 62.72], [1146369600000, 70.39], [1149048000000, 59.77], [1151640000000, 57.27], [1154318400000, 67.96], [1156996800000, 67.85], [1159588800000, 76.98], [1162270800000, 81.08], [1164862800000, 91.66], [1167541200000, 84.84], [1170219600000, 85.73], [1172638800000, 84.61], [1175313600000, 92.91], [1177905600000, 99.8], [1180584000000, 121.191], [1183176000000, 122.04], [1185854400000, 131.76], [1188532800000, 138.48], [1191124800000, 153.47], [1193803200000, 189.95], [1196398800000, 182.22], [1199077200000, 198.08], [1201755600000, 135.36], [1204261200000, 125.02], [1206936000000, 143.5], [1209528000000, 173.95], [1212206400000, 188.75], [1214798400000, 167.44], [1217476800000, 158.95], [1220155200000, 169.53], [1222747200000, 113.66], [1225425600000, 107.59], [1228021200000, 92.67], [1230699600000, 85.35], [1233378000000, 90.13], [1235797200000, 89.31], [1238472000000, 105.12], [1241064000000, 125.83], [1243742400000, 135.81], [1246334400000, 142.43], [1249012800000, 163.39], [1251691200000, 168.21], [1254283200000, 185.35], [1256961600000, 188.5], [1259557200000, 199.91], [1262235600000, 210.732], [1264914000000, 192.063], [1267333200000, 204.62], [1270008000000, 235.0], [1272600000000, 261.09], [1275278400000, 256.88], [1277870400000, 251.53], [1280548800000, 257.25], [1283227200000, 243.1], [1285819200000, 283.75], [1288497600000, 300.98], [1291093200000, 311.15], [1293771600000, 322.56], [1296450000000, 339.32], [1298869200000, 353.21], [1301544000000, 348.5075], [1304136000000, 350.13], [1306814400000, 347.83], [1309406400000, 335.67], [1312084800000, 390.48], [1314763200000, 384.83], [1317355200000, 381.32], [1320033600000, 404.78], [1322629200000, 382.2], [1325307600000, 405.0], [1327986000000, 456.48], [1330491600000, 542.44], [1333166400000, 599.55], [1335758400000, 583.98]]}] ; |
| 87 | + |
| 88 | + d3.select("#chart2 svg") |
| 89 | + .datum(data_2).transition() |
| 90 | + .duration(350) |
| 91 | + .call(chart_2); |
| 92 | + |
| 93 | + |
| 94 | + |
| 95 | + |
| 96 | +}); |
| 97 | + |
| 98 | +</script> |
| 99 | + |
| 100 | +</div> |
| 101 | +</body> |
| 102 | +</html> |
0 commit comments