/* ------------------------------------------------------------------------------ * * # D3.js - horizontal bar chart * * Demo d3.js horizontal bar chart setup with .csv data source * * ---------------------------------------------------------------------------- */ // Setup module // ------------------------------ var DashboardDonuts = function() { // // Setup module components // // Marketing campaigns donut chart var _MarketingCampaignsDonutChart = function(element, size) { if (typeof d3 == 'undefined') { console.warn('Warning - d3.min.js is not loaded.'); return; } // Initialize chart only if element exsists in the DOM if($(element).length > 0) { // Basic setup // ------------------------------ // Add data set var data = [ { "browser": "Google Adwords", "icon": "", "value": 1047 }, { "browser": "Social media", "icon": "", "value": 2948 }, { "browser": "Youtube video", "icon": "", "value": 3909 } ]; // Main variables var d3Container = d3.select(element), distance = 2, // reserve 2px space for mouseover arc moving radius = (size/2) - distance, sum = d3.sum(data, function(d) { return d.value; }); // Colors var colorrange = ['#66BB6A','#9575CD','#FF7043']; // Tooltip // ------------------------------ var tip = d3.tip() .attr('class', 'd3-tip') .offset([-10, 0]) .direction('e') .html(function (d) { return ''; }); // Create chart // ------------------------------ // Add svg element var container = d3Container.append('svg').call(tip); // Add SVG group var svg = container .attr('width', size) .attr('height', size) .append('g') .attr('transform', 'translate(' + (size / 2) + ',' + (size / 2) + ')'); // Construct chart layout // ------------------------------ // Pie var pie = d3.layout.pie() .sort(null) .startAngle(Math.PI) .endAngle(3 * Math.PI) .value(function (d) { return d.value; }); // Arc var arc = d3.svg.arc() .outerRadius(radius) .innerRadius(radius / 2); // Colors var colors = d3.scale.ordinal().range(colorrange); // // Append chart elements // // Group chart elements var arcGroup = svg.selectAll('.d3-arc') .data(pie(data)) .enter() .append('g') .attr('class', 'd3-arc d3-slice-border') .style('cursor', 'pointer'); // Append path var arcPath = arcGroup .append('path') .style('fill', function (d) { return colors(d.data.value); }); // Add tooltip arcPath .on('mouseover', function (d, i) { // Transition on mouseover d3.select(this) .transition() .duration(500) .ease('elastic') .attr('transform', function (d) { d.midAngle = ((d.endAngle - d.startAngle) / 2) + d.startAngle; var x = Math.sin(d.midAngle) * distance; var y = -Math.cos(d.midAngle) * distance; return 'translate(' + x + ',' + y + ')'; }); }) .on('mousemove', function (d) { // Show tooltip on mousemove tip.show(d) .style('top', (d3.event.pageY - 40) + 'px') .style('left', (d3.event.pageX + 30) + 'px'); }) .on('mouseout', function (d, i) { // Mouseout transition d3.select(this) .transition() .duration(500) .ease('bounce') .attr('transform', 'translate(0,0)'); // Hide tooltip tip.hide(d); }); // Animate chart on load arcPath .transition() .delay(function(d, i) { return i * 500; }) .duration(500) .attrTween('d', function(d) { var interpolate = d3.interpolate(d.startAngle,d.endAngle); return function(t) { d.endAngle = interpolate(t); return arc(d); }; }); } }; // Campaign status donut chart var _CampaignStatusDonutChart = function(element, size) { if (typeof d3 == 'undefined') { console.warn('Warning - d3.min.js is not loaded.'); return; } // Initialize chart only if element exsists in the DOM if($(element).length > 0) { // Basic setup // ------------------------------ // Add data set var data = [ { "status": "Active campaigns", "icon": "", "value": 439 }, { "status": "Closed campaigns", "icon": "", "value": 290 }, { "status": "Pending campaigns", "icon": "", "value": 190 }, { "status": "Campaigns on hold", "icon": "", "value": 148 } ]; // Main variables var d3Container = d3.select(element), distance = 2, // reserve 2px space for mouseover arc moving radius = (size/2) - distance, sum = d3.sum(data, function(d) { return d.value; }); // Colors var colorrange = ['#29B6F6', '#EF5350', '#81C784', '#999']; // Tooltip // ------------------------------ var tip = d3.tip() .attr('class', 'd3-tip') .offset([-10, 0]) .direction('e') .html(function (d) { return ''; }); // Create chart // ------------------------------ // Add svg element var container = d3Container.append('svg').call(tip); // Add SVG group var svg = container .attr('width', size) .attr('height', size) .append('g') .attr('transform', 'translate(' + (size / 2) + ',' + (size / 2) + ')'); // Construct chart layout // ------------------------------ // Pie var pie = d3.layout.pie() .sort(null) .startAngle(Math.PI) .endAngle(3 * Math.PI) .value(function (d) { return d.value; }); // Arc var arc = d3.svg.arc() .outerRadius(radius) .innerRadius(radius / 2); // Colors var colors = d3.scale.ordinal().range(colorrange); // // Append chart elements // // Group chart elements var arcGroup = svg.selectAll('.d3-arc') .data(pie(data)) .enter() .append('g') .attr('class', 'd3-arc d3-slice-border') .style('cursor', 'pointer'); // Append path var arcPath = arcGroup .append('path') .style('fill', function (d) { return colors(d.data.value); }); // Add tooltip arcPath .on('mouseover', function (d, i) { // Transition on mouseover d3.select(this) .transition() .duration(500) .ease('elastic') .attr('transform', function (d) { d.midAngle = ((d.endAngle - d.startAngle) / 2) + d.startAngle; var x = Math.sin(d.midAngle) * distance; var y = -Math.cos(d.midAngle) * distance; return 'translate(' + x + ',' + y + ')'; }); }) .on('mousemove', function (d) { // Show tooltip on mousemove tip.show(d) .style('top', (d3.event.pageY - 40) + 'px') .style('left', (d3.event.pageX + 30) + 'px'); }) .on('mouseout', function (d, i) { // Mouseout transition d3.select(this) .transition() .duration(500) .ease('bounce') .attr('transform', 'translate(0,0)'); // Hide tooltip tip.hide(d); }); // Animate chart on load arcPath .transition() .delay(function(d, i) { return i * 500; }) .duration(500) .attrTween('d', function(d) { var interpolate = d3.interpolate(d.startAngle,d.endAngle); return function(t) { d.endAngle = interpolate(t); return arc(d); }; }); } }; // Tickets status donut chart var _TicketStatusDonutChart = function(element, size) { if (typeof d3 == 'undefined') { console.warn('Warning - d3.min.js is not loaded.'); return; } // Initialize chart only if element exsists in the DOM if($(element).length > 0) { // Basic setup // ------------------------------ // Add data set var data = [ { "status": "Pending tickets", "icon": "", "value": 295 }, { "status": "Resolved tickets", "icon": "", "value": 189 }, { "status": "Closed tickets", "icon": "", "value": 277 } ]; // Main variables var d3Container = d3.select(element), distance = 2, // reserve 2px space for mouseover arc moving radius = (size/2) - distance, sum = d3.sum(data, function(d) { return d.value; }); // Colors var colorrange = ['#29B6F6','#66BB6A','#EF5350']; // Tooltip // ------------------------------ var tip = d3.tip() .attr('class', 'd3-tip') .offset([-10, 0]) .direction('e') .html(function (d) { return ''; }); // Create chart // ------------------------------ // Add svg element var container = d3Container.append('svg').call(tip); // Add SVG group var svg = container .attr('width', size) .attr('height', size) .append('g') .attr('transform', 'translate(' + (size / 2) + ',' + (size / 2) + ')'); // Construct chart layout // ------------------------------ // Pie var pie = d3.layout.pie() .sort(null) .startAngle(Math.PI) .endAngle(3 * Math.PI) .value(function (d) { return d.value; }); // Arc var arc = d3.svg.arc() .outerRadius(radius) .innerRadius(radius / 2); // Colors var colors = d3.scale.ordinal().range(colorrange); // // Append chart elements // // Group chart elements var arcGroup = svg.selectAll('.d3-arc') .data(pie(data)) .enter() .append('g') .attr('class', 'd3-arc d3-slice-border') .style('cursor', 'pointer'); // Append path var arcPath = arcGroup .append('path') .style('fill', function (d) { return colors(d.data.value); }); // Add tooltip arcPath .on('mouseover', function (d, i) { // Transition on mouseover d3.select(this) .transition() .duration(500) .ease('elastic') .attr('transform', function (d) { d.midAngle = ((d.endAngle - d.startAngle) / 2) + d.startAngle; var x = Math.sin(d.midAngle) * distance; var y = -Math.cos(d.midAngle) * distance; return 'translate(' + x + ',' + y + ')'; }); }) .on('mousemove', function (d) { // Show tooltip on mousemove tip.show(d) .style('top', (d3.event.pageY - 40) + 'px') .style('left', (d3.event.pageX + 30) + 'px'); }) .on('mouseout', function (d, i) { // Mouseout transition d3.select(this) .transition() .duration(500) .ease('bounce') .attr('transform', 'translate(0,0)'); // Hide tooltip tip.hide(d); }); // Animate chart on load arcPath .transition() .delay(function(d, i) { return i * 500; }) .duration(500) .attrTween('d', function(d) { var interpolate = d3.interpolate(d.startAngle,d.endAngle); return function(t) { d.endAngle = interpolate(t); return arc(d); }; }); } }; // // Return objects assigned to module // return { init: function() { _MarketingCampaignsDonutChart('#campaigns-donut', 42); _CampaignStatusDonutChart('#campaign-status-pie', 42); _TicketStatusDonutChart('#tickets-status', 42); } } }(); // Initialize module // ------------------------------ document.addEventListener('DOMContentLoaded', function() { DashboardDonuts.init(); });