Rasika
10 years ago
parent
ef9a603320
commit
174ac6a48b
@ -0,0 +1,8 @@
|
||||
{{layout "fluid"}}
|
||||
{{#zone "title"}}
|
||||
WSO2 DC | FireAlarm
|
||||
{{/zone}}
|
||||
{{#zone "body"}}
|
||||
{{unit "appbar"}}
|
||||
{{unit "firealarm"}}
|
||||
{{/zone}}
|
||||
@ -0,0 +1,9 @@
|
||||
{{authorized}}
|
||||
{{layout "fluid"}}
|
||||
{{#zone "title"}}
|
||||
WSO2 DC | FireAlarm
|
||||
{{/zone}}
|
||||
{{#zone "body"}}
|
||||
{{unit "appbar"}}
|
||||
{{unit "mydevice"}}
|
||||
{{/zone}}
|
||||
|
Before Width: | Height: | Size: 4.9 KiB After Width: | Height: | Size: 4.9 KiB |
|
Before Width: | Height: | Size: 1.1 MiB After Width: | Height: | Size: 1.1 MiB |
@ -0,0 +1,82 @@
|
||||
{{#zone "main"}}
|
||||
<div class="container container-bg white-bg">
|
||||
<div class=" margin-top-double">
|
||||
<div class="row row padding-top-double padding-bottom-double margin-bottom-double">
|
||||
<div class="col-lg-12 margin-top-double">
|
||||
<h1 class="grey ">Fire Alarm</h1>
|
||||
<hr>
|
||||
<p class="margin-bottom-double light-grey ">Connect your Fire Alarm device
|
||||
to the WSO2 device cloud. </p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row margin-bottom-double">
|
||||
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 padding-top">
|
||||
<img src="{{self.publicURL}}/images/firealarm.png" class="img-responsive">
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6 col-md-8 col-lg-8 padding-top">
|
||||
<h2 class="uppercase">Ingredients</h2>
|
||||
<hr>
|
||||
<p class="grey margin-top">Hardware Requirements </p>
|
||||
<br><br>
|
||||
<span class="fw-stack fw-lg margin-right">
|
||||
<i class="fw fw-ring fw-stack-2x"> </i>
|
||||
<i class="fw fw-right-arrow-2 fw-stack-1x"></i>
|
||||
</span>Arduino Uno<br><br>
|
||||
<span class="fw-stack fw-lg margin-right">
|
||||
<i class="fw fw-ring fw-stack-2x"> </i>
|
||||
<i class="fw fw-right-arrow-2 fw-stack-1x"></i>
|
||||
</span>Arduino Ethernet / WiFi Shield
|
||||
<br /><br />
|
||||
<form method="POST" class="form-login-box"
|
||||
action="{{sketchPath}}">
|
||||
<input type="hidden" name="type" value="firealarm" />
|
||||
<button class="blue-btn" type="submit">Create Sketch</button>
|
||||
<button class="blue-btn right" type="button" onclick="document
|
||||
.location
|
||||
.href='mydevices'">My
|
||||
Devices</button>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
<div class ="col-xs-12 col-sm-6 col-md-3 col-lg-12 padding-double grey-bg ">
|
||||
<h2 class="uppercase">Prepare</h2><hr>
|
||||
<p class="grey margin-top">Get your device ready </p>
|
||||
<div class="margin-doubles padding-top-double light-grey margin-left-double margin-bottom ">
|
||||
<span class="circle">01 </span> <span class="padding-left"> Mount the Ethernet / Wifi shield on the Arduino Uno device.</span>
|
||||
</div>
|
||||
<div class="margin-doubles padding-top-double light-grey margin-left-double margin-bottom">
|
||||
<span class="circle">02 </span> <span class="padding-left"> Mount the Ethernet / Wifi shield on the Arduino Uno device.</span>
|
||||
</div>
|
||||
<div class="margin-doubles padding-top-double margin-bottom-double light-grey margin-left-double margin-bottom">
|
||||
<span class="circle">03 </span> <span class="padding-left"> Mount the Ethernet / Wifi shield on the Arduino Uno device.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row row padding-top-double padding-bottom-double margin-bottom-double ">
|
||||
<div class="col-lg-12 margin-top-double">
|
||||
<h2 class="uppercase ">Connect (Quickstart)</h2>
|
||||
<hr>
|
||||
<p class="margin-bottom-double light-grey ">Internet of Things Foundation Quickstart connection </p>
|
||||
<div class="margin-doubles padding-top-double light-grey margin-left-double margin-bottom ">
|
||||
<span class="circle">01 </span> <span class="padding-left">Use the following command to download the installer from GitHub:</span><br>
|
||||
</div>
|
||||
<div class="margin-doubles padding-top-double light-grey margin-left-double margin-bottom ">
|
||||
<span class="circle">02 </span> <span class="padding-left">Download the Sketch installer from the Arduino website http://arduino.cc/en/Main/Software</span><br>
|
||||
</div>
|
||||
<div class="margin-doubles padding-top-double light-grey margin-left-double margin-bottom ">
|
||||
<span class="circle">03 </span> <span class="padding-left"> Install the Sketch program</span><br>
|
||||
</div>
|
||||
<div class="margin-doubles padding-top-double light-grey margin-left-double margin-bottom ">
|
||||
<span class="circle">04 </span> <span class="padding-left">Use the Sketch program to open the samples code samples/quickstart/quickstart.ino</span><br>
|
||||
</div>
|
||||
<div class="margin-doubles padding-top-double light-grey margin-left-double margin-bottom ">
|
||||
<span class="circle">05 </span> <span class="padding-left">View the lower part of the Sketch pad window to check that the COM connection is shown as active</span><br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/zone}}
|
||||
{{#zone "topCss"}}
|
||||
<link href="{{self.publicURL}}/css/fontwso2.css" rel="stylesheet">
|
||||
<link href="{{self.publicURL}}/css/fontwso2-extend.css" rel="stylesheet">
|
||||
{{/zone}}
|
||||
@ -0,0 +1,4 @@
|
||||
function onRequest(context){
|
||||
context.sketchPath = "api/device/sketch";
|
||||
return context;
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
{
|
||||
"predicate": "false"
|
||||
}
|
||||
|
After Width: | Height: | Size: 139 KiB |
@ -0,0 +1,110 @@
|
||||
{{#zone "topCss"}}
|
||||
<link href="{{self.publicURL}}/css/nv.d3.css" rel="stylesheet" />
|
||||
<link href="{{self.publicURL}}/css/daterangepicker.css" rel="stylesheet"/>
|
||||
{{/zone}}
|
||||
{{#zone "topJs"}}
|
||||
<!-- -->
|
||||
<script src="{{self.publicURL}}/js/d3.min.js"></script>
|
||||
<script src="{{self.publicURL}}/js/nv.d3.js"></script>
|
||||
<script src="{{self.publicURL}}/js/stream_layers.js"></script>
|
||||
<script src="{{self.publicURL}}/js/moment.min.js"></script>
|
||||
<script src="{{self.publicURL}}/js/jquery.daterangepicker.js"></script>
|
||||
{{/zone}}
|
||||
{{#zone "main"}}
|
||||
<div class="container container-bg white-bg">
|
||||
<div class=" margin-top-double">
|
||||
<div class="row row padding-top-double padding-bottom-double margin-bottom-double ">
|
||||
<div class="col-lg-12 margin-top-double">
|
||||
<h1 class="grey ">Device Cloud</h1>
|
||||
<hr>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row float-right margin-top-minus">
|
||||
<div class="btn-black padding-top padding-bottom">
|
||||
<span> <img src="{{self.publicURL}}/images/temp.png" > </span>
|
||||
<span class="middle padding-bottom-double">Read Temp</span></div>
|
||||
<div class="btn-black padding-top padding-bottom">
|
||||
<span> <img src="{{self.publicURL}}/images/fan.png" > </span>
|
||||
<span class="middle padding-bottom-double">Switch Fan</span>
|
||||
</div>
|
||||
<div class="btn-black padding-top padding-bottom" onclick="changeImage()">
|
||||
<span> <img id="myImage" onclick="changeImage()" src="{{self.publicURL}}/images/bulb-off.png" > </span>
|
||||
<span class="middle padding-bottom-double">Switch Bulb</span>
|
||||
</div >
|
||||
|
||||
<div class="right margin-right">
|
||||
<span class="right margin-right">Select date range :</span>
|
||||
<input id="date-range1" size="60" value=""> </div>
|
||||
</div>
|
||||
|
||||
<div class="clear"></div>
|
||||
|
||||
<div class="row margin-double">
|
||||
<div class="chart1">
|
||||
<h2 class="grey ">Read Temp</h2><hr>
|
||||
<svg></svg>
|
||||
</div><hr>
|
||||
</div>
|
||||
<div class="row margin-double padding-double "></div>
|
||||
<div class="row margin-double">
|
||||
<div class="chart2">
|
||||
<h2 class="grey ">Switch Fan</h2><hr>
|
||||
<svg></svg>
|
||||
</div><hr>
|
||||
</div>
|
||||
<div class="row margin-double">
|
||||
<div class="chart3">
|
||||
<h2 class="grey ">Switch Bulb</h2><hr>
|
||||
<svg></svg>
|
||||
</div><hr>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/zone}}
|
||||
{{#zone "bottomJs"}}
|
||||
<script type="text/javascript">
|
||||
var configObject = {
|
||||
|
||||
format: 'DD.MM.YYYY HH:mm',
|
||||
separator: ' to ',
|
||||
language: 'auto',
|
||||
startOfWeek: 'sunday',// or sunday
|
||||
getValue: function()
|
||||
{
|
||||
return this.value;
|
||||
},
|
||||
setValue: function(s)
|
||||
{
|
||||
this.value = s;
|
||||
},
|
||||
startDate: false,
|
||||
endDate: false,
|
||||
minDays: 0,
|
||||
maxDays: 0,
|
||||
showShortcuts: true,
|
||||
time: {
|
||||
enabled: true
|
||||
},
|
||||
shortcuts:
|
||||
{
|
||||
//'prev-days': [1,3,5,7],
|
||||
'next-days': [3,5,7],
|
||||
//'prev' : ['week','month','year'],
|
||||
'next' : ['week','month','year']
|
||||
},
|
||||
customShortcuts : [],
|
||||
inline:false,
|
||||
container: 'body',
|
||||
alwaysOpen:false,
|
||||
singleDate:false,
|
||||
batchMode:false,
|
||||
stickyMonths: false
|
||||
};
|
||||
|
||||
$('#date-range1').dateRangePicker(configObject);
|
||||
</script>
|
||||
<script src="{{self.publicURL}}/js/bulb.js"></script>
|
||||
<script src="{{self.publicURL}}/js/cumulativelinechart.js"></script>
|
||||
<script src="{{self.publicURL}}/js/discretebarchart.js"></script>
|
||||
<script src="{{self.publicURL}}/js/linewithfocuschart.js"></script>
|
||||
{{/zone}}
|
||||
@ -0,0 +1,4 @@
|
||||
function onRequest(context){
|
||||
context.sketchPath = "api/device/sketch";
|
||||
return context;
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
{
|
||||
"predicate": "true"
|
||||
}
|
||||
@ -0,0 +1,232 @@
|
||||
.date-picker
|
||||
{
|
||||
width:170px;
|
||||
height:25px;
|
||||
padding:0;
|
||||
border:0;
|
||||
line-height:25px;
|
||||
padding-left:10px;
|
||||
font-size:12px;
|
||||
font-family:Arial;
|
||||
font-weight:bold;
|
||||
cursor:pointer;
|
||||
color:#303030;
|
||||
position:relative;
|
||||
z-index:2;
|
||||
}
|
||||
.date-picker-wrapper
|
||||
{
|
||||
position:absolute;
|
||||
z-index:1;
|
||||
border:1px solid #bfbfbf;
|
||||
background-color:#efefef;
|
||||
width:428px;
|
||||
padding: 5px 12px;
|
||||
font-size:12px;
|
||||
line-height:20px;
|
||||
color:#aaa;
|
||||
font-family:Arial;
|
||||
box-shadow:3px 3px 10px rgba(0,0,0,0.5);
|
||||
}
|
||||
.date-picker-wrapper.single-date {
|
||||
width:auto;
|
||||
}
|
||||
.date-picker-wrapper.no-shortcuts { padding-bottom:12px;}
|
||||
.date-picker-wrapper .footer
|
||||
{
|
||||
font-size:11px;
|
||||
padding-top: 3px;
|
||||
}
|
||||
.date-picker-wrapper b
|
||||
{
|
||||
color:#666;
|
||||
font-weight:700;
|
||||
}
|
||||
.date-picker-wrapper a
|
||||
{
|
||||
color: rgb(107, 180, 214);
|
||||
text-decoration:underline;
|
||||
}
|
||||
.date-picker-wrapper .month-name
|
||||
{
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.date-picker-wrapper .month-wrapper
|
||||
{
|
||||
border:1px solid #bfbfbf;
|
||||
border-radius:3px;
|
||||
background-color:#fff;
|
||||
padding:5px;
|
||||
cursor:default;
|
||||
position:relative;
|
||||
_overflow:hidden;
|
||||
}
|
||||
.date-picker-wrapper .month-wrapper table
|
||||
{
|
||||
width:190px;
|
||||
float:left;
|
||||
}
|
||||
.date-picker-wrapper .month-wrapper table.month2
|
||||
{
|
||||
width:190px;
|
||||
float:right;
|
||||
}
|
||||
.date-picker-wrapper .month-wrapper table th,
|
||||
.date-picker-wrapper .month-wrapper table td
|
||||
{
|
||||
vertical-align:middle;
|
||||
text-align:center;
|
||||
line-height:14px;
|
||||
margin : 0px;
|
||||
padding : 0px;
|
||||
}
|
||||
.date-picker-wrapper .month-wrapper table .day
|
||||
{
|
||||
height:19px;
|
||||
line-height:19px;
|
||||
font-size:12px;
|
||||
margin-bottom:1px;
|
||||
color:#999;
|
||||
cursor:default;
|
||||
}
|
||||
.date-picker-wrapper .month-wrapper table div.day.lastMonth,
|
||||
.date-picker-wrapper .month-wrapper table div.day.nextMonth
|
||||
{
|
||||
color:#999;
|
||||
cursor:default;
|
||||
}
|
||||
.date-picker-wrapper .month-wrapper table .day.checked
|
||||
{
|
||||
background-color: rgba(156, 219, 247, 0.5);
|
||||
}
|
||||
.date-picker-wrapper .month-wrapper table .week-name
|
||||
{
|
||||
height:20px;
|
||||
line-height:20px;
|
||||
font-weight:100;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.date-picker-wrapper .month-wrapper table .day.has-tooltip { cursor:help !important;}
|
||||
|
||||
.date-picker-wrapper .month-wrapper table .day.toMonth.valid
|
||||
{
|
||||
color:#333;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.date-picker-wrapper .month-wrapper table .day.real-today { background-color: rgb(255, 230, 132); }
|
||||
.date-picker-wrapper .month-wrapper table .day.real-today.checked { background-color: rgb(112, 204, 213); }
|
||||
|
||||
|
||||
.date-picker-wrapper table .caption
|
||||
{
|
||||
height:40px;
|
||||
}
|
||||
.date-picker-wrapper table .caption .next,
|
||||
.date-picker-wrapper table .caption .prev
|
||||
{
|
||||
padding:0 5px;
|
||||
cursor:pointer;
|
||||
}
|
||||
.date-picker-wrapper table .caption .next:hover,
|
||||
.date-picker-wrapper table .caption .prev:hover
|
||||
{
|
||||
background-color:#ccc;
|
||||
color:white;
|
||||
}
|
||||
.date-picker-wrapper .gap
|
||||
{
|
||||
position:absolute;
|
||||
display:none;
|
||||
top:0px;
|
||||
left:204px;
|
||||
z-index: 1;
|
||||
width:15px;
|
||||
height: 100%;
|
||||
background-color:red;
|
||||
font-size:0;
|
||||
line-height:0;
|
||||
}
|
||||
.date-picker-wrapper .gap .gap-lines { height: 100%; overflow:hidden; }
|
||||
.date-picker-wrapper .gap .gap-line { height:15px;width:15px; position:relative; }
|
||||
.date-picker-wrapper .gap .gap-line .gap-1 { z-index:1; height:0; border-left:8px solid white; border-top:8px solid #eee;border-bottom:8px solid #eee; }
|
||||
.date-picker-wrapper .gap .gap-line .gap-2 { position:absolute; right:0; top:0px; z-index:2; height:0; border-left:8px solid transparent; border-top:8px solid white; }
|
||||
.date-picker-wrapper .gap .gap-line .gap-3 { position:absolute; right:0; top:8px; z-index:2; height:0; border-left:8px solid transparent; border-bottom:8px solid white; }
|
||||
.date-picker-wrapper .gap .gap-top-mask { width: 6px; height:1px; position:absolute; top: -1px; left: 1px; background-color: #eee; z-index:3; }
|
||||
.date-picker-wrapper .gap .gap-bottom-mask { width: 6px; height:1px; position:absolute; bottom: -1px; left: 7px; background-color: #eee; z-index:3; }
|
||||
|
||||
.date-picker-wrapper .selected-days
|
||||
{
|
||||
display:none;
|
||||
}
|
||||
.date-picker-wrapper .drp_top-bar
|
||||
{
|
||||
line-height:40px;
|
||||
height:40px;
|
||||
position:relative;
|
||||
}
|
||||
.date-picker-wrapper .drp_top-bar .error-top { display:none; }
|
||||
.date-picker-wrapper .drp_top-bar .normal-top { display:none; }
|
||||
.date-picker-wrapper .drp_top-bar .default-top { display:block; }
|
||||
|
||||
.date-picker-wrapper .drp_top-bar.error .default-top { display:none; }
|
||||
.date-picker-wrapper .drp_top-bar.error .error-top { display:block; color:red; }
|
||||
|
||||
.date-picker-wrapper .drp_top-bar.normal .default-top { display:none; }
|
||||
.date-picker-wrapper .drp_top-bar.normal .normal-top { display:block; }
|
||||
|
||||
.date-picker-wrapper .drp_top-bar .apply-btn
|
||||
{
|
||||
position:absolute;
|
||||
right: 0px;
|
||||
top: 6px;
|
||||
padding:3px 5px;
|
||||
margin:0;
|
||||
font-size:12px;
|
||||
border-radius:4px;
|
||||
cursor:pointer;
|
||||
|
||||
color: #d9eef7;
|
||||
border: solid 1px #0076a3;
|
||||
background: #0095cd;
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
|
||||
background: -moz-linear-gradient(top, #00adee, #0078a5);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
|
||||
color:white;
|
||||
}
|
||||
|
||||
.date-picker-wrapper .drp_top-bar .apply-btn.disabled
|
||||
{
|
||||
cursor: pointer;
|
||||
color: #606060;
|
||||
border: solid 1px #b7b7b7;
|
||||
background: #fff;
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
|
||||
background: -moz-linear-gradient(top, #fff, #ededed);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
|
||||
}
|
||||
/*time styling*/
|
||||
.time {
|
||||
position: relative;
|
||||
}
|
||||
.time input[type=range] {
|
||||
vertical-align: middle;
|
||||
}
|
||||
.time1, .time2 {
|
||||
width: 180px;
|
||||
padding: 0 5px;
|
||||
text-align: center;
|
||||
}
|
||||
.time1 {
|
||||
float: left;
|
||||
}
|
||||
.time2 {
|
||||
float: right;
|
||||
}
|
||||
.hour, .minute {
|
||||
text-align: right;
|
||||
}
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
@ -0,0 +1,645 @@
|
||||
/********************
|
||||
* SVG CSS
|
||||
*/
|
||||
|
||||
|
||||
svg {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
/* Trying to get SVG to act like a greedy block in all browsers */
|
||||
display: block;
|
||||
width:100%;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
/********************
|
||||
Default CSS for an svg element nvd3 used
|
||||
*/
|
||||
svg.nvd3-svg {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/********************
|
||||
Box shadow and border radius styling
|
||||
*/
|
||||
.nvtooltip.with-3d-shadow, .with-3d-shadow .nvtooltip {
|
||||
-moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
|
||||
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
|
||||
box-shadow: 0 5px 10px rgba(0,0,0,.2);
|
||||
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
/********************
|
||||
* TOOLTIP CSS
|
||||
*/
|
||||
|
||||
.nvtooltip {
|
||||
position: absolute;
|
||||
background-color: rgba(255,255,255,1.0);
|
||||
padding: 1px;
|
||||
border: 1px solid rgba(0,0,0,.2);
|
||||
z-index: 10000;
|
||||
|
||||
font-family: Arial;
|
||||
font-size: 13px;
|
||||
text-align: left;
|
||||
pointer-events: none;
|
||||
|
||||
white-space: nowrap;
|
||||
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/*Give tooltips that old fade in transition by
|
||||
putting a "with-transitions" class on the container div.
|
||||
*/
|
||||
.nvtooltip.with-transitions, .with-transitions .nvtooltip {
|
||||
transition: opacity 50ms linear;
|
||||
-moz-transition: opacity 50ms linear;
|
||||
-webkit-transition: opacity 50ms linear;
|
||||
|
||||
transition-delay: 200ms;
|
||||
-moz-transition-delay: 200ms;
|
||||
-webkit-transition-delay: 200ms;
|
||||
}
|
||||
|
||||
.nvtooltip.x-nvtooltip,
|
||||
.nvtooltip.y-nvtooltip {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.nvtooltip h3 {
|
||||
margin: 0;
|
||||
padding: 4px 14px;
|
||||
line-height: 18px;
|
||||
font-weight: normal;
|
||||
background-color: rgba(247,247,247,0.75);
|
||||
text-align: center;
|
||||
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
|
||||
-webkit-border-radius: 5px 5px 0 0;
|
||||
-moz-border-radius: 5px 5px 0 0;
|
||||
border-radius: 1px 5px 0 0;
|
||||
}
|
||||
|
||||
.nvtooltip p {
|
||||
margin: 0;
|
||||
padding: 5px 14px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nvtooltip span {
|
||||
display: inline-block;
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
.nvtooltip table {
|
||||
margin: 6px;
|
||||
border-spacing:0;
|
||||
}
|
||||
|
||||
|
||||
.nvtooltip table td {
|
||||
padding: 2px 9px 2px 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.nvtooltip table td.key {
|
||||
font-weight:normal;
|
||||
}
|
||||
.nvtooltip table td.value {
|
||||
text-align: right;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.nvtooltip table tr.highlight td {
|
||||
padding: 1px 9px 1px 0;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 1px;
|
||||
border-top-style: solid;
|
||||
border-top-width: 1px;
|
||||
}
|
||||
|
||||
.nvtooltip table td.legend-color-guide div {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.nvtooltip .footer {
|
||||
padding: 3px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nvtooltip-pending-removal {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.nvd3 text {
|
||||
font: normal 12px Arial;
|
||||
}
|
||||
|
||||
.nvd3 .title {
|
||||
font: bold 14px Arial;
|
||||
}
|
||||
|
||||
.nvd3 .nv-background {
|
||||
fill: white;
|
||||
fill-opacity: 0;
|
||||
}
|
||||
|
||||
.nvd3.nv-noData {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
/**********
|
||||
* Brush
|
||||
*/
|
||||
|
||||
.nv-brush .extent {
|
||||
fill-opacity: .125;
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
|
||||
|
||||
/**********
|
||||
* Legend
|
||||
*/
|
||||
|
||||
.nvd3 .nv-legend .nv-series {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nvd3 .nv-legend .nv-disabled circle {
|
||||
fill-opacity: 0;
|
||||
}
|
||||
|
||||
|
||||
/**********
|
||||
* Axes
|
||||
*/
|
||||
|
||||
.axis {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.axis.nv-disabled {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.nvd3 .nv-axis {
|
||||
pointer-events:none;
|
||||
}
|
||||
|
||||
.nvd3 .nv-axis path {
|
||||
fill: none;
|
||||
stroke: #000;
|
||||
stroke-opacity: .75;
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
|
||||
.nvd3 .nv-axis path.domain {
|
||||
stroke-opacity: .75;
|
||||
}
|
||||
|
||||
.nvd3 .nv-axis.nv-x path.domain {
|
||||
stroke-opacity: 0;
|
||||
}
|
||||
|
||||
.nvd3 .nv-axis line {
|
||||
fill: none;
|
||||
stroke: #e5e5e5;
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
|
||||
.nvd3 .nv-axis .zero line,
|
||||
/*this selector may not be necessary*/ .nvd3 .nv-axis line.zero {
|
||||
stroke-opacity: .75;
|
||||
}
|
||||
|
||||
.nvd3 .nv-axis .nv-axisMaxMin text {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.nvd3 .x .nv-axis .nv-axisMaxMin text,
|
||||
.nvd3 .x2 .nv-axis .nv-axisMaxMin text,
|
||||
.nvd3 .x3 .nv-axis .nv-axisMaxMin text {
|
||||
text-anchor: middle
|
||||
}
|
||||
|
||||
|
||||
/**********
|
||||
* Brush
|
||||
*/
|
||||
|
||||
.nv-brush .resize path {
|
||||
fill: #eee;
|
||||
stroke: #666;
|
||||
}
|
||||
|
||||
|
||||
/**********
|
||||
* Bars
|
||||
*/
|
||||
|
||||
.nvd3 .nv-bars .negative rect {
|
||||
zfill: brown;
|
||||
}
|
||||
|
||||
.nvd3 .nv-bars rect {
|
||||
zfill: steelblue;
|
||||
fill-opacity: .75;
|
||||
|
||||
transition: fill-opacity 250ms linear;
|
||||
-moz-transition: fill-opacity 250ms linear;
|
||||
-webkit-transition: fill-opacity 250ms linear;
|
||||
}
|
||||
|
||||
.nvd3 .nv-bars rect.hover {
|
||||
fill-opacity: 1;
|
||||
}
|
||||
|
||||
.nvd3 .nv-bars .hover rect {
|
||||
fill: lightblue;
|
||||
}
|
||||
|
||||
.nvd3 .nv-bars text {
|
||||
fill: rgba(0,0,0,0);
|
||||
}
|
||||
|
||||
.nvd3 .nv-bars .hover text {
|
||||
fill: rgba(0,0,0,1);
|
||||
}
|
||||
|
||||
|
||||
/**********
|
||||
* Bars
|
||||
*/
|
||||
|
||||
.nvd3 .nv-multibar .nv-groups rect,
|
||||
.nvd3 .nv-multibarHorizontal .nv-groups rect,
|
||||
.nvd3 .nv-discretebar .nv-groups rect {
|
||||
stroke-opacity: 0;
|
||||
|
||||
transition: fill-opacity 250ms linear;
|
||||
-moz-transition: fill-opacity 250ms linear;
|
||||
-webkit-transition: fill-opacity 250ms linear;
|
||||
}
|
||||
|
||||
.nvd3 .nv-multibar .nv-groups rect:hover,
|
||||
.nvd3 .nv-multibarHorizontal .nv-groups rect:hover,
|
||||
.nvd3 .nv-discretebar .nv-groups rect:hover {
|
||||
fill-opacity: 1;
|
||||
}
|
||||
|
||||
.nvd3 .nv-discretebar .nv-groups text,
|
||||
.nvd3 .nv-multibarHorizontal .nv-groups text {
|
||||
font-weight: bold;
|
||||
fill: rgba(0,0,0,1);
|
||||
stroke: rgba(0,0,0,0);
|
||||
}
|
||||
|
||||
/***********
|
||||
* Pie Chart
|
||||
*/
|
||||
|
||||
.nvd3.nv-pie path {
|
||||
stroke-opacity: 0;
|
||||
transition: fill-opacity 250ms linear, stroke-width 250ms linear, stroke-opacity 250ms linear;
|
||||
-moz-transition: fill-opacity 250ms linear, stroke-width 250ms linear, stroke-opacity 250ms linear;
|
||||
-webkit-transition: fill-opacity 250ms linear, stroke-width 250ms linear, stroke-opacity 250ms linear;
|
||||
|
||||
}
|
||||
|
||||
.nvd3.nv-pie .nv-pie-title {
|
||||
font-size: 24px;
|
||||
fill: rgba(19, 196, 249, 0.59);
|
||||
}
|
||||
|
||||
.nvd3.nv-pie .nv-slice text {
|
||||
stroke: #000;
|
||||
stroke-width: 0;
|
||||
}
|
||||
|
||||
.nvd3.nv-pie path {
|
||||
stroke: #fff;
|
||||
stroke-width: 1px;
|
||||
stroke-opacity: 1;
|
||||
}
|
||||
|
||||
.nvd3.nv-pie .hover path {
|
||||
fill-opacity: .7;
|
||||
}
|
||||
.nvd3.nv-pie .nv-label {
|
||||
pointer-events: none;
|
||||
}
|
||||
.nvd3.nv-pie .nv-label rect {
|
||||
fill-opacity: 0;
|
||||
stroke-opacity: 0;
|
||||
}
|
||||
|
||||
/**********
|
||||
* Lines
|
||||
*/
|
||||
|
||||
.nvd3 .nv-groups path.nv-line {
|
||||
fill: none;
|
||||
stroke-width: 1.5px;
|
||||
}
|
||||
|
||||
.nvd3 .nv-groups path.nv-line.nv-thin-line {
|
||||
stroke-width: 1px;
|
||||
}
|
||||
|
||||
|
||||
.nvd3 .nv-groups path.nv-area {
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
.nvd3 .nv-line.hover path {
|
||||
stroke-width: 6px;
|
||||
}
|
||||
|
||||
.nvd3.nv-line .nvd3.nv-scatter .nv-groups .nv-point {
|
||||
fill-opacity: 0;
|
||||
stroke-opacity: 0;
|
||||
}
|
||||
|
||||
.nvd3.nv-scatter.nv-single-point .nv-groups .nv-point {
|
||||
fill-opacity: .5 !important;
|
||||
stroke-opacity: .5 !important;
|
||||
}
|
||||
|
||||
|
||||
.with-transitions .nvd3 .nv-groups .nv-point {
|
||||
transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
|
||||
-moz-transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
|
||||
-webkit-transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
|
||||
|
||||
}
|
||||
|
||||
.nvd3.nv-scatter .nv-groups .nv-point.hover,
|
||||
.nvd3 .nv-groups .nv-point.hover {
|
||||
stroke-width: 7px;
|
||||
fill-opacity: .95 !important;
|
||||
stroke-opacity: .95 !important;
|
||||
}
|
||||
|
||||
|
||||
.nvd3 .nv-point-paths path {
|
||||
stroke: #aaa;
|
||||
stroke-opacity: 0;
|
||||
fill: #eee;
|
||||
fill-opacity: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.nvd3 .nv-indexLine {
|
||||
cursor: ew-resize;
|
||||
}
|
||||
|
||||
|
||||
/**********
|
||||
* Distribution
|
||||
*/
|
||||
|
||||
.nvd3 .nv-distribution {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
/**********
|
||||
* Scatter
|
||||
*/
|
||||
|
||||
.nvd3 .nv-groups .nv-point.hover {
|
||||
stroke-width: 20px;
|
||||
stroke-opacity: .5;
|
||||
}
|
||||
|
||||
.nvd3 .nv-scatter .nv-point.hover {
|
||||
fill-opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
/**********
|
||||
* Stacked Area
|
||||
*/
|
||||
|
||||
.nvd3.nv-stackedarea path.nv-area {
|
||||
fill-opacity: .7;
|
||||
stroke-opacity: 0;
|
||||
transition: fill-opacity 250ms linear, stroke-opacity 250ms linear;
|
||||
-moz-transition: fill-opacity 250ms linear, stroke-opacity 250ms linear;
|
||||
-webkit-transition: fill-opacity 250ms linear, stroke-opacity 250ms linear;
|
||||
}
|
||||
|
||||
.nvd3.nv-stackedarea path.nv-area.hover {
|
||||
fill-opacity: .9;
|
||||
}
|
||||
|
||||
|
||||
.nvd3.nv-stackedarea .nv-groups .nv-point {
|
||||
stroke-opacity: 0;
|
||||
fill-opacity: 0;
|
||||
}
|
||||
|
||||
|
||||
/**********
|
||||
* Line Plus Bar
|
||||
*/
|
||||
|
||||
.nvd3.nv-linePlusBar .nv-bar rect {
|
||||
fill-opacity: .75;
|
||||
}
|
||||
|
||||
.nvd3.nv-linePlusBar .nv-bar rect:hover {
|
||||
fill-opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
/**********
|
||||
* Bullet
|
||||
*/
|
||||
|
||||
.nvd3.nv-bullet { font: 10px sans-serif; }
|
||||
.nvd3.nv-bullet .nv-measure { fill-opacity: .8; }
|
||||
.nvd3.nv-bullet .nv-measure:hover { fill-opacity: 1; }
|
||||
.nvd3.nv-bullet .nv-marker { stroke: #000; stroke-width: 2px; }
|
||||
.nvd3.nv-bullet .nv-markerTriangle { stroke: #000; fill: #fff; stroke-width: 1.5px; }
|
||||
.nvd3.nv-bullet .nv-tick line { stroke: #666; stroke-width: .5px; }
|
||||
.nvd3.nv-bullet .nv-range.nv-s0 { fill: #eee; }
|
||||
.nvd3.nv-bullet .nv-range.nv-s1 { fill: #ddd; }
|
||||
.nvd3.nv-bullet .nv-range.nv-s2 { fill: #ccc; }
|
||||
.nvd3.nv-bullet .nv-title { font-size: 14px; font-weight: bold; }
|
||||
.nvd3.nv-bullet .nv-subtitle { fill: #999; }
|
||||
|
||||
|
||||
.nvd3.nv-bullet .nv-range {
|
||||
fill: #bababa;
|
||||
fill-opacity: .4;
|
||||
}
|
||||
.nvd3.nv-bullet .nv-range:hover {
|
||||
fill-opacity: .7;
|
||||
}
|
||||
|
||||
|
||||
/**********
|
||||
* Sparkline
|
||||
*/
|
||||
|
||||
.nvd3.nv-sparkline path {
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.nvd3.nv-sparklineplus g.nv-hoverValue {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.nvd3.nv-sparklineplus .nv-hoverValue line {
|
||||
stroke: #333;
|
||||
stroke-width: 1.5px;
|
||||
}
|
||||
|
||||
.nvd3.nv-sparklineplus,
|
||||
.nvd3.nv-sparklineplus g {
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.nvd3 .nv-hoverArea {
|
||||
fill-opacity: 0;
|
||||
stroke-opacity: 0;
|
||||
}
|
||||
|
||||
.nvd3.nv-sparklineplus .nv-xValue,
|
||||
.nvd3.nv-sparklineplus .nv-yValue {
|
||||
stroke-width: 0;
|
||||
font-size: .9em;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.nvd3.nv-sparklineplus .nv-yValue {
|
||||
stroke: #f66;
|
||||
}
|
||||
|
||||
.nvd3.nv-sparklineplus .nv-maxValue {
|
||||
stroke: #2ca02c;
|
||||
fill: #2ca02c;
|
||||
}
|
||||
|
||||
.nvd3.nv-sparklineplus .nv-minValue {
|
||||
stroke: #d62728;
|
||||
fill: #d62728;
|
||||
}
|
||||
|
||||
.nvd3.nv-sparklineplus .nv-currentValue {
|
||||
font-weight: bold;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
/**********
|
||||
* historical stock
|
||||
*/
|
||||
|
||||
.nvd3.nv-ohlcBar .nv-ticks .nv-tick {
|
||||
stroke-width: 1px;
|
||||
}
|
||||
|
||||
.nvd3.nv-ohlcBar .nv-ticks .nv-tick.hover {
|
||||
stroke-width: 2px;
|
||||
}
|
||||
|
||||
.nvd3.nv-ohlcBar .nv-ticks .nv-tick.positive {
|
||||
stroke: #2ca02c;
|
||||
}
|
||||
|
||||
.nvd3.nv-ohlcBar .nv-ticks .nv-tick.negative {
|
||||
stroke: #d62728;
|
||||
}
|
||||
|
||||
.nvd3.nv-historicalStockChart .nv-axis .nv-axislabel {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.nvd3.nv-historicalStockChart .nv-dragTarget {
|
||||
fill-opacity: 0;
|
||||
stroke: none;
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.nvd3 .nv-brush .extent {
|
||||
fill-opacity: 0 !important;
|
||||
}
|
||||
|
||||
.nvd3 .nv-brushBackground rect {
|
||||
stroke: #000;
|
||||
stroke-width: .4;
|
||||
fill: #fff;
|
||||
fill-opacity: .7;
|
||||
}
|
||||
|
||||
|
||||
/**********
|
||||
* Parallel Coordinates
|
||||
*/
|
||||
|
||||
.nvd3 .background path {
|
||||
fill: none;
|
||||
stroke: #EEE;
|
||||
stroke-opacity: .4;
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
|
||||
.nvd3 .foreground path {
|
||||
fill: none;
|
||||
stroke-opacity: .7;
|
||||
}
|
||||
|
||||
.nvd3 .brush .extent {
|
||||
fill-opacity: .3;
|
||||
stroke: #fff;
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
|
||||
.nvd3 .axis line, .axis path {
|
||||
fill: none;
|
||||
stroke: #000;
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
|
||||
.nvd3 .axis text {
|
||||
text-shadow: 0 1px 0 #fff;
|
||||
}
|
||||
|
||||
/****
|
||||
Interactive Layer
|
||||
*/
|
||||
.nvd3 .nv-interactiveGuideLine {
|
||||
pointer-events:none;
|
||||
}
|
||||
.nvd3 line.nv-guideline {
|
||||
stroke: #ccc;
|
||||
}
|
||||
|
After Width: | Height: | Size: 516 B |
|
After Width: | Height: | Size: 451 B |
|
After Width: | Height: | Size: 650 B |
|
After Width: | Height: | Size: 373 B |
@ -0,0 +1,10 @@
|
||||
function changeImage() {
|
||||
var image = document.getElementById('myImage');
|
||||
if (image.src.match("bulb-on")) {
|
||||
|
||||
image.src = "/iot/public/mydevice/images/bulb-off.png";
|
||||
} else {
|
||||
|
||||
image.src = "/iot/public/mydevice/images/bulb-on.png";
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,74 @@
|
||||
|
||||
// Wrapping in nv.addGraph allows for '0 timeout render', stores rendered charts in nv.graphs,
|
||||
// and may do more in the future... it's NOT required
|
||||
nv.addGraph(function() {
|
||||
var chart = nv.models.cumulativeLineChart()
|
||||
.useInteractiveGuideline(true)
|
||||
.x(function(d) { return d[0] })
|
||||
.y(function(d) { return d[1]/100 })
|
||||
.height(function(d){ return 500;})
|
||||
.color(d3.scale.category10().range())
|
||||
.average(function(d) { return d.mean/100; })
|
||||
.duration(300)
|
||||
.clipVoronoi(false);
|
||||
chart.dispatch.on('renderEnd', function() {
|
||||
console.log('render complete: cumulative line with guide line');
|
||||
});
|
||||
|
||||
chart.xAxis.tickFormat(function(d) {
|
||||
return d3.time.format('%m/%d/%y')(new Date(d))
|
||||
});
|
||||
|
||||
chart.yAxis.tickFormat(d3.format(',.1%'));
|
||||
|
||||
d3.select('.chart1 svg')
|
||||
.datum(cumulativeTestData())
|
||||
.call(chart);
|
||||
|
||||
//TODO: Figure out a good way to do this automatically
|
||||
nv.utils.windowResize(chart.update);
|
||||
|
||||
chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });
|
||||
chart.state.dispatch.on('change', function(state){
|
||||
nv.log('state', JSON.stringify(state));
|
||||
});
|
||||
|
||||
return chart;
|
||||
});
|
||||
|
||||
function flatTestData() {
|
||||
return [{
|
||||
key: "Snakes",
|
||||
values: [0,1,2,3,4,5,6,7,8,9].map(function(d) {
|
||||
var currentDate = new Date();
|
||||
currentDate.setDate(currentDate.getDate() + d);
|
||||
return [currentDate, 0]
|
||||
})
|
||||
}];
|
||||
}
|
||||
|
||||
function cumulativeTestData() {
|
||||
return [
|
||||
{
|
||||
key: "Long",
|
||||
values: [ [ 1083297600000 , -2.974623048543] , [ 1085976000000 , -1.7740300785979] , [ 1088568000000 , 4.4681318138177] , [ 1091246400000 , 7.0242541001353] , [ 1093924800000 , 7.5709603667586] , [ 1096516800000 , 20.612245065736] , [ 1099195200000 , 21.698065237316] , [ 1101790800000 , 40.501189458018] , [ 1104469200000 , 50.464679413194] , [ 1107147600000 , 48.917421973355] , [ 1109566800000 , 63.750936549160] , [ 1112245200000 , 59.072499126460] , [ 1114833600000 , 43.373158880492] , [ 1117512000000 , 54.490918947556] , [ 1120104000000 , 56.661178852079] , [ 1122782400000 , 73.450103545496] , [ 1125460800000 , 71.714526354907] , [ 1128052800000 , 85.221664349607] , [ 1130734800000 , 77.769261392481] , [ 1133326800000 , 95.966528716500] , [ 1136005200000 , 107.59132116397] , [ 1138683600000 , 127.25740096723] , [ 1141102800000 , 122.13917498830] , [ 1143781200000 , 126.53657279774] , [ 1146369600000 , 132.39300992970] , [ 1149048000000 , 120.11238242904] , [ 1151640000000 , 118.41408917750] , [ 1154318400000 , 107.92918924621] , [ 1156996800000 , 110.28057249569] , [ 1159588800000 , 117.20485334692] , [ 1162270800000 , 141.33556756948] , [ 1164862800000 , 159.59452727893] , [ 1167541200000 , 167.09801853304] , [ 1170219600000 , 185.46849659215] , [ 1172638800000 , 184.82474099990] , [ 1175313600000 , 195.63155213887] , [ 1177905600000 , 207.40597044171] , [ 1180584000000 , 230.55966698196] , [ 1183176000000 , 239.55649035292] , [ 1185854400000 , 241.35915085208] , [ 1188532800000 , 239.89428956243] , [ 1191124800000 , 260.47781917715] , [ 1193803200000 , 276.39457482225] , [ 1196398800000 , 258.66530682672] , [ 1199077200000 , 250.98846121893] , [ 1201755600000 , 226.89902618127] , [ 1204261200000 , 227.29009273807] , [ 1206936000000 , 218.66476654350] , [ 1209528000000 , 232.46605902918] , [ 1212206400000 , 253.25667081117] , [ 1214798400000 , 235.82505363925] , [ 1217476800000 , 229.70112774254] , [ 1220155200000 , 225.18472705952] , [ 1222747200000 , 189.13661746552] , [ 1225425600000 , 149.46533007301] , [ 1228021200000 , 131.00340772114] , [ 1230699600000 , 135.18341728866] , [ 1233378000000 , 109.15296887173] , [ 1235797200000 , 84.614772549760] , [ 1238472000000 , 100.60810015326] , [ 1241064000000 , 141.50134895610] , [ 1243742400000 , 142.50405083675] , [ 1246334400000 , 139.81192372672] , [ 1249012800000 , 177.78205544583] , [ 1251691200000 , 194.73691933074] , [ 1254283200000 , 209.00838460225] , [ 1256961600000 , 198.19855877420] , [ 1259557200000 , 222.37102417812] , [ 1262235600000 , 234.24581081250] , [ 1264914000000 , 228.26087689346] , [ 1267333200000 , 248.81895126250] , [ 1270008000000 , 270.57301075186] , [ 1272600000000 , 292.64604322550] , [ 1275278400000 , 265.94088520518] , [ 1277870400000 , 237.82887467569] , [ 1280548800000 , 265.55973314204] , [ 1283227200000 , 248.30877330928] , [ 1285819200000 , 278.14870066912] , [ 1288497600000 , 292.69260960288] , [ 1291093200000 , 300.84263809599] , [ 1293771600000 , 326.17253914628] , [ 1296450000000 , 337.69335966505] , [ 1298869200000 , 339.73260965121] , [ 1301544000000 , 346.87865120765] , [ 1304136000000 , 347.92991526628] , [ 1306814400000 , 342.04627502669] , [ 1309406400000 , 333.45386231233] , [ 1312084800000 , 323.15034181243] , [ 1314763200000 , 295.66126882331] , [ 1317355200000 , 251.48014579253] , [ 1320033600000 , 295.15424257905] , [ 1322629200000 , 294.54766764397] , [ 1325307600000 , 295.72906119051] , [ 1327986000000 , 325.73351347613] , [ 1330491600000 , 340.16106061186] , [ 1333166400000 , 345.15514071490] , [ 1335758400000 , 337.10259395679] , [ 1338436800000 , 318.68216333837] , [ 1341028800000 , 317.03683945246] , [ 1343707200000 , 318.53549659997] , [ 1346385600000 , 332.85381464104] , [ 1348977600000 , 337.36534373477] , [ 1351656000000 , 350.27872156161] , [ 1354251600000 , 349.45128876100]]
|
||||
,
|
||||
mean: 250
|
||||
},
|
||||
{
|
||||
key: "Short",
|
||||
values: [ [ 1083297600000 , -0.77078283705125] , [ 1085976000000 , -1.8356366650335] , [ 1088568000000 , -5.3121322073127] , [ 1091246400000 , -4.9320975829662] , [ 1093924800000 , -3.9835408823225] , [ 1096516800000 , -6.8694685316805] , [ 1099195200000 , -8.4854877428545] , [ 1101790800000 , -15.933627197384] , [ 1104469200000 , -15.920980069544] , [ 1107147600000 , -12.478685045651] , [ 1109566800000 , -17.297761889305] , [ 1112245200000 , -15.247129891020] , [ 1114833600000 , -11.336459046839] , [ 1117512000000 , -13.298990907415] , [ 1120104000000 , -16.360027000056] , [ 1122782400000 , -18.527929522030] , [ 1125460800000 , -22.176516738685] , [ 1128052800000 , -23.309665368330] , [ 1130734800000 , -21.629973409748] , [ 1133326800000 , -24.186429093486] , [ 1136005200000 , -29.116707312531] , [ 1138683600000 , -37.188037874864] , [ 1141102800000 , -34.689264821198] , [ 1143781200000 , -39.505932105359] , [ 1146369600000 , -45.339572492759] , [ 1149048000000 , -43.849353192764] , [ 1151640000000 , -45.418353922571] , [ 1154318400000 , -44.579281059919] , [ 1156996800000 , -44.027098363370] , [ 1159588800000 , -41.261306759439] , [ 1162270800000 , -47.446018534027] , [ 1164862800000 , -53.413782948909] , [ 1167541200000 , -50.700723647419] , [ 1170219600000 , -56.374090913296] , [ 1172638800000 , -61.754245220322] , [ 1175313600000 , -66.246241587629] , [ 1177905600000 , -75.351650899999] , [ 1180584000000 , -81.699058262032] , [ 1183176000000 , -82.487023368081] , [ 1185854400000 , -86.230055113277] , [ 1188532800000 , -84.746914818507] , [ 1191124800000 , -100.77134971977] , [ 1193803200000 , -109.95435565947] , [ 1196398800000 , -99.605672965057] , [ 1199077200000 , -99.607249394382] , [ 1201755600000 , -94.874614950188] , [ 1204261200000 , -105.35899063105] , [ 1206936000000 , -106.01931193802] , [ 1209528000000 , -110.28883571771] , [ 1212206400000 , -119.60256203030] , [ 1214798400000 , -115.62201315802] , [ 1217476800000 , -106.63824185202] , [ 1220155200000 , -99.848746318951] , [ 1222747200000 , -85.631219602987] , [ 1225425600000 , -63.547909262067] , [ 1228021200000 , -59.753275364457] , [ 1230699600000 , -63.874977883542] , [ 1233378000000 , -56.865697387488] , [ 1235797200000 , -54.285579501988] , [ 1238472000000 , -56.474659581885] , [ 1241064000000 , -63.847137745644] , [ 1243742400000 , -68.754247867325] , [ 1246334400000 , -69.474257009155] , [ 1249012800000 , -75.084828197067] , [ 1251691200000 , -77.101028237237] , [ 1254283200000 , -80.454866854387] , [ 1256961600000 , -78.984349952220] , [ 1259557200000 , -83.041230807854] , [ 1262235600000 , -84.529748348935] , [ 1264914000000 , -83.837470195508] , [ 1267333200000 , -87.174487671969] , [ 1270008000000 , -90.342293007487] , [ 1272600000000 , -93.550928464991] , [ 1275278400000 , -85.833102140765] , [ 1277870400000 , -79.326501831592] , [ 1280548800000 , -87.986196903537] , [ 1283227200000 , -85.397862121771] , [ 1285819200000 , -94.738167050020] , [ 1288497600000 , -98.661952897151] , [ 1291093200000 , -99.609665952708] , [ 1293771600000 , -103.57099836183] , [ 1296450000000 , -104.04353411322] , [ 1298869200000 , -108.21382792587] , [ 1301544000000 , -108.74006900920] , [ 1304136000000 , -112.07766650960] , [ 1306814400000 , -109.63328199118] , [ 1309406400000 , -106.53578966772] , [ 1312084800000 , -103.16480871469] , [ 1314763200000 , -95.945078001828] , [ 1317355200000 , -81.226687340874] , [ 1320033600000 , -90.782206596168] , [ 1322629200000 , -89.484445370113] , [ 1325307600000 , -88.514723135326] , [ 1327986000000 , -93.381292724320] , [ 1330491600000 , -97.529705609172] , [ 1333166400000 , -99.520481439189] , [ 1335758400000 , -99.430184898669] , [ 1338436800000 , -93.349934521973] , [ 1341028800000 , -95.858475286491] , [ 1343707200000 , -95.522755836605] , [ 1346385600000 , -98.503848862036] , [ 1348977600000 , -101.49415251896] , [ 1351656000000 , -101.50099325672] , [ 1354251600000 , -99.487094927489]]
|
||||
,
|
||||
mean: -60
|
||||
},
|
||||
{
|
||||
key: "Gross",
|
||||
mean: 125,
|
||||
values: [ [ 1083297600000 , -3.7454058855943] , [ 1085976000000 , -3.6096667436314] , [ 1088568000000 , -0.8440003934950] , [ 1091246400000 , 2.0921565171691] , [ 1093924800000 , 3.5874194844361] , [ 1096516800000 , 13.742776534056] , [ 1099195200000 , 13.212577494462] , [ 1101790800000 , 24.567562260634] , [ 1104469200000 , 34.543699343650] , [ 1107147600000 , 36.438736927704] , [ 1109566800000 , 46.453174659855] , [ 1112245200000 , 43.825369235440] , [ 1114833600000 , 32.036699833653] , [ 1117512000000 , 41.191928040141] , [ 1120104000000 , 40.301151852023] , [ 1122782400000 , 54.922174023466] , [ 1125460800000 , 49.538009616222] , [ 1128052800000 , 61.911998981277] , [ 1130734800000 , 56.139287982733] , [ 1133326800000 , 71.780099623014] , [ 1136005200000 , 78.474613851439] , [ 1138683600000 , 90.069363092366] , [ 1141102800000 , 87.449910167102] , [ 1143781200000 , 87.030640692381] , [ 1146369600000 , 87.053437436941] , [ 1149048000000 , 76.263029236276] , [ 1151640000000 , 72.995735254929] , [ 1154318400000 , 63.349908186291] , [ 1156996800000 , 66.253474132320] , [ 1159588800000 , 75.943546587481] , [ 1162270800000 , 93.889549035453] , [ 1164862800000 , 106.18074433002] , [ 1167541200000 , 116.39729488562] , [ 1170219600000 , 129.09440567885] , [ 1172638800000 , 123.07049577958] , [ 1175313600000 , 129.38531055124] , [ 1177905600000 , 132.05431954171] , [ 1180584000000 , 148.86060871993] , [ 1183176000000 , 157.06946698484] , [ 1185854400000 , 155.12909573880] , [ 1188532800000 , 155.14737474392] , [ 1191124800000 , 159.70646945738] , [ 1193803200000 , 166.44021916278] , [ 1196398800000 , 159.05963386166] , [ 1199077200000 , 151.38121182455] , [ 1201755600000 , 132.02441123108] , [ 1204261200000 , 121.93110210702] , [ 1206936000000 , 112.64545460548] , [ 1209528000000 , 122.17722331147] , [ 1212206400000 , 133.65410878087] , [ 1214798400000 , 120.20304048123] , [ 1217476800000 , 123.06288589052] , [ 1220155200000 , 125.33598074057] , [ 1222747200000 , 103.50539786253] , [ 1225425600000 , 85.917420810943] , [ 1228021200000 , 71.250132356683] , [ 1230699600000 , 71.308439405118] , [ 1233378000000 , 52.287271484242] , [ 1235797200000 , 30.329193047772] , [ 1238472000000 , 44.133440571375] , [ 1241064000000 , 77.654211210456] , [ 1243742400000 , 73.749802969425] , [ 1246334400000 , 70.337666717565] , [ 1249012800000 , 102.69722724876] , [ 1251691200000 , 117.63589109350] , [ 1254283200000 , 128.55351774786] , [ 1256961600000 , 119.21420882198] , [ 1259557200000 , 139.32979337027] , [ 1262235600000 , 149.71606246357] , [ 1264914000000 , 144.42340669795] , [ 1267333200000 , 161.64446359053] , [ 1270008000000 , 180.23071774437] , [ 1272600000000 , 199.09511476051] , [ 1275278400000 , 180.10778306442] , [ 1277870400000 , 158.50237284410] , [ 1280548800000 , 177.57353623850] , [ 1283227200000 , 162.91091118751] , [ 1285819200000 , 183.41053361910] , [ 1288497600000 , 194.03065670573] , [ 1291093200000 , 201.23297214328] , [ 1293771600000 , 222.60154078445] , [ 1296450000000 , 233.35556801977] , [ 1298869200000 , 231.22452435045] , [ 1301544000000 , 237.84432503045] , [ 1304136000000 , 235.55799131184] , [ 1306814400000 , 232.11873570751] , [ 1309406400000 , 226.62381538123] , [ 1312084800000 , 219.34811113539] , [ 1314763200000 , 198.69242285581] , [ 1317355200000 , 168.90235629066] , [ 1320033600000 , 202.64725756733] , [ 1322629200000 , 203.05389378105] , [ 1325307600000 , 204.85986680865] , [ 1327986000000 , 229.77085616585] , [ 1330491600000 , 239.65202435959] , [ 1333166400000 , 242.33012622734] , [ 1335758400000 , 234.11773262149] , [ 1338436800000 , 221.47846307887] , [ 1341028800000 , 216.98308827912] , [ 1343707200000 , 218.37781386755] , [ 1346385600000 , 229.39368622736] , [ 1348977600000 , 230.54656412916] , [ 1351656000000 , 243.06087025523] , [ 1354251600000 , 244.24733578385]]
|
||||
},
|
||||
{
|
||||
key: "S&P 1500",
|
||||
values: [ [ 1083297600000 , -1.7798428181819] , [ 1085976000000 , -0.36883324836999] , [ 1088568000000 , 1.7312581046040] , [ 1091246400000 , -1.8356125950460] , [ 1093924800000 , -1.5396564170877] , [ 1096516800000 , -0.16867791409247] , [ 1099195200000 , 1.3754263993413] , [ 1101790800000 , 5.8171640898041] , [ 1104469200000 , 9.4350145241608] , [ 1107147600000 , 6.7649081510160] , [ 1109566800000 , 9.1568499314776] , [ 1112245200000 , 7.2485090994419] , [ 1114833600000 , 4.8762222306595] , [ 1117512000000 , 8.5992339354652] , [ 1120104000000 , 9.0896517982086] , [ 1122782400000 , 13.394644048577] , [ 1125460800000 , 12.311842010760] , [ 1128052800000 , 13.221003650717] , [ 1130734800000 , 11.218481009206] , [ 1133326800000 , 15.565352598445] , [ 1136005200000 , 15.623703865926] , [ 1138683600000 , 19.275255326383] , [ 1141102800000 , 19.432433717836] , [ 1143781200000 , 21.232881244655] , [ 1146369600000 , 22.798299192958] , [ 1149048000000 , 19.006125095476] , [ 1151640000000 , 19.151889158536] , [ 1154318400000 , 19.340022855452] , [ 1156996800000 , 22.027934841859] , [ 1159588800000 , 24.903300681329] , [ 1162270800000 , 29.146492833877] , [ 1164862800000 , 31.781626082589] , [ 1167541200000 , 33.358770738428] , [ 1170219600000 , 35.622684613497] , [ 1172638800000 , 33.332821711366] , [ 1175313600000 , 34.878748635832] , [ 1177905600000 , 40.582332613844] , [ 1180584000000 , 45.719535502920] , [ 1183176000000 , 43.239344722386] , [ 1185854400000 , 38.550955100342] , [ 1188532800000 , 40.585368816283] , [ 1191124800000 , 45.601374057981] , [ 1193803200000 , 48.051404337892] , [ 1196398800000 , 41.582581696032] , [ 1199077200000 , 40.650580792748] , [ 1201755600000 , 32.252222066493] , [ 1204261200000 , 28.106390258553] , [ 1206936000000 , 27.532698196687] , [ 1209528000000 , 33.986390463852] , [ 1212206400000 , 36.302660526438] , [ 1214798400000 , 25.015574480172] , [ 1217476800000 , 23.989494069029] , [ 1220155200000 , 25.934351445531] , [ 1222747200000 , 14.627592011699] , [ 1225425600000 , -5.2249403809749] , [ 1228021200000 , -12.330933408050] , [ 1230699600000 , -11.000291508188] , [ 1233378000000 , -18.563864948088] , [ 1235797200000 , -27.213097001687] , [ 1238472000000 , -20.834133840523] , [ 1241064000000 , -12.717886701719] , [ 1243742400000 , -8.1644613083526] , [ 1246334400000 , -7.9108408918201] , [ 1249012800000 , -0.77002391591209] , [ 1251691200000 , 2.8243816569672] , [ 1254283200000 , 6.8761411421070] , [ 1256961600000 , 4.5060912230294] , [ 1259557200000 , 10.487179794349] , [ 1262235600000 , 13.251375597594] , [ 1264914000000 , 9.2207594803415] , [ 1267333200000 , 12.836276936538] , [ 1270008000000 , 19.816793904978] , [ 1272600000000 , 22.156787167211] , [ 1275278400000 , 12.518039090576] , [ 1277870400000 , 6.4253587440854] , [ 1280548800000 , 13.847372028409] , [ 1283227200000 , 8.5454736090364] , [ 1285819200000 , 18.542801953304] , [ 1288497600000 , 23.037064683183] , [ 1291093200000 , 23.517422401888] , [ 1293771600000 , 31.804723416068] , [ 1296450000000 , 34.778247386072] , [ 1298869200000 , 39.584883855230] , [ 1301544000000 , 40.080647664875] , [ 1304136000000 , 44.180050667889] , [ 1306814400000 , 42.533535927221] , [ 1309406400000 , 40.105374449011] , [ 1312084800000 , 37.014659267156] , [ 1314763200000 , 29.263745084262] , [ 1317355200000 , 19.637463417584] , [ 1320033600000 , 33.157645345770] , [ 1322629200000 , 32.895053150988] , [ 1325307600000 , 34.111544824647] , [ 1327986000000 , 40.453985817473] , [ 1330491600000 , 46.435700783313] , [ 1333166400000 , 51.062385488671] , [ 1335758400000 , 50.130448220658] , [ 1338436800000 , 41.035476682018] , [ 1341028800000 , 46.591932296457] , [ 1343707200000 , 48.349391180634] , [ 1346385600000 , 51.913011286919] , [ 1348977600000 , 55.747238313752] , [ 1351656000000 , 52.991824077209] , [ 1354251600000 , 49.556311883284]]
|
||||
}
|
||||
];
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,3 @@
|
||||
/**
|
||||
* Created by Sharon on 5/21/2015.
|
||||
*/
|
||||
@ -0,0 +1,65 @@
|
||||
|
||||
historicalBarChart = [
|
||||
{
|
||||
key: "Cumulative Return",
|
||||
values: [
|
||||
{
|
||||
"label" : "A" ,
|
||||
"value" : 1
|
||||
} ,
|
||||
{
|
||||
"label" : "B" ,
|
||||
"value" : 0
|
||||
} ,
|
||||
{
|
||||
"label" : "C" ,
|
||||
"value" : 1
|
||||
} ,
|
||||
{
|
||||
"label" : "D" ,
|
||||
"value" : 1
|
||||
} ,
|
||||
{
|
||||
"label" : "E" ,
|
||||
"value" : 1
|
||||
} ,
|
||||
{
|
||||
"label" : "F" ,
|
||||
"value" : 1
|
||||
} ,
|
||||
{
|
||||
"label" : "G" ,
|
||||
"value" : 0
|
||||
} ,
|
||||
{
|
||||
"label" : "H" ,
|
||||
"value" : 1
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
nv.addGraph(function() {
|
||||
|
||||
var chart = nv.models.discreteBarChart()
|
||||
.x(function(d) { return d.label })
|
||||
.y(function(d) { return d.value })
|
||||
.height(300)
|
||||
.staggerLabels(true)
|
||||
//.staggerLabels(historicalBarChart[0].values.length > 8)
|
||||
.tooltips(false)
|
||||
.showValues(true)
|
||||
.duration(250)
|
||||
.color(['#5799c7'])
|
||||
|
||||
//.xRange([0,500])
|
||||
;
|
||||
|
||||
d3.select('.chart2 svg')
|
||||
.datum(historicalBarChart)
|
||||
.call(chart);
|
||||
|
||||
nv.utils.windowResize(chart.update);
|
||||
return chart;
|
||||
|
||||
});
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,65 @@
|
||||
|
||||
historicalBarChart = [
|
||||
{
|
||||
key: "Cumulative Return",
|
||||
values: [
|
||||
{
|
||||
"label" : "A" ,
|
||||
"value" : 1
|
||||
} ,
|
||||
{
|
||||
"label" : "B" ,
|
||||
"value" : 0
|
||||
} ,
|
||||
{
|
||||
"label" : "C" ,
|
||||
"value" : 1
|
||||
} ,
|
||||
{
|
||||
"label" : "D" ,
|
||||
"value" : 1
|
||||
} ,
|
||||
{
|
||||
"label" : "E" ,
|
||||
"value" : 0
|
||||
} ,
|
||||
{
|
||||
"label" : "F" ,
|
||||
"value" : 1
|
||||
} ,
|
||||
{
|
||||
"label" : "G" ,
|
||||
"value" : 1
|
||||
} ,
|
||||
{
|
||||
"label" : "H" ,
|
||||
"value" : 1
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
nv.addGraph(function() {
|
||||
|
||||
var chart = nv.models.discreteBarChart()
|
||||
.x(function(d) { return d.label })
|
||||
.y(function(d) { return d.value })
|
||||
.height(300)
|
||||
.staggerLabels(true)
|
||||
//.staggerLabels(historicalBarChart[0].values.length > 8)
|
||||
.tooltips(false)
|
||||
.showValues(true)
|
||||
.duration(250)
|
||||
.color(['#5799c7'])
|
||||
|
||||
//.xRange([0,500])
|
||||
;
|
||||
|
||||
d3.select('.chart3 svg')
|
||||
.datum(historicalBarChart)
|
||||
.call(chart);
|
||||
|
||||
nv.utils.windowResize(chart.update);
|
||||
return chart;
|
||||
|
||||
});
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,35 @@
|
||||
|
||||
/* Inspired by Lee Byron's test data generator. */
|
||||
function stream_layers(n, m, o) {
|
||||
if (arguments.length < 3) o = 0;
|
||||
function bump(a) {
|
||||
var x = 1 / (.1 + Math.random()),
|
||||
y = 2 * Math.random() - .5,
|
||||
z = 10 / (.1 + Math.random());
|
||||
for (var i = 0; i < m; i++) {
|
||||
var w = (i / m - y) * z;
|
||||
a[i] += x * Math.exp(-w * w);
|
||||
}
|
||||
}
|
||||
return d3.range(n).map(function() {
|
||||
var a = [], i;
|
||||
for (i = 0; i < m; i++) a[i] = o + o * Math.random();
|
||||
for (i = 0; i < 5; i++) bump(a);
|
||||
return a.map(stream_index);
|
||||
});
|
||||
}
|
||||
|
||||
/* Another layer generator using gamma distributions. */
|
||||
function stream_waves(n, m) {
|
||||
return d3.range(n).map(function(i) {
|
||||
return d3.range(m).map(function(j) {
|
||||
var x = 20 * j / m - i / 3;
|
||||
return 2 * x * Math.exp(-.5 * x);
|
||||
}).map(stream_index);
|
||||
});
|
||||
}
|
||||
|
||||
function stream_index(d, i) {
|
||||
return {x: i, y: Math.max(0, d)};
|
||||
}
|
||||
|
||||
|
Before Width: | Height: | Size: 9.6 KiB After Width: | Height: | Size: 9.6 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
Before Width: | Height: | Size: 7.8 KiB After Width: | Height: | Size: 7.8 KiB |
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 17 KiB |
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
|
Before Width: | Height: | Size: 4.9 KiB After Width: | Height: | Size: 4.9 KiB |
|
Before Width: | Height: | Size: 56 KiB After Width: | Height: | Size: 56 KiB |
|
Before Width: | Height: | Size: 59 KiB After Width: | Height: | Size: 59 KiB |
|
Before Width: | Height: | Size: 57 KiB After Width: | Height: | Size: 57 KiB |
|
Before Width: | Height: | Size: 60 KiB After Width: | Height: | Size: 60 KiB |
|
Before Width: | Height: | Size: 61 KiB After Width: | Height: | Size: 61 KiB |
|
Before Width: | Height: | Size: 55 KiB After Width: | Height: | Size: 55 KiB |
|
Before Width: | Height: | Size: 61 KiB After Width: | Height: | Size: 61 KiB |
|
Before Width: | Height: | Size: 57 KiB After Width: | Height: | Size: 57 KiB |
|
Before Width: | Height: | Size: 56 KiB After Width: | Height: | Size: 56 KiB |
|
Before Width: | Height: | Size: 61 KiB After Width: | Height: | Size: 61 KiB |
|
Before Width: | Height: | Size: 137 KiB After Width: | Height: | Size: 137 KiB |
|
Before Width: | Height: | Size: 62 KiB After Width: | Height: | Size: 62 KiB |
|
Before Width: | Height: | Size: 29 KiB After Width: | Height: | Size: 29 KiB |
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue