first
This commit is contained in:
@@ -0,0 +1,296 @@
|
||||
"use strict";
|
||||
$(document).ready(function() {
|
||||
/*Line chart start*/
|
||||
/*These lines are all chart setup. Pick and choose which chart features you want to utilize. */
|
||||
nv.addGraph(function() {
|
||||
var chart = nv.models.lineChart()
|
||||
.margin({ top: 50 })
|
||||
.margin({ left: 100 }) //Adjust chart margins to give the x-axis some breathing room.
|
||||
.useInteractiveGuideline(true) //We want nice looking tooltips and a guideline!
|
||||
.showLegend(true) //Show the legend, allowing users to turn on/off line series.
|
||||
.showYAxis(true) //Show the y-axis
|
||||
.showXAxis(true) //Show the x-axis
|
||||
;
|
||||
|
||||
chart.xAxis //Chart x-axis settings
|
||||
.axisLabel('Time (ms)')
|
||||
.tickFormat(d3.format(',r'));
|
||||
|
||||
chart.yAxis //Chart y-axis settings
|
||||
.axisLabel('Voltage (v)')
|
||||
.tickFormat(d3.format('.02f'));
|
||||
|
||||
/* Done setting the chart up? Time to render it!*/
|
||||
var myData = sinAndCos(); //You need data...
|
||||
|
||||
d3.select('#linechart').append('svg') //Select the <svg> element you want to render the chart in.
|
||||
.datum(myData) //Populate the <svg> element with chart data...
|
||||
.call(chart); //Finally, render the chart!
|
||||
|
||||
//Update the chart when window resizes.
|
||||
nv.utils.windowResize(function() { chart.update() });
|
||||
return chart;
|
||||
});
|
||||
/**************************************
|
||||
* Simple test data generator
|
||||
*/
|
||||
function sinAndCos() {
|
||||
var sin = [],
|
||||
sin2 = [],
|
||||
cos = [];
|
||||
|
||||
//Data is represented as an array of {x,y} pairs.
|
||||
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) });
|
||||
}
|
||||
|
||||
//Line chart data should be sent as an array of series objects.
|
||||
return [{
|
||||
values: sin, //values - represents the array of {x,y} data points
|
||||
key: 'Sine Wave', //key - the name of the series.
|
||||
color: '#4C5667' //color - optional: choose your own line color.
|
||||
}, {
|
||||
values: cos,
|
||||
key: 'Cosine Wave',
|
||||
color: '#11c15b'
|
||||
}, {
|
||||
values: sin2,
|
||||
key: 'Another sine wave',
|
||||
color: '#ff5252',
|
||||
area: true //area - set to true if you want this line to turn into a filled area chart.
|
||||
}];
|
||||
}
|
||||
|
||||
/*Bar chart start*/
|
||||
nv.addGraph(function() {
|
||||
var chart = nv.models.discreteBarChart()
|
||||
.x(function(d) {
|
||||
return d.label }) //Specify the data accessors.
|
||||
.y(function(d) {
|
||||
return d.value })
|
||||
.staggerLabels(true) //Too many bars and not enough room? Try staggering labels.
|
||||
/* .tooltips(false) */ //Don't show tooltips
|
||||
.showValues(true) //...instead, show the bar value right on top of each bar.
|
||||
/* .transitionDuration(350)*/
|
||||
;
|
||||
|
||||
d3.select('#barchart').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": "#FF9F55"
|
||||
}, {
|
||||
"label": "B",
|
||||
"value": 10,
|
||||
"color": "#FEC811"
|
||||
}, {
|
||||
"label": "C",
|
||||
"value": 32.807804682612,
|
||||
"color": "#4C5667"
|
||||
}, {
|
||||
"label": "D",
|
||||
"value": 196.45946739256,
|
||||
"color": "#01C0C8"
|
||||
}, {
|
||||
"label": "E",
|
||||
"value": 0.25434030906893,
|
||||
"color": "#FF0084"
|
||||
}, {
|
||||
"label": "F",
|
||||
"value": -98.079782601442,
|
||||
"color": "#007BB6"
|
||||
}, {
|
||||
"label": "G",
|
||||
"value": -13.925743130903,
|
||||
"color": "#3b5998"
|
||||
}, {
|
||||
"label": "H",
|
||||
"value": -5.1387322875705,
|
||||
"color": "#B2E0A2"
|
||||
}]
|
||||
}]
|
||||
|
||||
}
|
||||
|
||||
/*Scatter chart start*/
|
||||
nv.addGraph(function() {
|
||||
var chart = nv.models.scatterChart()
|
||||
.showDistX(true) //showDist, when true, will display those little distribution lines on the axis.
|
||||
.showDistY(true)
|
||||
/* .transitionDuration(350)*/
|
||||
.color(d3.scale.category10().range());
|
||||
|
||||
//Configure how the tooltip looks.
|
||||
/* chart.tooltipContent(function(key) {
|
||||
return '<h3>' + key + '</h3>';
|
||||
});*/
|
||||
|
||||
//Axis settings
|
||||
chart.xAxis.tickFormat(d3.format('.02f'));
|
||||
chart.yAxis.tickFormat(d3.format('.02f'));
|
||||
|
||||
//We want to show shapes other than circles.
|
||||
/*chart.scatter.onlyCircles(false);*/
|
||||
|
||||
var myData = randomData(4, 40);
|
||||
d3.select('#scatterchart').append('svg')
|
||||
.datum(myData)
|
||||
.call(chart);
|
||||
|
||||
nv.utils.windowResize(chart.update);
|
||||
|
||||
return chart;
|
||||
});
|
||||
|
||||
/**************************************
|
||||
* Simple test data generator
|
||||
*/
|
||||
function randomData(groups, points) { //# groups,# points per group
|
||||
var data = [],
|
||||
shapes = ['circle', 'cross', 'triangle-up', 'triangle-down', 'diamond', 'square'],
|
||||
random = d3.random.normal();
|
||||
|
||||
for (var i = 0; i < groups; i++) {
|
||||
data.push({
|
||||
key: 'Group ' + i,
|
||||
values: []
|
||||
});
|
||||
|
||||
for (var j = 0; j < points; j++) {
|
||||
data[i].values.push({
|
||||
x: random(),
|
||||
y: random(),
|
||||
size: Math.random() //Configure the size of each scatter point
|
||||
,
|
||||
shape: (Math.random() > 0.95) ? shapes[j % 6] : "circle" //Configure the shape of each scatter point.
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return data;
|
||||
}
|
||||
|
||||
/*Stacked/Group chart start*/
|
||||
nv.addGraph(function() {
|
||||
var chart = nv.models.multiBarChart()
|
||||
/* .transitionDuration(350)*/
|
||||
.reduceXTicks(true) //If 'false', every single x-axis tick label will be rendered.
|
||||
.rotateLabels(0) //Angle to rotate x-axis labels.
|
||||
.showControls(true) //Allow user to switch between 'Grouped' and 'Stacked' mode.
|
||||
.groupSpacing(0.1) //Distance between each group of bars.
|
||||
;
|
||||
|
||||
chart.xAxis
|
||||
.tickFormat(d3.format(',f'));
|
||||
|
||||
chart.yAxis
|
||||
.tickFormat(d3.format(',.1f'));
|
||||
|
||||
d3.select('#stackedchart').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
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
/*Regular Pie chart*/
|
||||
nv.addGraph(function() {
|
||||
var chart = nv.models.pieChart()
|
||||
.x(function(d) {
|
||||
return d.label })
|
||||
.y(function(d) {
|
||||
return d.value })
|
||||
.showLabels(true);
|
||||
|
||||
d3.select("#piechart").append('svg')
|
||||
.datum(pieData())
|
||||
.transition().duration(350)
|
||||
.call(chart);
|
||||
nv.utils.windowResize(chart.update);
|
||||
return chart;
|
||||
});
|
||||
//Donut chart example
|
||||
nv.addGraph(function() {
|
||||
var chart = nv.models.pieChart()
|
||||
.x(function(d) {
|
||||
return d.label })
|
||||
.y(function(d) {
|
||||
return d.value })
|
||||
.showLabels(true) //Display pie labels
|
||||
.labelThreshold(.05) //Configure the minimum slice size for labels to show up
|
||||
.labelType("percent") //Configure what type of data to show in the label. Can be "key", "value" or "percent"
|
||||
.donut(true) //Turn on Donut mode. Makes pie chart look tasty!
|
||||
.donutRatio(0.35) //Configure how big you want the donut hole size to be.
|
||||
;
|
||||
|
||||
d3.select("#donutchart").append('svg')
|
||||
.datum(pieData())
|
||||
.transition().duration(350)
|
||||
.call(chart);
|
||||
nv.utils.windowResize(chart.update);
|
||||
return chart;
|
||||
});
|
||||
//Pie chart example data. Note how there is only a single array of key-value pairs.
|
||||
function pieData() {
|
||||
return [{
|
||||
"label": "One",
|
||||
"value": 29.765957771107,
|
||||
"color": "#FB9678"
|
||||
}, {
|
||||
"label": "Two",
|
||||
"value": 0,
|
||||
"color": "#FF9F55"
|
||||
}, {
|
||||
"label": "Three",
|
||||
"value": 32.807804682612,
|
||||
"color": "#01C0C8"
|
||||
}, {
|
||||
"label": "Four",
|
||||
"value": 196.45946739256,
|
||||
"color": "#00C292"
|
||||
}, {
|
||||
"label": "Five",
|
||||
"value": 0.19434030906893,
|
||||
"color": "#4F5467"
|
||||
}, {
|
||||
"label": "Six",
|
||||
"value": 98.079782601442,
|
||||
"color": "#4F5467"
|
||||
}, {
|
||||
"label": "Seven",
|
||||
"value": 13.925743130903,
|
||||
"color": "#000000"
|
||||
}, {
|
||||
"label": "Eight",
|
||||
"value": 5.1387322875705,
|
||||
"color": "#CB2027"
|
||||
}];
|
||||
}
|
||||
|
||||
});
|
||||
Reference in New Issue
Block a user