blob42
/
nvd3
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Added more examples to sparklinePlus; added gradient to examples/index.html

Browse Source
master
Robin Hu 11 years ago
parent 4f8dfc6002
commit 4be1306d80
2 changed files with 59 additions and 24 deletions
Show Stats Download Patch File Download Diff File

17
examples/index.html
Unescape Escape View File

@ -5,6 +5,23 @@
<style>
body {
font-family: Helvetica;
/* IE10 Consumer Preview */
background-image: -ms-radial-gradient(left top, circle farthest-corner, #FFFFFF 0%, #DEE2FF 100%);
/* Mozilla Firefox */
background-image: -moz-radial-gradient(left top, circle farthest-corner, #FFFFFF 0%, #DEE2FF 100%);
/* Opera */
background-image: -o-radial-gradient(left top, circle farthest-corner, #FFFFFF 0%, #DEE2FF 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(radial, left top, 0, left top, 1012, color-stop(0, #FFFFFF), color-stop(1, #DEE2FF));
/* Webkit (Chrome 11+) */
background-image: -webkit-radial-gradient(left top, circle farthest-corner, #FFFFFF 0%, #DEE2FF 100%);
/* W3C Markup, IE10 Release Preview */
background-image: radial-gradient(circle farthest-corner at left top, #FFFFFF 0%, #DEE2FF 100%);
}
ul {

66
examples/sparklinePlus.html
Unescape Escape View File

@ -3,22 +3,23 @@
<link href="../src/nv.d3.css" rel="stylesheet" type="text/css">
<style>
#chart1 {
svg.sparkline {
width: 500px;
height: 50px;
height: 70px;
font-size: 14px;
margin-top: -6px;
}
h2, p {
float: left;
}
</style>
<body class='with-3d-shadow with-transitions'>
<h2>SparklinePlus:</h2>
<p><svg id="chart1" class="sparkline"></svg></p>
<br/>
<p>APPL:<svg id="chart2" class="sparkline"></svg></p>
<p>GOOG:<svg id="chart3" class="sparkline"></svg></p>
<script src="../lib/d3.v3.js"></script>
<script src="../nv.d3.js"></script>
@ -27,34 +28,36 @@ h2, p {
<script src="../src/models/sparklinePlus.js"></script>
<script>
nv.addGraph(function() {
var data = sine();
var chart = nv.models.sparklinePlus()
function defaultChartConfig(containerId, data) {
nv.addGraph(function() {
chart
.margin({left:70})
.x(function(d,i) { return i })
.xTickFormat(function(d) {
return d3.time.format('%x')(new Date(data[d].x))
})
var chart = nv.models.sparklinePlus()
d3.select("#chart1")
.datum(data)
.transition().duration(250)
.call(chart);
chart
.margin({left:70})
.x(function(d,i) { return i })
.xTickFormat(function(d) {
return d3.time.format('%x')(new Date(data[d].x))
})
d3.select(containerId)
.datum(data)
.transition().duration(250)
.call(chart);
return chart;
});
return chart;
});
}
defaultChartConfig("#chart1",sine());
defaultChartConfig("#chart2", volatileChart(130.0, 0.02));
defaultChartConfig("#chart3", volatileChart(25.0, 0.09));
var now =+new Date();
function sine() {
var sin = [];
nv.log(now);
var now =+new Date();
for (var i = 0; i < 100; i++) {
sin.push({x: now + i * 1000 * 60 * 60 * 24, y: Math.sin(i/10)});
@ -63,5 +66,20 @@ function sine() {
return sin;
}
function volatileChart(startPrice, volatility) {
var rval = [];
var now =+new Date();
for(var i = 1; i < 100; i++) {
rval.push({x: now + i * 1000 * 60 * 60 * 24, y: startPrice});
var rnd = Math.random();
var changePct = 2 * volatility * rnd;
if ( changePct > volatility) {
changePct -= (2*volatility);
}
startPrice = startPrice + startPrice * changePct;
}
return rval;
}
</script>

Write Preview
Loading…
Cancel
Save