Guage

Developer
Roy
Size
5,653 Kb
Views
12,144
  1. Guage Previews
  2. Guage HTML Codes
  3. Guage CSS Codes
  4. Guage JS Codes

How do I make an guage?

What is a guage? How do you make a guage? This script and codes were developed by Roy on 15 November 2022, Tuesday.

Guage Previews
IQ Test

Guage - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Guage</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="outer">
<div id="chart"></div>
</div>
<!-- SVG syntax -->
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none">
<defs>	<linearGradient id="g-kpi-worst" x1="100%" y1="100%" x2="100%" y2="0%">	<stop stop-color="#ED145B" offset="0"/><stop stop-color="#F78D1E" offset="1"/>	</linearGradient> <linearGradient id="g-kpi-bad" x1="0%" y1="100%" x2="100%" y2="0%">
<stop stop-color="#F78D1E" offset="0"/><stop stop-color="#FFF200" offset="1"/>
</linearGradient>
</defs>
</svg> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Guage - Script Codes CSS Codes

#outer { height: 600px; width: 600px; /*border: solid 1px red;*/
}
#chart { /*border: solid 1px blue;*/ height: 100%; width: 100%;
}
svg { border: solid 1px green;
}
.arcs path { stroke : #ffffff; stroke-width : 0.1;
}
.label text { font-size: 4px; fill: #333333;
}
.label line { stroke: #333333; stroke-width: 0.4;
}
.dft-guage-alert-0 { fill: url(#g-kpi-worst);
}
.dft-guage-alert-1 { fill: url(#g-kpi-bad);
}
.dft-guage-alert-2 { fill: #88A61B;
}
.centerGroup circle { fill:none;
}
.centerGroup text { font-size: 10px; fill: #333333;
}
.markerGroup circle, .markerGroup polygon { fill: #333333;
}

Guage - Script Codes JS Codes

// Decision first ui rendering code
// Authors : [email protected]
// This code is dependent on D3 and JQuery
// Ensure the global dft namesapce is defined, with out overwriting
var DFT = (DFT === undefined) ? {} : DFT;
// Define the implementation of ui
(function(DFT) { // Extend DFT with the ui namespace var ui = $.extend(true, DFT, {ui:{}}).ui; // Convert Degrees to Radians for drawing D3 Arc Segments ui.deg2rad = function(deg) { return deg * Math.PI / 180; }; // Create a D3 scale function that returns degrees in a spread // centered on 0. Sets the domain for the scale to the provided // domain array passed as second parameter ui.degScale = function (spread, domain) { return d3.scale.linear()	.range([-1*spread/2,spread/2]) .domain(domain); }; // Create a modified D3 numberformat that uses B for billions and // capital K for thousands, with given precision ui.numberFormat = function (precision) { return function (val) { var siVal = d3.formatPrefix(val); siVal.symbol = siVal.symbol.replace(/G/, 'B').replace(/k/, 'K'); var gFormat = d3.format("." + precision + "g"); return gFormat(siVal.scale(val)) + " " + siVal.symbol; } }; // Return a d3 ready SVG Transformation function that places content // using polar coordinates. I.E. Angle of Rotation and distance // from center. Assuming an initial coordinate space where 0,0 is center // and -Y is up for distance. The function will convert positive distances to the // UP direction with a -1 multiplication. // Function takes two inputs deg scale function which can be created with degScale // and a distance scale which is likely a percentage scale on R of some circle. ui.polarCoordinateTx = function (angle, distance) { return function (d) { return 'rotate(' +angle(d) +') translate(0,' + -1*distance(d) +')'; } }
})(DFT);
// Selection is expected to be a d3 selection
guage = function(selection) { // property variables in closure // these are configurable var ringInsetPrct=0.15, ringWidthPrct=0.25, labelInsetPrct=0.10, minorTickSizePrct=0.09, minorTicksOffsetPrct=0, majorTicks=7, tickFormat=d3.format(',g'), minValue=0, maxValue=100, spread=180, alerts=[], value=0, valueXOffset=0, valueYOffset=0, valueFormat=null, valueMkrSize=2, valueMkrOffset=0, valueMkrLengthPrct=0.2, alertClass="dft-guage-alert"; // Private Variables set and used internally var minAngle= -90, maxAngle=90; /* Convert Degrees to Radians */ function deg2rad(deg) { return deg * Math.PI / 180; } /* Calculate the Angle in Degrees for a data value in the domain range */ /* TODO LET SCALE DO ALL THE WORK */ function newAngle (d,scale) { return minAngle + (scale(d) * spread);	} /* Calculate the distance from center as a percent of R - an offset */ function offset (offSetPrcnt) { return r-r*(offSetPrcnt); } /* Modified Value Formatter Based on D3.format */ function formatterFactory(precision) { return function customFormatter(val) { var siVal = d3.formatPrefix(val); siVal.symbol = siVal.symbol.replace(/G/, 'B').replace(/k/, 'K'); var gFormat = d3.format("." + precision + "g"); return gFormat(siVal.scale(val)) + " " + siVal.symbol; } } /* Return the SVG Transform to move an element to a particular poolarcoordinate based on value in scale */ function polarCoordinateTx(d,o, scale) { return 'rotate(' +newAngle(d,scale) +') translate(0,' + -1*offset(o) +')'; } function outerRadius() { return offset(ringInsetPrct); } function innerRadius() { return offset(ringInsetPrct + ringWidthPrct); } function alertData() { // Ensure at least one segment and that sengments cover full range var data = alerts.sort(d3.ascending); if (data.length == 0 || data[data.length - 1] < maxValue) { data.push(maxValue); } return data; } /* Arc Template Generator */ function arcGen(alertData, scale) { // define an Arc Template, all Angles in Radians return d3.svg.arc() .outerRadius(outerRadius()) .innerRadius(innerRadius()) // Start Angle is based on the prior alerts break point unless this is the first // arc segement where start angle is based on minValue .startAngle(function(d,i) { return deg2rad(newAngle((i>0)?alertData[i-1]:minValue,scale)); }) .endAngle(function(d) { return deg2rad(newAngle(d,scale)); }); } // Private drawing variables initialized durring init. var svg; var r; var centerTx; var arcGroup; var tickGroup; var cg; var mkg; // Set Default property values based on container function init(){ valueFormat=formatterFactory(3); // Base SVG Structure one time operation svg = selection.append('svg') .attr('viewBox',"0 0 100 100") .attr('class', "guage-svg"); // always 50 due to viewBox r=50; // Move the 0,0 coordinate to the center of the element centerTx = "translate(" + r + "," + r+ ")"; // Setup an SVG Group to hold Arcs arcGroup = svg.append('g') .attr('transform', centerTx) .attr("class", "arcs"); // Add a Group to hold Tick Marks tickGroup = svg.append('g') .attr('class', 'label') .attr('transform', centerTx); // Create a group to hold the Value lable and center circle cg = svg.append('g') .attr('class', 'centerGroup') .attr('transform', centerTx); // Draw a circle at center with radius equal to innerRadius cg.append('circle'); // Create and Draw Value Marker on the Inner Radius mkg = svg.append('g') .attr("class", "markerGroup") .attr('transform', centerTx); } function drawArcs(scale) { // Generate Data for Arc Segments and assemble Arc Template var arcData = alertData(); var arc = arcGen(arcData,scale); // Bind Alert Data to Arcs group and draw Arcs with template var arcs = arcGroup.selectAll('path').data(arcData); // Add New Arcs arcs.enter().append('path'); // Update Arc Properties for new and old arcs.attr('class', function(d,i){ return "arc " + alertClass + "-" + i;}) .attr('d', arc); // If Number of Arcs Shrink remove uneeded arcs.exit().remove(); } function drawTicks(scale) { // Generate Arrays for Major and Minor Tick values using d3 scale var mgTicks = scale.ticks(majorTicks); var minTicks = scale.ticks(2*majorTicks); // Draw the Major Ticks into lg var mgTickText = tickGroup.selectAll('text').data(mgTicks); // Add New Text where needed mgTickText.enter().append('text'); // update properties for new and old mgTickText.attr('text-anchor',"middle") .text(tickFormat) .attr('transform', function(d) { return polarCoordinateTx(d,labelInsetPrct, scale); }); mgTickText.exit().remove(); // Draw Minor Ticks into lg var minTickLine = tickGroup.selectAll('line').data(minTicks); minTickLine.enter().append('line'); minTickLine.attr({x1:0, x2:0, class:"minor-tick"}) .attr('transform', function(d) { return polarCoordinateTx(d,labelInsetPrct + minorTicksOffsetPrct, scale); }) .attr('y2',function(d,i) { return (i%2==0) ? r*(minorTickSizePrct) : r*(3*minorTickSizePrct/4); }) .attr('y1',function(d,i) { return (i%2==0) ? 0 : r*(minorTickSizePrct/4); }); minTickLine.exit().remove(); } // Main Render Function function c() { // Main Logic // Resize SVG // svg.attr('width', size).attr('height', size); // Setup a scale to determine angles for values var scale = d3.scale.linear()	.range([0,1])	.domain([minValue, maxValue]); // Draw the Arcs for Alert backgrounds drawArcs(scale); // Draw Tick Marks drawTicks(scale); // Draw center circle cg.select('circle').attr({cx:0,cy:0,r:innerRadius()}); // Draw the Value Text representation var valueText = cg.selectAll('text').data([value]); valueText.enter().append('text') valueText.attr({"text-anchor":"middle", x:r*valueXOffset, y:r*valueYOffset}).text(valueFormat(value)); var markerCircle = mkg.selectAll('circle').data([value]); markerCircle.enter().append('circle'); markerCircle.attr({cx:0,cy:0,r:valueMkrSize,"class":"marker-center"}) .attr('transform', polarCoordinateTx(value,ringInsetPrct + ringWidthPrct + valueMkrOffset, scale)); var markerTail = mkg.selectAll('polygon').data([value]); markerTail.enter().append("polygon"); markerTail.attr("points", valueMkrSize + ",0 " + -1*valueMkrSize + ",0 0," + -1*r*valueMkrLengthPrct) .attr('transform', polarCoordinateTx(value,ringInsetPrct + ringWidthPrct + valueMkrOffset, scale)); return c; } // Public properties Mehtods c.size = function(v) { if (v===undefined) return size; size = v; return c; }; c.ringInsetPrct = function(v) { if (v===undefined) return ringInsetPrct; ringInsetPrct = v; return c; }; c.ringWidthPrct = function(v) { if (v===undefined) return ringWidthPrct; ringWidthPrct = v; return c; }; c.minValue = function(v) { if (v===undefined) return minValue; minValue = v; return c; }; c.maxValue = function(v) { if (v===undefined) return maxValue; maxValue = v; return c; }; c.spread = function(v) { if (v===undefined) return spread; spread = v; minAngle= -1*spread/2; maxAngle=spread/2; return c; }; c.alerts = function(v) { if (v===undefined) return alerts; alerts = v; return c; }; c.value = function(v) { if (v===undefined) return value; value = v; return c; }; c.labelInsetPrct = function(v) { if (v===undefined) return labelInsetPrct; labelInsetPrct = v; return c; }; c.majorTicks = function(v) { if (v===undefined) return majorTicks; majorTicks = v; return c; }; c.minorTickSizePrct = function(v) { if (v===undefined) return minorTickSizePrct; minorTickSizePrct = v; return c; }; c.valueXOffset = function(v) { if (v===undefined) return valueXOffset; valueXOffset = v; return c; }; c.valueYOffset = function(v) { if (v===undefined) return valueYOffset; valueYOffset = v; return c; }; c.valueFormat = function(v) { if (v===undefined) return valueFormat; valueFormat = v; return c; }; c.tickFormat = function(v) { if (v===undefined) return tickFormat; tickFormat = v; return c; }; c.valueMkrSize = function(v) { if (v===undefined) return valueMkrSize; valueMkrSize = v; return c; }; c.valueMkrOffset = function(v) { if (v===undefined) return valueMkrOffset; valueMkrOffset = v; return c; }; c.valueMkrLengthPrct = function(v) { if (v===undefined) return valueMkrLengthPrct; valueMkrLengthPrct = v; return c; }; c.minorTicksOffsetPrct = function(v) { if (v===undefined) return minorTicksOffsetPrct; minorTicksOffsetPrct = v; return c; }; // Expose FormatFactory as a public method c.formatterFactory = formatterFactory; // Initialize and Return Object init(); return c;
}
var myChart = guage(d3.select("#chart")) .alerts([20,40,60,80]) .majorTicks(13) .spread(240) .value(72.345) .valueYOffset(-0.15) .valueMkrSize(2) .valueMkrOffset(-0.25) .valueMkrLengthPrct(-0.28) .labelInsetPrct(0.55) .minorTicksOffsetPrct(-0.15) .minorTickSizePrct(0.06) .call();
/*
setInterval(function() { myChart.alerts([22,22+Math.floor(Math.random() * 26),67]).majorTicks(5+ Math.floor(Math.random() * 15)) .value(Math.floor(Math.random() * 100)).call();
}, 1500);
*/
Guage - Script Codes
Guage - Script Codes
Home Page Home
Developer Roy
Username roygwells
Uploaded November 15, 2022
Rating 3
Size 5,653 Kb
Views 12,144
Do you need developer help for Guage?

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!

Roy (roygwells) Script Codes
Name
SVG Playground
Close ICon
Accordion Dropdown
Gradients
IIFE
SVG Path Experiments 2.0
Scoping Test
Modular Guage
A Pen by Roy
SVG Path Experiments
Create amazing sales emails 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!