Simple SVG Charts
How do I make an simple svg charts?
What is a simple svg charts? How do you make a simple svg charts? This script and codes were developed by Darryl Huffman on 07 January 2023, Saturday.
Simple SVG Charts - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple SVG Charts</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <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>
<h1>Simple SVG Charts</h1>
<div id="returns_chart" class="chart"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Simple SVG Charts - Script Codes CSS Codes
body, html, .section { padding: 0px; margin: 0px; height: 100%; width: 100%; background-color: #FFF; overflow: hidden;
}
@font-face { font-family: 'lineto-brown-bold'; src: url("https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-bold/fonts/lineto-brown-bold.eot"); src: url("https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-bold/fonts/lineto-brown-bold.eot?#iefix") format("embedded-opentype"), url("https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-bold/fonts/lineto-brown-bold.woff") format("woff"), url("https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-bold/fonts/lineto-brown-bold.ttf") format("truetype"), url("https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-bold/fonts/lineto-brown-bold.svg#lineto-brown-bold") format("svg"); font-style: normal; font-weight: normal;
}
@font-face { font-family: 'lineto-brown-boldalt'; src: url("https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-bold/fonts/lineto-brown-boldalt.eot"); src: url("https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-bold/fonts/lineto-brown-boldalt.eot?#iefix") format("embedded-opentype"), url("https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-bold/fonts/lineto-brown-boldalt.woff") format("woff"), url("https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-bold/fonts/lineto-brown-boldalt.ttf") format("truetype"), url("https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-bold/fonts/lineto-brown-boldalt.svg#lineto-brown-boldalt") format("svg"); font-style: normal; font-weight: normal;
}
@font-face { font-family: 'lineto-brown-reclinbold'; src: url("https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-bold/fonts/lineto-brown-reclinbold.eot"); src: url("https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-bold/fonts/lineto-brown-reclinbold.eot?#iefix") format("embedded-opentype"), url("https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-bold/fonts/lineto-brown-reclinbold.woff") format("woff"), url("https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-bold/fonts/lineto-brown-reclinbold.ttf") format("truetype"), url("https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-bold/fonts/lineto-brown-reclinbold.svg#lineto-brown-reclinbold") format("svg"); font-style: normal; font-weight: normal;
}
@font-face { font-family: 'lineto-brown-reclinboldalt'; src: url("https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-bold/fonts/lineto-brown-reclinboldalt.eot"); src: url("https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-bold/fonts/lineto-brown-reclinboldalt.eot?#iefix") format("embedded-opentype"), url("https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-bold/fonts/lineto-brown-reclinboldalt.woff") format("woff"), url("https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-bold/fonts/lineto-brown-reclinboldalt.ttf") format("truetype"), url("https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-bold/fonts/lineto-brown-reclinboldalt.svg#lineto-brown-reclinboldalt") format("svg"); font-style: normal; font-weight: normal;
}
@font-face { font-family: 'lineto-brown-light'; src: url("https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-light/fonts/lineto-brown-light.eot"); src: url("https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-light/fonts/lineto-brown-light.eot?#iefix") format("embedded-opentype"), url("https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-light/fonts/lineto-brown-light.woff") format("woff"), url("https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-light/fonts/lineto-brown-light.ttf") format("truetype"), url("https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-light/fonts/lineto-brown-light.svg#lineto-brown-light") format("svg"); font-style: normal; font-weight: normal;
}
@font-face { font-family: 'lineto-brown-reclinlight'; src: url("https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-light/fonts/lineto-brown-reclinlight.eot"); src: url("https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-light/fonts/lineto-brown-reclinlight.eot?#iefix") format("embedded-opentype"), url("https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-light/fonts/lineto-brown-reclinlight.woff") format("woff"), url("https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-light/fonts/lineto-brown-reclinlight.ttf") format("truetype"), url("https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-light/fonts/lineto-brown-reclinlight.svg#lineto-brown-reclinlight") format("svg"); font-style: normal; font-weight: normal;
}
@font-face { font-family: 'lineto-brown-reclinregular'; src: url("https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-regular/fonts/lineto-brown-reclinregular.eot"); src: url("https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-regular/fonts/lineto-brown-reclinregular.eot?#iefix") format("embedded-opentype"), url("https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-regular/fonts/lineto-brown-reclinregular.woff") format("woff"), url("https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-regular/fonts/lineto-brown-reclinregular.ttf") format("truetype"), url("https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-regular/fonts/lineto-brown-reclinregular.svg#lineto-brown-reclinregular") format("svg"); font-style: normal; font-weight: normal;
}
@font-face { font-family: 'lineto-brown-regular'; src: url("https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-regular/fonts/lineto-brown-regular.eot"); src: url("https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-regular/fonts/lineto-brown-regular.eot?#iefix") format("embedded-opentype"), url("https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-regular/fonts/lineto-brown-regular.woff") format("woff"), url("https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-regular/fonts/lineto-brown-regular.ttf") format("truetype"), url("https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-regular/fonts/lineto-brown-regular.svg#lineto-brown-regular") format("svg"); font-style: normal; font-weight: normal;
}
@font-face { font-family: 'lineto-brown-reclinregularalt'; src: url("https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-regular/fonts/lineto-brown-reclinregularalt.eot"); src: url("https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-regular/fonts/lineto-brown-reclinregularalt.eot?#iefix") format("embedded-opentype"), url("https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-regular/fonts/lineto-brown-reclinregularalt.woff") format("woff"), url("https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-regular/fonts/lineto-brown-reclinregularalt.ttf") format("truetype"), url("https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-regular/fonts/lineto-brown-reclinregularalt.svg#lineto-brown-reclinregularalt") format("svg"); font-style: normal; font-weight: normal;
}
@font-face { font-family: 'lineto-brown-regularalt'; src: url("https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-regular/fonts/lineto-brown-regularalt.eot"); src: url("https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-regular/fonts/lineto-brown-regularalt.eot?#iefix") format("embedded-opentype"), url("https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-regular/fonts/lineto-brown-regularalt.woff") format("woff"), url("https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-regular/fonts/lineto-brown-regularalt.ttf") format("truetype"), url("https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-regular/fonts/lineto-brown-regularalt.svg#lineto-brown-regularalt") format("svg"); font-style: normal; font-weight: normal;
}
@font-face { font-family: 'lineto-brown-reclinthin'; src: url("https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-thin/fonts/lineto-brown-reclinthin.eot"); src: url("https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-thin/fonts/lineto-brown-reclinthin.eot?#iefix") format("embedded-opentype"), url("https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-thin/fonts/lineto-brown-reclinthin.woff") format("woff"), url("https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-thin/fonts/lineto-brown-reclinthin.ttf") format("truetype"), url("https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-thin/fonts/lineto-brown-reclinthin.svg#lineto-brown-reclinthin") format("svg"); font-style: normal; font-weight: normal;
}
@font-face { font-family: 'lineto-brown-thin'; src: url("https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-thin/fonts/lineto-brown-thin.eot"); src: url("https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-thin/fonts/lineto-brown-thin.eot?#iefix") format("embedded-opentype"), url("https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-thin/fonts/lineto-brown-thin.woff") format("woff"), url("https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-thin/fonts/lineto-brown-thin.ttf") format("truetype"), url("https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-thin/fonts/lineto-brown-thin.svg#lineto-brown-thin") format("svg"); font-style: normal; font-weight: normal;
}
.full { width: 100%; height: 100%;
}
.bright { background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/223954/bg_white.jpg); background-attachment: fixed;
}
.white { background-color: #FFF;
}
.grey { background-color: #f5f5f5;
}
.dark { background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/223954/bg_black.jpg); background-attachment: fixed;
}
.clear-fix { clear: both;
}
.nopad_bottom { padding-bottom: 0px !important;
}
.nopad_top { padding-top: 0px !important;
}
h1 { text-align: center; font-family: lineto-brown-light; letter-spacing: -2px; max-width: 12.8em; margin: 10vh auto 0 auto; font-weight: 100; color: #DDD; font-size: 3.323em; line-height: 1.2em; text-transform: none; -moz-osx-font-smoothing: auto; -webkit-font-smoothing: subpixel-antialiased;
}
.chart { position: relative; width: 100%; max-width: 800px; margin: 30px auto;
}
.chart .range, .chart .year { background-color: #FFF; width: 100% !important;
}
.chart svg { cursor: crosshair;
}
.chart .titles { list-style-type: none; margin: 0; padding: 10px 0 20px 0;
}
.chart .titles li { font-family: lineto-brown-light; text-align: center; list-style-type: none; float: left; font-size: 1.323em; font-weight: bold;
}
.chart .data_mouse { position: fixed; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); font-family: Arial, sans-serif; padding: 8px 12px 0px 12px; min-width: 100px; background-color: #FFF; color: #666; border-radius: 3px;
}
.chart .data_mouse ul { list-style-type: none; padding: 0px; margin: 0px;
}
.chart .data_mouse ul li { text-align: center; list-style-type: none;
}
.chart .data_mouse ul li p { text-align: left; font-size: 13px; font-family: sans-serif; margin-bottom: 10px; margin-top: 4px; font-weight: bold;
}
.chart .range { margin-top: -4px;
}
.chart .range div.mdate { float: left; text-align: center; float: left; font-family: lineto-brown-light; font-size: 0.70em; margin-top: 0px; max-width: 39.881em; margin: 0 auto; text-align: center; line-height: 1.6em; letter-spacing: 0px; font-weight: 300; font-style: normal; color: #ABABAB; padding-top: 5px; padding-bottom: 5px; -moz-osx-font-smoothing: auto; -webkit-font-smoothing: subpixel-antialiased;
}
.chart .year { width: 99%; margin: 0 auto; padding-bottom: 10px;
}
.chart .year .ydate { font-size: 14px; font-family: lineto-brown-light; -moz-osx-font-smoothing: auto; -webkit-font-smoothing: subpixel-antialiased; padding-bottom: 5px; float: left; color: #757575; text-align: center; box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2), -1px 0px 0px rgba(0, 0, 0, 0.2);
}
Simple SVG Charts - Script Codes JS Codes
var go = true;
if(window.location.hash == '#demo'){ setTimeout(function(){ go = false; }, 9500);
}
kindChart($('#returns_chart'), { colors: ['27,231,255', '110,235,131', '228,255,26','232,170,20','255,87,20'], opacity: 1, height: '250', width: '100%', period: 12, max_y: 100, data:[ [ 'Our Returns', [ ['2015', '04',501], ['2015', '05',423], ['2015', '06',384], ['2015', '07',326], ['2015', '08',446], ['2015', '09',312], ['2015', '10',525], ['2015', '11',765], ['2015', '12',841], ['2016', '01',916], ['2016', '02',926], ['2016', '03',841], ['2016', '04',768] ] ], [ 'Their Returns', [ ['2015', '04',329], ['2015', '05',254], ['2015', '06',235], ['2015', '07',207], ['2015', '08',382], ['2015', '09',248], ['2015', '10',375], ['2015', '11',568], ['2015', '12',429], ['2016', '01',210], ['2016', '02',441], ['2016', '03',529], ['2016', '04',612] ] ], [ 'His Returns', [ ['2015', '04',108], ['2015', '05',192], ['2015', '06',225], ['2015', '07',185], ['2015', '08',277], ['2015', '09',268], ['2015', '10',296], ['2015', '11',471], ['2015', '12',229], ['2016', '01',610], ['2016', '02',741], ['2016', '03',629], ['2016', '04',812] ] ], [ 'Her Returns', [ ['2015', '04',202], ['2015', '05',272], ['2015', '06',215], ['2015', '07',145], ['2015', '08',158], ['2015', '09',195], ['2015', '10',176], ['2015', '11',283], ['2015', '12',429], ['2016', '01',510], ['2016', '02',441], ['2016', '03',329], ['2016', '04',412] ] ], [ 'Johns Lunch', [ ['2015', '04',102], ['2015', '05',183], ['2015', '06',168], ['2015', '07',212], ['2015', '08',178], ['2015', '09',108], ['2015', '10',83], ['2015', '11',54], ['2015', '12',78], ['2016', '01',109], ['2016', '02',189], ['2016', '03',254], ['2016', '04',201] ] ] ]
});
/* ACTUAL SCRIPT, USAGE ABOVE */
function kindChart(element, options) { options = $.extend( {}, { ranges: true, width: '100%', height: '250', inverted: false, period: false, opacity: 0.5 }, options); console.log(options); var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); svg.setAttribute('height',options.height); svg.setAttribute('width', options.width); svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg'); svg.setAttribute('preserveAspectRatio', 'none'); svg.setAttribute('viewBox', '0 0 100 100'); element.append('<div class="range"></div>'); element.append('<div class="year"></div>'); element.append('<div class="data_mouse"></div>'); element.prepend('<ul class="titles"></ul>'); var highest = 0; for(var y = 0; y < options.data.length; y++){ for(var x = 0; x < options.data[y][1].length; x++){ if(highest < options.data[y][1][x][2]) { highest = options.data[y][1][x][2] + 10; } } } if(options.period == false) { var lengthe = 0; for(var y = 0; y < options.data.length; y++){ if(length < options.data[y][1].length) { console.log(options.data[y][1].length); lengthe = options.data[y][1].length; } } options.period = lengthe; } var Xfactor = 100 / (options.period - 1); var Yfactor = options.max_y / highest; /* DRAW CHART */ var iteration = 0; var svg_increment_path = document.createElementNS('http://www.w3.org/2000/svg', 'path'); var increment_path = ''; var width_set = 0; for(var y = 0; y < options.data.length; y++) { iteration++; var svg_path = document.createElementNS('http://www.w3.org/2000/svg', 'path'); var path = ''; element.find('ul.titles').append('<li style="color: rgb('+options.colors[y]+'); width: '+ (100 / options.data.length) +'%;">'+options.data[y][0]+'</li>'); for(var x = 0; x <= options.data[y][1].length - 1; x++) { if(x > options.data[y][1].length - options.period - 1) { width_set++; if(iteration == 1){ increment_path += 'M '+ ((100 / (options.period - 1)) * x) + ' 0 L '+ ((100 / (options.period - 1)) * x) + ' 100 '; if((x - (options.data[y][1].length - options.period)) != 0){ element.find('.range').append('<div class="mdate" style="width: '+ 100 / (options.period - 1) +'%">'+ options.data[y][1][x][1] +'</div>'); } if(options.data[y][1][x][1] == '12') { element.find('.year').append('<div class="ydate" style="width: '+ ((width_set - 1) * (100 / (options.period - 1))) +'%;">'+ options.data[y][1][x][0] +'</div>'); width_set = 0; } else if(x == (options.period - 1)) { element.find('.year').append('<div class="ydate" style="width: '+ ((width_set + 1) * (100 / (options.period - 1))) +'%;">'+ options.data[y][1][x][0] +'</div>'); } } if(x == options.data[y][1].length - options.period) { if(options.inverted == true) { var pre = 'M 0 0 L 0 '; var add = ' L 100 0'; } else { var pre = 'M 0 100 L 0 '; var add = ' L 100 100'; } path += pre + (100 - options.data[y][1][x][2] * Yfactor) + ' '; } else if(x == options.data[y][1].length - 1) { path += 'L '+ ((x - (options.data[y][1].length - options.period)) * Xfactor) +' '+ (100 - options.data[y][1][x][2] * Yfactor) + add; } else { path += 'L '+ ((x - (options.data[y][1].length - options.period)) * Xfactor) +' '+ (100 - options.data[y][1][x][2] * Yfactor) + ' '; } } } svg_increment_path.setAttribute('stroke', 'rgba(0,0,0,0.1)'); svg_increment_path.setAttribute('stroke-width', '0.15'); svg_increment_path.setAttribute('d', increment_path); svg.appendChild(svg_increment_path); svg_path.setAttribute('fill', 'rgba('+options.colors[y]+','+options.opacity+')'); svg_path.setAttribute('d', path); svg.appendChild(svg_path); } element.find('ul, .range, .year').append('<div class="clear-fix"></div>'); element.find('.titles').after(svg); element.mousemove(function(e){ if(go == true){ var objLeft = $(this).offset().left; var objRight = $(this).offset().right; var objTop = $(this).offset().top; var section = Math.floor((e.pageX / ($(this).width() / (options.period - 1)))); var left = ((section - 1) * ($(this).width() / (options.period - 1))) + (($(this).width() / (options.period - 1)) / 2); var right = 'initial'; if(left + $(this).find('.data_mouse').width() >= (objLeft + $(this).width())- $(this).find('.data_mouse').width()) { left = 'initial'; right = ((options.period - 1) - (section - 2)) * ($(this).width() / (options.period - 1)); } /*$(this).find('.data_mouse').css({ left: left, right: right, top: (e.pageY - objTop) - 14, display: 'block' }).html('<ul></ul>');*/ $(this).find('.data_mouse').css({ left: e.pageX + 10, top: e.pageY, display: 'block' }).html('<ul></ul>'); var color = "#666"; var diff = 0; for(var i = 0; i < options.data.length; i++){ if(options.data[i][1][section][2] > options.data[i][1][section - 1][2]) { color = "#0C0"; diff = '+ ' + (options.data[i][1][section][2] - options.data[i][1][section - 1][2]); } else if(options.data[i][1][section][2] < options.data[i][1][section - 1][2]) { color = "#C00"; diff = '- ' + (options.data[i][1][section - 1][2] - options.data[i][1][section][2]); } element.find('.data_mouse ul').append('<li><span style="color: rgb('+ options.colors[i] +');">'+ options.data[i][0] +'</span><p><span class="return">$'+ options.data[i][1][section][2] +'</span><span style="float: right; color: '+ color +'; font-weight: normal;">'+ diff +'</span></p></li>'); } } }); element.mouseout(function(e){ $(this).find('.data_mouse').css({ left: 0, top: 0, display: 'none' }); $(this).find('.out ul').html(''); });
}
Developer | Darryl Huffman |
Username | darrylhuffman |
Uploaded | January 07, 2023 |
Rating | 4.5 |
Size | 6,694 Kb |
Views | 6,072 |
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!
Name | Size |
BLACKHOLE - A Canvas Experiment | 3,676 Kb |
Orbit | 3,173 Kb |
Fur | 2,938 Kb |
Spilled Paint | 3,894 Kb |
Let it snow, let it snow, code the snow. | 2,884 Kb |
Pixelot | 3,080 Kb |
Red Oak | 4,332 Kb |
Simple SVG Charts | 6,694 Kb |
End of the Rainbow | 3,722 Kb |
LightBulb | 2,561 Kb |
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!
Name | Username | Size |
Sencha Touch 2.3.1 Basic Grid Example | Trozdol | 2,770 Kb |
Starting out with Ember.JS | Cfleschhut | 4,808 Kb |
Css3 loader | Clknap | 2,391 Kb |
Cartoon Bomb | Tcmulder | 4,929 Kb |
Simple Login Form Template | Banunn | 3,571 Kb |
Static Image to Video Block | Grayghostvisuals | 4,864 Kb |
Flexbox playground | Enxaneta | 5,418 Kb |
Exploding Text | Jjmartucci | 4,749 Kb |
Alumni ECA | MatheusLima92 | 3,777 Kb |
CSS Flip Animation | Bbodine1 | 2,525 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!