Simple SVG Charts

Size
6,694 Kb
Views
6,072

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 Previews

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('');	});
}
Simple SVG Charts - Script Codes
Simple SVG Charts - Script Codes
Home Page Home
Developer Darryl Huffman
Username darrylhuffman
Uploaded January 07, 2023
Rating 4.5
Size 6,694 Kb
Views 6,072
Do you need developer help for Simple SVG Charts?

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!

Darryl Huffman (darrylhuffman) Script Codes
Create amazing marketing copy 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!