Colorful Slider Graph

Developer
Aaron Levine
Size
5,199 Kb
Views
4,048
  1. Colorful Slider Graph Previews
  2. Colorful Slider Graph HTML Codes
  3. Colorful Slider Graph CSS Codes
  4. Colorful Slider Graph JS Codes

How do I make an colorful slider graph?

What is a colorful slider graph? How do you make a colorful slider graph? This script and codes were developed by Aaron Levine on 30 January 2023, Monday.

Colorful Slider Graph Previews
IQ Test

Colorful Slider Graph - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Colorful Slider Graph</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="graph"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Colorful Slider Graph - Script Codes CSS Codes

html, body { width: 100%; height: 100%; box-sizing: border-box;
}
#graph { width: 100%; height: 100%; padding: 3em 1.5em; box-sizing: border-box;
}
/** Main **/
.graph-main { position: relative; height: 100%; width: 100%; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; /** Top **/ /** Bottom Row **/
}
.graph-main > .graph-top { height: 100%; /** Left Title **/ /** Left Scale **/ /** Data **/
}
.graph-main > .graph-top > .graph-l_title { height: 100%; width: 5%; text-align: center; vertical-align: middle;
}
.graph-main > .graph-top > .graph-l_scale { position: relative; width: 10%; height: 100%; /** Left Scale Container **/
}
.graph-main > .graph-top > .graph-l_scale > .graph-l_scale_container { display: inline-block; width: 100%; height: 100%; /** Tic **/
}
.graph-main > .graph-top > .graph-l_scale > .graph-l_scale_container > .graph-tic { position: absolute; display: inline-block; box-sizing: border-box; width: 100%; text-align: right; box-sizing: border-box; border-bottom: dotted 1px #666;
}
.graph-main > .graph-top > .graph-l_scale > .graph-l_scale_container > .graph-buffer_tic { position: relative; display: inline-block; display: none\9; box-sizing: border-box; width: 100%; visibility: hidden;
}
.graph-main > .graph-top > .graph-data { position: relative; height: 100%; width: 85%; border-left: solid 1px #666; border-bottom: solid 1px #666; /** Data Container **/
}
.graph-main > .graph-top > .graph-data > .graph-data_container { display: inline-block; width: 100%; height: 100%; /** Bar Main **/
}
.graph-main > .graph-top > .graph-data > .graph-data_container > .graph-bar-main { position: absolute; bottom: 0; width: 1em; margin-left: -0.5em; min-height: 1px; background-color: #000; /** Bar Handle **/
}
.graph-main > .graph-top > .graph-data > .graph-data_container > .graph-bar-main > .graph-bar-handle { position: absolute; box-sizing: border-box; bottom: 100%; display: inline-block; height: 1em; margin-bottom: -0.5em; width: 100%; background: #eee; border: solid 1px #999; border-radius: 0.25em; cursor: ns-resize;
}
.graph-main > .graph-top > .graph-data > .graph-data_container > .graph-bar-main > .graph-bar-handle:after { content: '='; display: inline-block; width: 100%; height: 100%; text-align: center; vertical-align: top; line-height: 100%; color: #666;
}
.graph-main > .graph-b_row { /** Bottom Corner **/ /** Bottom Scale **/ /** Bottom Title **/
}
.graph-main > .graph-b_row > .graph-b_scale { position: relative; padding-bottom: 2em; /** Tic */
}
.graph-main > .graph-b_row > .graph-b_scale > .graph-tic { position: absolute; display: inline-block; height: 2em; box-sizing: border-box; border-left: dotted 1px #666;
}
.graph-main > .graph-b_row > .graph-b_title { text-align: center;
}

Colorful Slider Graph - Script Codes JS Codes

