279 lines
8.3 KiB
JavaScript
279 lines
8.3 KiB
JavaScript
'use strict';
|
|
$(document).ready(function() {
|
|
setTimeout(function() {
|
|
// [ line-chart ] start
|
|
nv.addGraph(function() {
|
|
var chart = nv.models.lineChart()
|
|
.showLegend(true);
|
|
chart.xAxis
|
|
.axisLabel('Time (ms)')
|
|
.tickFormat(d3.format(',r'));
|
|
|
|
chart.yAxis
|
|
.axisLabel('Voltage (v)')
|
|
.tickFormat(d3.format('.02f'));
|
|
|
|
var myData = sinAndCos(); //You need data...
|
|
|
|
d3.select('#nvd3-line-1 svg') //Select the <svg> element you want to render the chart in.
|
|
.datum(myData) //Populate the <svg> element with chart data...
|
|
.call(chart);
|
|
|
|
//Update the chart when window resizes.
|
|
nv.utils.windowResize(function() {
|
|
chart.update()
|
|
});
|
|
return chart;
|
|
});
|
|
|
|
function sinAndCos() {
|
|
var sin = [],
|
|
sin2 = [],
|
|
cos = [];
|
|
for (var i = 0; i < 100; i++) {
|
|
sin.push({
|
|
x: i,
|
|
y: Math.sin(i / 10)
|
|
});
|
|
sin2.push({
|
|
x: i,
|
|
y: Math.sin(i / 10) * 0.25 + 0.5
|
|
});
|
|
cos.push({
|
|
x: i,
|
|
y: .5 * Math.cos(i / 10)
|
|
});
|
|
}
|
|
return [{
|
|
values: sin,
|
|
key: 'Sine Wave',
|
|
color: '#463699'
|
|
},
|
|
{
|
|
values: cos,
|
|
key: 'Cosine Wave',
|
|
color: '#FF425C'
|
|
},
|
|
{
|
|
values: sin2,
|
|
key: 'Another sine wave',
|
|
color: '#19BCBF',
|
|
area: true
|
|
}
|
|
];
|
|
}
|
|
// [ line-chart ] end
|
|
|
|
// [ Discrete-Bar-Chart ] start
|
|
nv.addGraph(function() {
|
|
var chart = nv.models.discreteBarChart()
|
|
.x(function(d) {
|
|
return d.label
|
|
})
|
|
.y(function(d) {
|
|
return d.value
|
|
})
|
|
.staggerLabels(true) //Too many bars and not enough room? Try staggering labels.
|
|
.showValues(true) //...instead, show the bar value right on top of each bar.
|
|
d3.select('#nvd3-bar-1').append('svg')
|
|
.datum(barData())
|
|
.call(chart);
|
|
|
|
nv.utils.windowResize(chart.update);
|
|
|
|
return chart;
|
|
});
|
|
//Each bar represents a single discrete quantity.
|
|
function barData() {
|
|
return [{
|
|
key: "Cumulative Return",
|
|
values: [{
|
|
"label": "A",
|
|
"value": -29.765957771107,
|
|
"color": "#3ebfea"
|
|
}, {
|
|
"label": "B",
|
|
"value": 10,
|
|
"color": "#FF425C"
|
|
}, {
|
|
"label": "C",
|
|
"value": 32.807804682612,
|
|
"color": "#FF9764"
|
|
}, {
|
|
"label": "D",
|
|
"value": 196.45946739256,
|
|
"color": "#19BCBF"
|
|
}, {
|
|
"label": "E",
|
|
"value": 0.25434030906893,
|
|
"color": "#FF425C"
|
|
}, {
|
|
"label": "F",
|
|
"value": -98.079782601442,
|
|
"color": "#463699"
|
|
}, {
|
|
"label": "G",
|
|
"value": -13.925743130903,
|
|
"color": "#13bd8a"
|
|
}, {
|
|
"label": "H",
|
|
"value": -5.1387322875705,
|
|
"color": "#2DCEE3"
|
|
}]
|
|
}]
|
|
}
|
|
// [ Discrete-Bar-Chart ] end
|
|
|
|
// [ Stacked-Bar-Chart ] start
|
|
nv.addGraph(function() {
|
|
var chart = nv.models.multiBarChart()
|
|
.reduceXTicks(true)
|
|
.rotateLabels(0)
|
|
.showControls(true)
|
|
.groupSpacing(0.1)
|
|
.color(['#19BCBF', '#463699', '#13bd8a']);
|
|
|
|
chart.xAxis
|
|
.tickFormat(d3.format(',f'));
|
|
|
|
chart.yAxis
|
|
.tickFormat(d3.format(',.1f'));
|
|
|
|
d3.select('#nvd3-multi-bar-1').append('svg')
|
|
.datum(stackedData())
|
|
.call(chart);
|
|
|
|
nv.utils.windowResize(chart.update);
|
|
|
|
return chart;
|
|
});
|
|
//Generate some nice data.
|
|
function stackedData() {
|
|
return stream_layers(3, 10 + Math.random() * 100, .1).map(function(data, i) {
|
|
return {
|
|
key: 'Stream #' + i,
|
|
values: data
|
|
};
|
|
});
|
|
}
|
|
// [ Stacked-Bar-Chart ] end
|
|
|
|
// [ pie-Chart ] start
|
|
nv.addGraph(function() {
|
|
var chart = nv.models.pieChart()
|
|
.x(function(d) {
|
|
return d.label
|
|
})
|
|
.y(function(d) {
|
|
return d.value
|
|
})
|
|
.showLabels(true);
|
|
|
|
d3.select("#nvd3-pie-1").append('svg')
|
|
.datum(pieData())
|
|
.datum(pieData())
|
|
.transition().duration(350)
|
|
.call(chart);
|
|
nv.utils.windowResize(chart.update);
|
|
|
|
return chart;
|
|
});
|
|
|
|
function pieData() {
|
|
return [{
|
|
"label": "One",
|
|
"value": 29.765957771107,
|
|
"color": "#FF9764"
|
|
}, {
|
|
"label": "Two",
|
|
"value": 0,
|
|
"color": "#FF425C"
|
|
}, {
|
|
"label": "Three",
|
|
"value": 32.807804682612,
|
|
"color": "#463699"
|
|
}, {
|
|
"label": "Four",
|
|
"value": 196.45946739256,
|
|
"color": "#19BCBF"
|
|
}, {
|
|
"label": "Five",
|
|
"value": 0.19434030906893,
|
|
"color": "#2DCEE3"
|
|
}, {
|
|
"label": "Six",
|
|
"value": 98.079782601442,
|
|
"color": "#13bd8a"
|
|
}, {
|
|
"label": "Seven",
|
|
"value": 13.925743130903,
|
|
"color": "#ff8a65"
|
|
}, {
|
|
"label": "Eight",
|
|
"value": 5.1387322875705,
|
|
"color": "#FF425C"
|
|
}];
|
|
}
|
|
// [ pie-Chart ] end
|
|
|
|
// [ Donut-Chart ] start
|
|
nv.addGraph(function() {
|
|
var chart = nv.models.pieChart()
|
|
.x(function(d) {
|
|
return d.label
|
|
})
|
|
.y(function(d) {
|
|
return d.value
|
|
})
|
|
.showLabels(true)
|
|
.labelThreshold(.05)
|
|
.labelType("percent")
|
|
.donut(true)
|
|
.donutRatio(0.35);
|
|
d3.select("#nvd3-donut-1").append('svg')
|
|
.datum(donutData())
|
|
.transition().duration(350)
|
|
.call(chart);
|
|
nv.utils.windowResize(chart.update);
|
|
return chart;
|
|
});
|
|
|
|
function donutData() {
|
|
return [{
|
|
"label": "One",
|
|
"value": 29.765957771107,
|
|
"color": "#FF9764"
|
|
}, {
|
|
"label": "Two",
|
|
"value": 0,
|
|
"color": "#FF425C"
|
|
}, {
|
|
"label": "Three",
|
|
"value": 32.807804682612,
|
|
"color": "#463699"
|
|
}, {
|
|
"label": "Four",
|
|
"value": 196.45946739256,
|
|
"color": "#19BCBF"
|
|
}, {
|
|
"label": "Five",
|
|
"value": 0.19434030906893,
|
|
"color": "#2DCEE3"
|
|
}, {
|
|
"label": "Six",
|
|
"value": 98.079782601442,
|
|
"color": "#13bd8a"
|
|
}, {
|
|
"label": "Seven",
|
|
"value": 13.925743130903,
|
|
"color": "#ff8a65"
|
|
}, {
|
|
"label": "Eight",
|
|
"value": 5.1387322875705,
|
|
"color": "#FF425C"
|
|
}];
|
|
}
|
|
// [ Donut-Chart ] end
|
|
}, 700);
|
|
});
|