var nvd3Charts = function() { var myColors = ["#33414E","#8DCA35","#00BFDD","#FF702A","#DA3610", "#80CDC2","#A6D969","#D9EF8B","#FFFF99","#F7EC37","#F46D43", "#E08215","#D73026","#A12235","#8C510A","#14514B","#4D9220", "#542688", "#4575B4", "#74ACD1", "#B8E1DE", "#FEE0B6","#FDB863", "#C51B7D","#DE77AE","#EDD3F2"]; d3.scale.myColors = function() { return d3.scale.ordinal().range(myColors); }; var startChart1 = function() { /*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({ left : 100 })//Adjust chart margins to give the x-axis some breathing room. .useInteractiveGuideline(true)//We want nice looking tooltips and a guideline! .transitionDuration(350)//how fast do you want the lines to transition? .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 .color(d3.scale.myColors().range());; 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('#chart-1 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. }, { values : cos, key : 'Cosine Wave' }, { values : sin2, key : 'Another sine wave', area : true //area - set to true if you want this line to turn into a filled area chart. }]; } }; var startChart2 = function() { 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.myColors().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('#chart-2 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; } }; var startChart3 = function() { d3.json('assets/plugins/nvd3/stackedAreaData.json', function(data) { nv.addGraph(function() { var chart = nv.models.stackedAreaChart().margin({ top : 30, right : 10, bottom : 20, left : 25 }).x(function(d) { return d[0]; }).y(function(d) { return d[1]; }).forceY([0, 8000]).useInteractiveGuideline(true).color(d3.scale.myColors().range());; var options = { showControls : false, showLegend : true }; chart.options(options); chart.xAxis.tickFormat(function(d) { return d3.time.format('%x')(new Date(d)); }).showMaxMin(false); chart.yAxis.tickFormat(d3.format(',f')); d3.select('#chart-3 svg').datum(data).call(chart); nv.utils.windowResize(chart.update); return chart; }); }); }; var startChart4 = function() { 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) .color(d3.scale.myColors().range());; d3.select('#chart-4 svg').datum(exampleData()).call(chart); nv.utils.windowResize(chart.update); return chart; }); //Each bar represents a single discrete quantity. function exampleData() { return [{ key : "Cumulative Return", values : [{ "label" : "A Label", "value" : -29.765957771107 }, { "label" : "B Label", "value" : 0 }, { "label" : "C Label", "value" : 32.807804682612 }, { "label" : "D Label", "value" : 196.45946739256 }, { "label" : "E Label", "value" : 0.19434030906893 }, { "label" : "F Label", "value" : -98.079782601442 }, { "label" : "G Label", "value" : -13.925743130903 }, { "label" : "H Label", "value" : -5.1387322875705 }] }]; } }; var startChart5 = function() { d3.json('assets/plugins/nvd3/multiBarHorizontalData.json', function(data) { nv.addGraph(function() { var chart = nv.models.multiBarHorizontalChart().x(function(d) { return d.label; }).y(function(d) { return d.value; }).margin({ top : 30, right : 20, bottom : 50, left : 175 }).showValues(true)//Show bar value next to each bar. .tooltips(true)//Show tooltips on hover. .transitionDuration(350) .showControls(true) .color(d3.scale.myColors().range()); //Allow user to switch between "Grouped" and "Stacked" mode. chart.yAxis.tickFormat(d3.format(',.2f')); d3.select('#chart-5 svg').datum(data).call(chart); nv.utils.windowResize(chart.update); return chart; }); }); }; var startChart6 = function() { d3.json("assets/plugins/nvd3/linePlusBarData.json", function(error, data) { nv.addGraph(function() { var chart = nv.models.linePlusBarChart().margin({ top : 30, right : 60, bottom : 50, left : 70 }) //We can set x data accessor to use index. Reason? So the bars all appear evenly spaced. .x(function(d, i) { return i; }).y(function(d, i) { return d[1]; }).color(d3.scale.myColors().range());; chart.xAxis.tickFormat(function(d) { var dx = data[0].values[d] && data[0].values[d][0] || 0; return d3.time.format('%x')(new Date(dx)); }); chart.y1Axis.tickFormat(d3.format(',f')); chart.y2Axis.tickFormat(function(d) { return '$' + d3.format(',f')(d); }); chart.bars.forceY([0]); d3.select('#chart-6 svg').datum(data).transition().duration(0).call(chart); nv.utils.windowResize(chart.update); return chart; }); }); }; var startChart7 = function() { d3.json('assets/plugins/nvd3/cumulativeLineData.json', function(data) { nv.addGraph(function() { var chart = nv.models.cumulativeLineChart().x(function(d) { return d[0]; }).y(function(d) { return d[1] / 100; })//adjusting, 100% is 1.00, not 100 as it is in the data .color(d3.scale.myColors().range()).useInteractiveGuideline(true); chart.xAxis.tickValues([1078030800000, 1122782400000, 1167541200000, 1251691200000]).tickFormat(function(d) { return d3.time.format('%x')(new Date(d)); }); chart.yAxis.tickFormat(d3.format(',.1%')); d3.select('#chart-7 svg').datum(data).call(chart); //TODO: Figure out a good way to do this automatically nv.utils.windowResize(chart.update); return chart; }); }); }; var startChart8 = function() { nv.addGraph(function() { var chart = nv.models.lineWithFocusChart().color(d3.scale.myColors().range());; chart.xAxis.tickFormat(d3.format(',f')); chart.yAxis.tickFormat(d3.format(',.2f')); chart.y2Axis.tickFormat(d3.format(',.2f')); d3.select('#chart-8 svg').datum(testData()).transition().duration(500).call(chart); nv.utils.windowResize(chart.update); return chart; }); /************************************** * Simple test data generator */ function testData() { return stream_layers(3, 128, .1).map(function(data, i) { return { key : 'Stream' + i, values : data }; }); } }; var startChart9 = function() { //Regular pie chart example nv.addGraph(function() { var chart = nv.models.pieChart().x(function(d) { return d.label; }).y(function(d) { return d.value; }).showLabels(true).color(d3.scale.myColors().range());; d3.select("#chart-9 svg").datum(exampleData()).transition().duration(350).call(chart); 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. .color(d3.scale.myColors().range());; d3.select("#chart-10 svg").datum(exampleData()).transition().duration(350).call(chart); return chart; }); //Pie chart example data. Note how there is only a single array of key-value pairs. function exampleData() { return [{ "label" : "One", "value" : 29.765957771107 }, { "label" : "Two", "value" : 0 }, { "label" : "Three", "value" : 32.807804682612 }, { "label" : "Four", "value" : 196.45946739256 }, { "label" : "Five", "value" : 0.19434030906893 }, { "label" : "Six", "value" : 98.079782601442 }, { "label" : "Seven", "value" : 13.925743130903 }, { "label" : "Eight", "value" : 5.1387322875705 }]; } }; 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); }); } function stream_index(d, i) { return { x : i, y : Math.max(0, d) }; } return { init : function() { startChart1(); startChart2(); startChart3(); startChart4(); startChart5(); startChart6(); startChart7(); startChart8(); startChart9(); } }; }(); nvd3Charts.init();