var SliderGraph = (function(){ /** NewElement **/ function NewElement(type, cls) { var el = document.createElement(type); el.className = cls; return el; } /** SliderGraph Constructor **/ var SliderGraph = function(opts) { var opts = opts || {}; this.x_title = opts.x_title || ''; this.x_min = opts.x_min || 0; this.x_max = opts.x_max || 100; this.x_spacing = opts.x_spacing || 10; this.y_title = opts.y_title || ''; this.y_min = opts.y_min || 0; this.y_max = opts.y_max || 100; this.y_spacing = opts.y_spacing || 10; this.bars = opts.bars || []; this.dragging_bar = null; for (var i=0, j=this.bars.length; i<j; i++) { if(this.bars[i]) this.bars[i].parent = this; } this.elements = { main: NewElement('table', 'graph-main'), top: NewElement('tr', 'graph-top'), l_title: NewElement('td', 'graph-l_title'), l_scale: NewElement('td', 'graph-l_scale'), l_scale_container: NewElement('div', 'graph-l_scale_container'), l_tics: [], data: NewElement('td', 'graph-data'), data_container: NewElement('div', 'graph-data_container'), b_row_1: NewElement('tr', 'graph-b_row'), b_row_2: NewElement('tr', 'graph-b_row'), b_corner_1: NewElement('td', 'graph-b_corner'), b_corner_2: NewElement('td', 'graph-b_corner'), b_scale: NewElement('td', 'graph-b_scale'), b_tics: [], b_title: NewElement('td', 'graph-b_title') } } /** SliderGraph.DragEnd **/ SliderGraph.DragEnd = function(e) { this.dragging_bar = null; } /** SliderGraph.Drag **/ SliderGraph.Drag = function(e) { if(this.dragging_bar){ e.preventDefault(); var y = e.clientY , y_val , data_rect = this.elements.data.getBoundingClientRect() , height = data_rect.height || (data_rect.bottom - data_rect.top) ; if(isNaN(y)) y = e.originalEvent.touches[0].clientY; y -= this.elements.data.getBoundingClientRect().top; y_val = ((height - y) / height) * (this.y_max - this.y_min); y_val = Math.min(this.y_max, Math.max(this.y_min, y_val)); this.dragging_bar.y = y_val; this.dragging_bar.Update(); this.dragging_bar.Drag(); } } /** SliderGraph.Render **/ SliderGraph.prototype.Render = function() { with (this.elements) { main.appendChild(top); main.appendChild(b_row_1); main.appendChild(b_row_2); top.appendChild(l_title); top.appendChild(l_scale); top.appendChild(data); l_scale.appendChild(l_scale_container); data.appendChild(data_container); b_corner_1.setAttribute('colspan', 2); b_row_1.appendChild(b_corner_1); b_row_1.appendChild(b_scale); b_corner_2.setAttribute('colspan', 2); b_row_2.appendChild(b_corner_2); b_row_2.appendChild(b_title); } /** Add Titles **/ this.elements.l_title.innerHTML = this.y_title; this.elements.b_title.innerHTML = this.x_title; /** Add Scale **/ // X var index = this.x_min; while ( index <= this.x_max) { var tic = NewElement('div', 'graph-tic'); tic.innerHTML = index; tic.style.left = (100 * ((index) / (this.x_max - this.x_min))) + '%'; //tic.style.marginLeft = (tic.getBoundingClientRect().width / -2) + 'px'; this.elements.b_tics.push(tic); this.elements.b_scale.appendChild(tic); index += this.x_spacing; } // Y index = this.y_min; while ( index <= this.y_max ) { var tic = NewElement('div', 'graph-tic'); tic.innerHTML = index; tic.style.bottom = (100 * ((index) / (this.y_max - this.y_min))) + '%'; //tic.style.marginBottom = (tic.getBoundingClientRect().height / -2) + 'px'; this.elements.l_tics.push(tic); this.elements.l_scale_container.appendChild(tic); index += this.y_spacing; if(index > this.y_max){ var buffer_tic = NewElement('div', 'graph-buffer_tic'); buffer_tic.innerHTML = index - this.y_spacing; this.elements.l_scale_container.appendChild(buffer_tic); } } /** Add Bars **/ for(var i=0, j=this.bars.length; i<j; i++) this.elements.data_container.appendChild( this.bars[i].Render() ); $(document).on('mouseup touchend', SliderGraph.DragEnd.bind(this)); $(document).on('mousemove touchmove', SliderGraph.Drag.bind(this)); return this.elements.main; } SliderGraph.prototype.AppendTo = function(container) { container.appendChild( this.Render() ); } SliderGraph.Bar = (function(){ /** Bar Constructor **/ var Bar = function(opts) { var opts = opts || {}; this.x = opts.x || 0; this.y = opts.y || 0; this.color = opts.color || ''; this.DragStart = opts.DragStart || function(){}; this.Drag = opts.Drag || function(){}; this.DragEnd = opts.DragEnd || function(){}; this.parent = null; this.elements = { main: NewElement('div', 'graph-bar-main'), handle: NewElement('div', 'graph-bar-handle') } } /** Bar.DragStart **/ Bar.DragStart = function(e) { this.parent.dragging_bar = this; this.DragStart(); } /** Bar.DragEnd **/ Bar.DragEnd = function(e) { this.parent.dragging_bar = null; this.DragEnd(); } /** Bar.Render **/ Bar.prototype.Render = function() { var self = this; this.elements.main.appendChild(this.elements.handle); this.Update(); $(this.elements.handle).on('mousedown touchstart', Bar.DragStart.bind(this)); return this.elements.main; } /** Bar.Update **/ Bar.prototype.Update = function() { this.elements.main.style.backgroundColor = this.color; this.elements.main.style.left = (100 * this.x / (this.parent.x_max - this.parent.x_min)) + '%'; this.elements.main.style.height = (100 * this.y / (this.parent.y_max - this.parent.y_min)) + '%'; } return Bar; })(); return SliderGraph;
})();
/** * DEMO STUFF **/
function update_this()
{ var span = $( '<span style="position:absolute; bottom: 100%">'+ this.y.toFixed()+ '</span>' ); $(this.elements.handle).html(span); var handle_width = $(this.elements.handle).width(); var span_width = span.width(); span.css('margin-left', (span_width - handle_width) / -2); this.color = 'hsl('+(255 - (255 * this.y / 100))+', 100%, 50%)'
}
var sg = new SliderGraph({ x_title: 'X Axis', y_title: 'Y&nbsp;Axis', x_spacing: 5, y_spacing: 10, x_min: 0, y_min: 0, x_max: 60, y_max: 100, bars: [ new SliderGraph.Bar({x: 10, y: 20, Drag: update_this}), new SliderGraph.Bar({x: 20, y: 40, Drag: update_this}), new SliderGraph.Bar({x: 30, y: 60, Drag: update_this}), new SliderGraph.Bar({x: 40, y: 80, Drag: update_this}), new SliderGraph.Bar({x: 50, y: 90, Drag: update_this}) ]
});
$.each(sg.bars, update_this);
sg.AppendTo($('#graph')[0]);
$(document).on('touchmove', function(e){ e.preventDefault();
});
Colorful Slider Graph - Script Codes
Colorful Slider Graph - Script Codes
Home Page Home
Developer Aaron Levine
Username Aldlevine
Uploaded January 30, 2023
Rating 3.5
Size 5,199 Kb
Views 4,048
Do you need developer help for Colorful Slider 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!

Aaron Levine (Aldlevine) Script Codes
Name
CSS Spinning Wireframe Sphere
Progress
IOS-7 style slide-toggle
Mobile App Design
Sliding Single Select
Faceful Cubes
Pure CSS Rating Scale
Popup Modal
Canvas Falloff Test
Random Gradients - JS
Create amazing blog posts 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!