| Server IP : 157.230.181.24 / Your IP : 216.73.217.11 Web Server : Apache/2.4.58 (Ubuntu) System : Linux conductive 6.8.0-117-generic #117-Ubuntu SMP PREEMPT_DYNAMIC Tue May 5 19:26:24 UTC 2026 x86_64 User : ( 1000) PHP Version : 8.3.31 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : OFF | Sudo : ON | Pkexec : OFF Directory : /var/www/vhosts/ceagon/public/tools/ |
Upload File : |
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Photoshop Vector Pie, Donut, Bar and Line Chart SVG Generator</title>
<meta name="author" content="Caleb Loffer">
<meta name="keywords" content="designer free photoshop illustrator pie donut bar line chart generator tool web developer svg">
<meta name="description" content="A Suite of Web Development Tools by Caleb Loffer. Generate accurate bar, pie, donut and line charts from your numbers and export them as SVG files for layouts or Illustrator.">
<meta name="robots" content="FOLLOW,INDEX">
<meta name="distribution" content="global">
<meta name="rating" content="general">
<meta name="revisit-after" content="5 days">
<meta name="resource-type" content="document">
<meta name="viewport" content="width=device-width, maximum-scale=1.0">
<meta property="og:image" content="images/chart-ogimage.png"/>
<meta property="og:title" content="Photoshop Pie, Donut, Bar and Line Chart SVG Generator"/>
<meta property="og:site_name" content="Photoshop Pie, Donut, Bar and Line Chart SVG Generator"/>
<meta property="og:type" content="website"/>
<link rel="stylesheet" href="style/reset.css">
<link rel="stylesheet" href="style/jquery-ui-1.10.1.custom.css">
<link rel="stylesheet" href="style/1140.css">
<link rel="stylesheet" href="style/ie.css">
<link rel="stylesheet" href="style/colorpicker.css">
<link rel="stylesheet" href="style/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;600;700&display=swap" rel="stylesheet">
<script src="scripts/libs/modernizr-2.5.0.min.js"></script>
</head>
<body class="home">
<div id="wrapper">
<div id="footer-push">
<!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->
<header id="header" class="container">
<div class="row">
<div class="sixcol">
<a class="title" href="http://ceagon.com/tools/"><h1>Caleb Loffer <span>/ Tools</span></h1></a>
</div>
<div class="sixcol last text-right">
<h2>Chart Generator</h2>
</div>
</div>
</header>
<div role="main" class="container main">
<div class="row">
<div id="content" class="ninecol">
<h3>Pie Chart</h3>
<div id="pie-wrapper" class="content-divider">
<div id="pie"></div>
<form action="export" method="post">
<input type="hidden" name="etkp2" value="tpo34pogkaEAjpRskpso43754tk"/>
<input type="hidden" name="filename" value="pie"/>
<input type="hidden" name="data" value=""/>
<a href="#" class="export">Export</a>
</form>
</div>
<h3>Line Chart</h3>
<div id="line-wrapper" class="content-divider">
<div id="line"></div>
<form action="export" method="post">
<input type="hidden" name="etkp2" value="tpo34pogkaEAjpRskpso43754tk"/>
<input type="hidden" name="filename" value="line"/>
<input type="hidden" name="data" value=""/>
<a href="#" class="export">Export</a>
</form>
</div>
<h3>Bar Chart</h3>
<div id="bar-wrapper" class="content-divider">
<div id="bar"></div>
<form action="export" method="post">
<input type="hidden" name="etkp2" value="tpo34pogkaEAjpRskpso43754tk"/>
<input type="hidden" name="filename" value="bar"/>
<input type="hidden" name="data" value=""/>
<a href="#" class="export">Export</a>
</form>
</div>
</div>
<aside id="sidebar" class="threecol last">
<div class="widget">
<h4>What's This?</h4>
<p>
Drawing accurate bar, pie and line charts by hand takes time. This tool generates them for you from your numbers.
</p>
<p>
On a Mac, press ⌘ + ⇧ + 4 for a region screenshot. On Windows, press Win + Shift + S to open Snipping Tool and capture a region. Alternatively, click <strong>Export</strong> to save out a .svg file, which you may open in Illustrator.
</p>
</div>
<div class="widget">
<h4>Controls</h4>
<ul class="spacing">
<li>
<label for="colors">Colors</label>
<input id="colors" name="colors" type="hidden" value="#40b76c"/>
<div class="colorpick clearfix" for="colors"></div>
</li>
<li>
<label for="data">Data</label>
<span class="sub"><a href="#randomize">Randomize</a></span>
<input id="data" name="data" type="hidden" value="20, 80"/>
<div class="data clearfix" for="data"></div>
</li>
<li>
<label for="size">Size</label>
<span class="sub">300px</span>
<input id="size" name="size" type="hidden" value="300"/>
<div class="slider clearfix" for="size"></div>
</li>
<li>
<label for="stroke">Pie Stroke <span class="checkbox"></span></label>
<span class="sub">1px</span>
<input id="stroke" name="stroke" type="hidden" value="1"/>
<div class="slider clearfix" for="stroke"></div>
</li>
<li>
<label for="donut">Pie Donut <input type="checkbox" name="donutYN"/></label>
<span class="sub">240px</span>
<input id="donut" name="donut" type="hidden" value="100"/>
<div class="slider clearfix" for="donut"></div>
</li>
</ul>
</div>
<div class="widget">
<h4>Share</h4>
<a href="https://twitter.com/share" class="twitter-share-button" data-text="Easily create pie, bar and line charts for Photoshop and Illustrator" data-via="Ceagon" data-dnt="true">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=218610908193021";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false" data-font="arial"></div>
<div class="clearfix" style="margin-top:3em">
<label for="share">Your URL</label>
<input id="share" type="text" onclick="this.focus(); this.select()"/>
</div>
</div>
</aside>
</div>
</div>
</div>
</div>
<footer id="footer" class="container">
<div class="row">
A Suite of Web Development Tools by <a href="http://ceagon.com/">Caleb Loffer</a>
</div>
</footer>
<script src="scripts/libs/jquery.js"></script>
<script src="scripts/libs/jquery-ui-1.10.1.custom.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="scripts/libs/jquery.svg/jquery.svg.min.js"></script>
<script src="scripts/libs/shortcut.js"></script>
<script src="scripts/libs/jquery.cookie.js"></script>
<script src="scripts/libs/colorpicker.js"></script>
<script src="scripts/charts.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-4969944-7']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'stats.g.doubleclick.net/dc.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<!--
This website is written by and is the intellectual property of Caleb Loffer <?= date('Y') ?>
If you see this code anywhere besides ceagon.com, please send me an email at info@ceagon.com
-->
</body>
</html>