var testData = testData(['Search', 'Referral', 'Direct', 'Organic'], 25),// just 25 points, since there are lots of charts pieSelect = d3.select("#sources-chart-pie"), pieFooter = d3.select("#data-chart-footer"), stackedChart, lineChart, pieChart, barChart; function pieChartUpdate(d){ d.disabled = !d.disabled; d3.select(this) .classed("disabled", d.disabled); if (!pieChart.pie.values()(testData).filter(function(d) { return !d.disabled }).length) { pieChart.pie.values()(testData).map(function(d) { d.disabled = false; return d; }); pieFooter.selectAll('.control').classed('disabled', false); } d3.select("#sources-chart-pie svg").transition().call(pieChart); } var lineResize; function lineChartOperaHack(){ //lineChart is somehow not rendered correctly after updates. Need to reupdate if (navigator.userAgent.indexOf("Opera")){ clearTimeout(lineResize); lineResize = setTimeout(lineChart.update, 300); } } // test Data. //use if needed function sinAndCos() { var sin = [], cos = []; 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 cos.push({x: i, y: .5 * Math.cos(i/10)}); } return [ { area: true, values: sin, key: "Sine Wave" }, { values: cos, key: "Cosine Wave" } ]; } nv.addGraph(function() { /* * we need to display total amount of visits for some period * calculating it * pie chart uses y-property by default, so setting sum there. */ for (var i = 0; i < testData.length; i++){ testData[i].y = Math.floor(d3.sum(testData[i].values, function(d){ return d.y; })) } var chart = nv.models.pieChartTotal() .x(function(d) {return d.key }) .margin({top: 0, right: 20, bottom: 20, left: 20}) .values(function(d) {return d }) .color(COLOR_VALUES) .showLabels(false) .showLegend(false) .tooltipContent(function(key, y, e, graph) { return '

' + key + '

' + '

' + y + '

' }) .total(function(count){ return "
" + count + "
visits
" }) .donut(true); chart.pie.margin({top: 10, bottom: -20}); var sum = d3.sum(testData, function(d){ return d.y; }); pieFooter .append("div") .classed("controls", true) .selectAll("div") .data(testData) .enter().append("div") .classed("control", true) .style("border-top", function(d, i){ return "3px solid " + COLOR_VALUES[i]; }) .html(function(d) { return "
" + d.key + "
" + "
" + Math.floor(100 * d.y / sum) + "%
"; }) .on('click', function(d) { pieChartUpdate.apply(this, [d]); setTimeout(function() { stackedChart.update(); lineChart.update(); barChart.update(); lineChartOperaHack(); }, 100); }); d3.select("#sources-chart-pie svg") .datum([testData]) .transition(500).call(chart); nv.utils.windowResize(chart.update); pieChart = chart; return chart; }); nv.addGraph(function(){ var chart = nv.models.multiBarChart() .margin({left: 30, bottom: 20, right: 0}) .color(keyColor) .controlsColor([$white, $white, $white]) .showLegend(false); chart.yAxis .showMaxMin(false) .ticks(0) .tickFormat(d3.format(',.f')); chart.xAxis .showMaxMin(false) .tickFormat(function(d) { return d3.time.format('%b %d')(new Date(d)) }); d3.select('#sources-chart-bar svg') .datum(testData) .transition().duration(500).call(chart); nv.utils.windowResize(chart.update); barChart = chart; return chart; }); nv.addGraph(function() { var chart = nv.models.stackedAreaChart() .margin({left: 0}) .color(keyColor) .showControls(false) .showLegend(false) .style("stream") .controlsColor([$textColor, $textColor, $textColor]); chart.yAxis .showMaxMin(false) .tickFormat(d3.format(',f')); chart.xAxis .showMaxMin(false) .tickFormat(function(d) { return d3.time.format('%b %d')(new Date(d)) }); d3.select("#sources-chart-stacked svg") .datum(testData) .transition().duration(500).call(chart); nv.utils.windowResize(chart.update); chart.stacked.dispatch.on('areaClick.updateExamples', function(e) { setTimeout(function() { lineChart.update(); pieChart.update(); barChart.update(); pieSelect.selectAll('.control').classed("disabled", function(d){ return d.disabled; }); }, 100); }); stackedChart = chart; return chart; }); nv.addGraph(function() { var chart = nv.models.lineChart() .margin({top: 0, bottom: 25, left: 30, right: 0}) .showLegend(false) .color(keyColor); chart.yAxis .showMaxMin(false) .tickFormat(d3.format(',.f')); chart.xAxis .showMaxMin(false) .tickFormat(function(d) { return d3.time.format('%b %d')(new Date(d)) }); //just to make it look different testData[0].area = true; testData[3].area = true; d3.select('#sources-chart-line svg') //.datum(sinAndCos()) .datum(testData) .transition().duration(500) .call(chart); nv.utils.windowResize(chart.update); lineChart = chart; lineChartOperaHack(); return chart; }); function getData() { var arr = [], theDate = new Date(2012, 1, 1, 0, 0, 0, 0), previous = Math.floor(Math.random() * 100); for (var x = 0; x < 30; x++) { var newY = previous + Math.floor(Math.random() * 5 - 2); previous = newY; arr.push({x: new Date(theDate.getTime()), y: newY}); theDate.setDate(theDate.getDate() + 1); } return arr; }