Dashboard Graph

Developer
Mark Michon
Size
6,551 Kb
Views
6,072
  1. Dashboard Graph Previews
  2. Dashboard Graph HTML Codes
  3. Dashboard Graph CSS Codes
  4. Dashboard Graph JS Codes

How do I make an dashboard graph?

Early concept graph for an admin dashboard. Toggles between team overview and the individual user's data. Values are calculated based on the data, and markers are adjusted accordingly.. What is a dashboard graph? How do you make a dashboard graph? This script and codes were developed by Mark Michon on 20 January 2023, Friday.

Dashboard Graph Previews
IQ Test

Dashboard Graph - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Dashboard Graph</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { padding: 20px;
}
/* Opportunity Graphs */
.graph-titles { display: inline-block; width: 200px; vertical-align: top; margin: 20px 0 20px; padding: 0;
}
.graph-title { margin-bottom: 1em; width: 100%; line-height: 30px; overflow: hidden;
}
.graph-title-name { float: left;
}
.graph-title-count { float: right; padding: 0 10px; height: 30px; border-radius: 20px; color: #fff;
}
.graph { display: inline-block; position: relative; margin: 20px 20px 20px 10px; padding: 0; width: 500px;
}
.graph-bar { display: block; overflow: hidden; margin-bottom: 1em;
}
.graph-bar-fragment { width: 0; height: 30px; float: left; background-color: #ccc; -webkit-transition: width .4s ease-in;
}
.graph-bar-single { height: 30px; background-color: #ccc; -webkit-transition: width .4s ease-in; border-top-right-radius: 4px; border-bottom-right-radius: 4px;
}
.graph-bar-fragment:last-child { border-top-right-radius: 4px; border-bottom-right-radius: 4px;
}
.urgent { background: #c9575e; background: -moz-linear-gradient(top, #c9575e 0%, #c12e41 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c9575e), color-stop(100%, #c12e41)); background: -webkit-linear-gradient(top, #c9575e 0%, #c12e41 100%); background: -o-linear-gradient(top, #c9575e 0%, #c12e41 100%); background: -ms-linear-gradient(top, #c9575e 0%, #c12e41 100%); background: linear-gradient(to bottom, #c9575e 0%, #c12e41 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9575e', endColorstr='#c12e41',GradientType=0 );
}
.active { background: #d6ac6e; background: -moz-linear-gradient(top, #d6ac6e 0%, #cc9e52 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d6ac6e), color-stop(100%, #cc9e52)); background: -webkit-linear-gradient(top, #d6ac6e 0%, #cc9e52 100%); background: -o-linear-gradient(top, #d6ac6e 0%, #cc9e52 100%); background: -ms-linear-gradient(top, #d6ac6e 0%, #cc9e52 100%); background: linear-gradient(to bottom, #d6ac6e 0%, #cc9e52 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6ac6e', endColorstr='#cc9e52',GradientType=0 );
}
.newCount { background: #6db683; background: -moz-linear-gradient(top, #6db683 0%, #569b6d 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6db683), color-stop(100%, #569b6d)); background: -webkit-linear-gradient(top, #6db683 0%, #569b6d 100%); background: -o-linear-gradient(top, #6db683 0%, #569b6d 100%); background: -ms-linear-gradient(top, #6db683 0%, #569b6d 100%); background: linear-gradient(to bottom, #6db683 0%, #569b6d 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db683', endColorstr='#569b6d',GradientType=0 );
}
.newFromBatch { background: #7f8cc4; background: -moz-linear-gradient(top, #7f8cc4 0%, #6477ac 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7f8cc4), color-stop(100%, #6477ac)); background: -webkit-linear-gradient(top, #7f8cc4 0%, #6477ac 100%); background: -o-linear-gradient(top, #7f8cc4 0%, #6477ac 100%); background: -ms-linear-gradient(top, #7f8cc4 0%, #6477ac 100%); background: linear-gradient(to bottom, #7f8cc4 0%, #6477ac 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7f8cc4', endColorstr='#6477ac',GradientType=0 );
}
.markers { position: absolute; top: 0; bottom: 0; left: 0; right: 0; opacity: 0; visibility: hidden; -webkit-transition: opacity .4s ease-in;
}
.markers.loaded { visibility: visible; opacity: 1;
}
.marker { -webkit-box-sizing: border-box; position: absolute; bottom: -2em; top: 0; border-left: 2px solid #e6e6e6;
}
.marker-number { position: absolute; padding-left: .5em; bottom: 0; text-align: right;
}
.marker:last-child .marker-number { right: 0; padding-left: 0; padding-right: .5em;
}
.graph-key { margin: 20px 0 0 210px;
}
.graph-key-item { display: inline-block; margin-right: 1.5em;
}
.graph-key-dot { display: inline-block; width: 1em; height: 1em; border-radius: 50%; margin-right: .5em;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="graph-container"> <div class="graph-titles"> <!-- Populated --> </div>	<div class="graph"> <div class="graph-bars"> <!-- Populated --> </div> <div class="markers"> <!-- Populated --> </div> </div> <div class="graph-key"> <div class="graph-key-item"> <span class="graph-key-dot urgent"></span><span id="urgent-title">Urgent</span> </div> <div class="graph-key-item"> <span class="graph-key-dot active"></span><span>Active</span> </div> <div class="graph-key-item"> <span class="graph-key-dot newCount"></span><span>New</span> </div> <div class="graph-key-item"> <span class="graph-key-dot newFromBatch"></span><span>New From Batch</span> </div> </div>
</div>
<button id="teamGraph">Team Graph</button>
<button id="userGraph">User Graph</button> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Dashboard Graph - Script Codes CSS Codes

body { padding: 20px;
}
/* Opportunity Graphs */
.graph-titles { display: inline-block; width: 200px; vertical-align: top; margin: 20px 0 20px; padding: 0;
}
.graph-title { margin-bottom: 1em; width: 100%; line-height: 30px; overflow: hidden;
}
.graph-title-name { float: left;
}
.graph-title-count { float: right; padding: 0 10px; height: 30px; border-radius: 20px; color: #fff;
}
.graph { display: inline-block; position: relative; margin: 20px 20px 20px 10px; padding: 0; width: 500px;
}
.graph-bar { display: block; overflow: hidden; margin-bottom: 1em;
}
.graph-bar-fragment { width: 0; height: 30px; float: left; background-color: #ccc; -webkit-transition: width .4s ease-in;
}
.graph-bar-single { height: 30px; background-color: #ccc; -webkit-transition: width .4s ease-in; border-top-right-radius: 4px; border-bottom-right-radius: 4px;
}
.graph-bar-fragment:last-child { border-top-right-radius: 4px; border-bottom-right-radius: 4px;
}
.urgent { background: #c9575e; background: -moz-linear-gradient(top, #c9575e 0%, #c12e41 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c9575e), color-stop(100%, #c12e41)); background: -webkit-linear-gradient(top, #c9575e 0%, #c12e41 100%); background: -o-linear-gradient(top, #c9575e 0%, #c12e41 100%); background: -ms-linear-gradient(top, #c9575e 0%, #c12e41 100%); background: linear-gradient(to bottom, #c9575e 0%, #c12e41 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9575e', endColorstr='#c12e41',GradientType=0 );
}
.active { background: #d6ac6e; background: -moz-linear-gradient(top, #d6ac6e 0%, #cc9e52 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d6ac6e), color-stop(100%, #cc9e52)); background: -webkit-linear-gradient(top, #d6ac6e 0%, #cc9e52 100%); background: -o-linear-gradient(top, #d6ac6e 0%, #cc9e52 100%); background: -ms-linear-gradient(top, #d6ac6e 0%, #cc9e52 100%); background: linear-gradient(to bottom, #d6ac6e 0%, #cc9e52 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6ac6e', endColorstr='#cc9e52',GradientType=0 );
}
.newCount { background: #6db683; background: -moz-linear-gradient(top, #6db683 0%, #569b6d 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6db683), color-stop(100%, #569b6d)); background: -webkit-linear-gradient(top, #6db683 0%, #569b6d 100%); background: -o-linear-gradient(top, #6db683 0%, #569b6d 100%); background: -ms-linear-gradient(top, #6db683 0%, #569b6d 100%); background: linear-gradient(to bottom, #6db683 0%, #569b6d 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db683', endColorstr='#569b6d',GradientType=0 );
}
.newFromBatch { background: #7f8cc4; background: -moz-linear-gradient(top, #7f8cc4 0%, #6477ac 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7f8cc4), color-stop(100%, #6477ac)); background: -webkit-linear-gradient(top, #7f8cc4 0%, #6477ac 100%); background: -o-linear-gradient(top, #7f8cc4 0%, #6477ac 100%); background: -ms-linear-gradient(top, #7f8cc4 0%, #6477ac 100%); background: linear-gradient(to bottom, #7f8cc4 0%, #6477ac 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7f8cc4', endColorstr='#6477ac',GradientType=0 );
}
.markers { position: absolute; top: 0; bottom: 0; left: 0; right: 0; opacity: 0; visibility: hidden; -webkit-transition: opacity .4s ease-in;
}
.markers.loaded { visibility: visible; opacity: 1;
}
.marker { -webkit-box-sizing: border-box; position: absolute; bottom: -2em; top: 0; border-left: 2px solid #e6e6e6;
}
.marker-number { position: absolute; padding-left: .5em; bottom: 0; text-align: right;
}
.marker:last-child .marker-number { right: 0; padding-left: 0; padding-right: .5em;
}
.graph-key { margin: 20px 0 0 210px;
}
.graph-key-item { display: inline-block; margin-right: 1.5em;
}
.graph-key-dot { display: inline-block; width: 1em; height: 1em; border-radius: 50%; margin-right: .5em;
}

Dashboard Graph - Script Codes JS Codes


var graph = (function(){ var urgentTitle = "Urgent", $graph = $('.graph'), $barContainer = $graph.find('.graph-bars'), $markers = $('.markers'), $graphTitles = $('.graph-titles'), max = null, limit = null; var init = function(data){ max = getMaxValue(data); limit = max + Math.ceil(max * 0.05); $barContainer.empty(); $markers.empty(); $graphTitles.empty(); $('#urgent-title').text(urgentTitle); setMarkers($markers, limit); if (data.length) buildTeamRows($barContainer, $graphTitles, data, limit); else buildUserRows($barContainer, $graphTitles, data, limit); }; // return a values percentage in relation to the limit var getPercentage = function(value, limit) { return value / limit * 100 + "%"; }; var getMaxValue = function(data) { var largest = 0; var sum = 0; if (data.length) { for (x=0;x<data.length;x++) { sum = data[x].active + data[x].newCount + data[x].newFromBatch; if (sum > largest) { largest = sum; } } } else { largest = Math.max(data.active, data.newCount, data.newFromBatch); } return largest; }; var setMarkers = function($selector, limit) { var increment = limit / 5; var value = 0; var values = []; var leftOffset = 0; // Create array of marker values while(value < limit) { values.push(Math.round(value)); value += increment; } values.push(limit); for (var x=0;x<values.length;x++) { var $markerTmpl = $('<div class="marker"><span class="marker-number"></span></div>'); leftOffset = getPercentage(values[x], limit); $markerTmpl.css({ 'left': leftOffset }).find('.marker-number').text(values[x]); $selector.append($markerTmpl); } $selector.addClass('loaded'); }; //Build each individual graph based on selector, data, and max value var buildTeamRows = function($barSelector, $titleSelector, data, limit) { var percentage; // Loop through data for (var x=0;x<data.length;x++) { var titleClass = null; var titleCount = 0; var $graphBar = $('<div class="graph-bar"></div>') .attr('id', 'userGraph-' + data[x].userId); $barSelector.append($graphBar); // Render each fragment renderFragment($graphBar, 'urgent', data[x].urgent, limit); renderFragment($graphBar, 'active', data[x].active - data[x].urgent, limit); renderFragment($graphBar, 'newCount', data[x].newCount, limit); renderFragment($graphBar, 'newFromBatch', data[x].newFromBatch, limit); // Calculate largest fragment value var largest = 0; $.each(data[x], function(index, value){ if ($.isNumeric(value)){ if (value > largest) { largest = value; titleClass = index; titleCount = value; } } }); // If Active is greatest value, Check if urgent portion of active is greater than active if (titleClass === 'active' && data[x].urgent >= (data[x].active - data[x].urgent)) { titleClass = 'urgent'; titleCount = data[x].urgent; } // Render row meta-data var $titleSet = $('<div class="graph-title"><div class="graph-title-name"></div><div class="graph-title-count"></div></div>'); $titleSet.find('.graph-title-name').text(data[x].userName); $titleSet.find('.graph-title-count').addClass(titleClass).text(titleCount); $titleSelector.append($titleSet); } }; var renderFragment = function($selector, type, value, limit) { var $rowFragmentTmpl = $('<div class="graph-bar-fragment"></div>'); var percentage = getPercentage(value, limit); $rowFragmentTmpl.attr('data-value', value); $selector.append($rowFragmentTmpl.addClass(type)); setTimeout(function(){ $rowFragmentTmpl.css({'width': percentage}); }, 1); }; var buildUserRows = function($barSelector, $titleSelector, data, limit) { renderUserRow($barSelector, $titleSelector, 'urgent', data.urgent, limit, urgentTitle); renderUserRow($barSelector, $titleSelector, 'active', data.active, limit, 'Active'); renderUserRow($barSelector, $titleSelector, 'newCount', data.newCount, limit, 'New'); renderUserRow($barSelector, $titleSelector, 'newFromBatch', data.newFromBatch, limit, 'New From Batch'); }; var renderUserRow = function($barSelector, $titleSelector, type, value, limit, title) { var percentage = getPercentage(value, limit); var $graphBar = $('<div class="graph-bar graph-bar-single"></div>').attr({'id' : 'userGraph-' + type, 'data-value': value}); $barSelector.append($graphBar); setTimeout(function(){ $graphBar.css({'width': percentage}).addClass(type); },1); var $titleSet = $('<div class="graph-title"><div class="graph-title-name"></div><div class="graph-title-count"></div></div>'); $titleSet.find('.graph-title-name').text(title); $titleSet.find('.graph-title-count').addClass(type).text(value); $titleSelector.append($titleSet); }; return { init: init }
})();
// Document ready
$(function(){ // Dummy Data var dataSet = [ { active: 5, newCount: 4, newFromBatch: 40, urgent: 1, userId: "molly", userName: "Molly" }, { active: 21, newCount: 2, newFromBatch: 5, urgent: 10, userId: "jack", userName: "Jack" }, { active: 25, newCount: 4, newFromBatch: 3, urgent: 20, userId: "tracy", userName: "Tracy" }, { active: 10, newCount: 24, newFromBatch: 4, urgent: 2, userId: "nolan", userName: "Nolan" }, ]; var dataSingle = { active: 25, newCount: 4, newFromBatch: 3, urgent: 20, userId: "ryan", userName: "Ryan Scofield" }; // Initialize Graph graph.init(dataSet); $('#teamGraph').on('click', function(e){ graph.init(dataSet); }); $('#userGraph').on('click', function(e){ graph.init(dataSingle); });
});
Dashboard Graph - Script Codes
Dashboard Graph - Script Codes
Home Page Home
Developer Mark Michon
Username markmichon
Uploaded January 20, 2023
Rating 4
Size 6,551 Kb
Views 6,072
Do you need developer help for Dashboard Graph?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mark Michon (markmichon) Script Codes
Name
Animated Search Icon
Scroll-dependent Fixed Nav
DataTables Custom Filter Demo
Clickable Dark Button
Animated Graph
Flex-demo
Responsive Images
Moving gradient
CSS Heart
Dim Extra Content
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!