Graphs and Snap.svg

Developer
Jon Christensen
Size
2,870 Kb
Views
54,648
  1. Graphs and Snap.svg Previews
  2. Graphs and Snap.svg HTML Codes
  3. Graphs and Snap.svg CSS Codes
  4. Graphs and Snap.svg JS Codes

How do I make an graphs and snap.svg?

Graphs built with Snap. Just to see how to go about doing it.. What is a graphs and snap.svg? How do you make a graphs and snap.svg? This script and codes were developed by Jon Christensen on 03 August 2022, Wednesday.

Graphs and Snap.svg Previews
IQ Test

Graphs and Snap.svg - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Graphs and Snap.svg</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <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! */ #svgLine { border: 2px dashed #ccc; margin: 10px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<svg id="svgLine" width="1200px" height="200px">
</svg>
<br>
<button id="add-green">Add Green</button> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://snapsvg.io/assets/js/snap.svg-min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Graphs and Snap.svg - Script Codes CSS Codes

#svgLine { border: 2px dashed #ccc; margin: 10px;
}

Graphs and Snap.svg - Script Codes JS Codes

$(document).ready(function(){ var s = Snap('#svgLine'); var points1 = [0,10,20,30,50,10,100,150,125,160,190,40,50]; var points2 = [100,50,75,150,10,20,50,60,70,100,120,90,10]; var points3 = [50,75,60,30,75,100,120,140,305,160,10,20,100]; function makeGrid(){ var dataLength = points1.length; var allData = points1.concat(points2, points3); var maxValue = Math.max.apply(null, allData); var minValue = Math.min.apply(null, allData); if (maxValue > $('#svgLine').height()){ $('#svgLine').height(maxValue+10); } // Creates the vertical lines in the graph for (var i=0; i<dataLength; i++) { var x = i*100; var xLine = s.line(x, minValue-10, x, maxValue+10).attr({ stroke: "#ccc", strokeWidth: 0.25 }); } // Creates the horizontal lines in the graph var w = dataLength*100; var delimiter = 50; var values = (maxValue+10)-(minValue-10); var offset = ((maxValue+10)%delimiter); for (var i=values; i > 0; i--){ if ((i-offset) % delimiter === 0){ // Change where lines appear by changing the delimiter (10 for every 10 units, 50 for 50, etc.) var yLine = s.line(0, i, w, i).attr({ stroke: '#ccc', strokeWidth: 0.25 }); } } } makeGrid(); function convertToPath(points){ var path = ''; for (var i=0; i<points.length; i++){ var x = i*100; var y = -points[i]+$('#svgLine').height(); // Convert points to how we like to view graphs if (i===0){ path += 'M'+x+','+y+' R'; } else if (i===points.length-1){ path += x+','+y; } else { path += x+','+y+','; } } return path; } function makePath(data, color){ var pathString = convertToPath(data); var graphHeight = $('#svgLine').height(); var fillString = pathString+' V'+graphHeight+' H0 Z'; function getDefaultPath(isFill){ var defaultPathString = 'M0,'+graphHeight+' H'; for (var i=0; i<data.length; i++) { if (i!==0){ defaultPathString += i*100+' '; } } if(isFill){ defaultPathString += 'V'+graphHeight+' H0 Z'; } return defaultPathString; } var path = s.path(getDefaultPath()).attr({ stroke: color, strokeWidth: 2, fill: 'transparent' }); var fill = s.path(getDefaultPath(true)).attr({ fill: color, fillOpacity: 0.25 }); path.animate({ path: pathString },500); fill.animate({ path: fillString },500); } makePath(points1, 'red'); makePath(points2, 'blue'); $('#add-green').on('click', function(){ makePath(points3,'green'); });
});
Graphs and Snap.svg - Script Codes
Graphs and Snap.svg - Script Codes
Home Page Home
Developer Jon Christensen
Username JMChristensen
Uploaded August 03, 2022
Rating 3.5
Size 2,870 Kb
Views 54,648
Do you need developer help for Graphs and Snap.svg?

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!

Jon Christensen (JMChristensen) Script Codes
Name
Velocity Example
SVG Image Blur
SVG Button Animation
Table Cell Slideshow
Responsive SVG Overlay
CSS Transition End Sequence
Image Cover
Panel Navigation
SVG Text Masking
Simple CSS Loaders
Create amazing SEO content 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!