|
|
|
@ -36,9 +36,9 @@ svg {
|
|
|
|
|
</style>
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
<div id="chart1" >
|
|
|
|
|
<svg style="height: 500px;"></svg>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="chart1" >
|
|
|
|
|
<svg style="height: 500px;"></svg>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script src="../lib/d3.v3.js"></script>
|
|
|
|
|
<script src="../nv.d3.js"></script>
|
|
|
|
@ -50,35 +50,31 @@ svg {
|
|
|
|
|
<script src="../src/models/scatter.js"></script>
|
|
|
|
|
<script src="../src/models/line.js"></script>
|
|
|
|
|
<script src="../src/models/lineChart.js"></script>
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
// 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
|
|
|
|
|
var chart;
|
|
|
|
|
|
|
|
|
|
nv.addGraph(function() {
|
|
|
|
|
chart = nv.models.lineChart();
|
|
|
|
|
|
|
|
|
|
chart
|
|
|
|
|
.x(function(d,i) { return i })
|
|
|
|
|
|
|
|
|
|
.x(function(d,i) { return i })
|
|
|
|
|
|
|
|
|
|
chart.xAxis // chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
|
|
|
|
|
.tickFormat(d3.format(',.1f'));
|
|
|
|
|
// chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
|
|
|
|
|
chart.xAxis
|
|
|
|
|
.tickFormat(d3.format(',.1f'));
|
|
|
|
|
|
|
|
|
|
chart.yAxis
|
|
|
|
|
.axisLabel('Voltage (v)')
|
|
|
|
|
.tickFormat(d3.format(',.2f'));
|
|
|
|
|
.axisLabel('Voltage (v)')
|
|
|
|
|
.tickFormat(d3.format(',.2f'));
|
|
|
|
|
|
|
|
|
|
chart.showXAxis(true);
|
|
|
|
|
|
|
|
|
|
d3.select('#chart1 svg')
|
|
|
|
|
//.datum([]) //for testing noData
|
|
|
|
|
.datum(sinAndCos())
|
|
|
|
|
//.datum([]) //for testing noData
|
|
|
|
|
.datum(sinAndCos())
|
|
|
|
|
.transition().duration(500)
|
|
|
|
|
.call(chart);
|
|
|
|
|
.call(chart);
|
|
|
|
|
|
|
|
|
|
//TODO: Figure out a good way to do this automatically
|
|
|
|
|
nv.utils.windowResize(chart.update);
|
|
|
|
@ -89,14 +85,12 @@ nv.addGraph(function() {
|
|
|
|
|
return chart;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function sinAndCos() {
|
|
|
|
|
var sin = [],
|
|
|
|
|
cos = [],
|
|
|
|
|
rand = [],
|
|
|
|
|
rand2 = []
|
|
|
|
|
;
|
|
|
|
|
cos = [],
|
|
|
|
|
rand = [],
|
|
|
|
|
rand2 = []
|
|
|
|
|
;
|
|
|
|
|
|
|
|
|
|
for (var i = 0; i < 100; i++) {
|
|
|
|
|
sin.push({x: i, y: i % 10 == 5 ? null : Math.sin(i/10) }); //the nulls are to show how defined works
|
|
|
|
@ -131,5 +125,4 @@ function sinAndCos() {
|
|
|
|
|
];
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|