Savings Calculator and Graphic in SVG

This was a fun little project for a branding and marketing group out of San Francisco. They were working with a group in their area that was building a platform to increase customer retention and service call reductions and wanted a way to illustrate the potential savings. Up until that point, sales reps would schedule demos, enter the current cost information from the prospect into an Excel, and send them a graphic. Since the cost savings was a huge part of the pitch, why not add it to the website?

I parsed a complex Excel sheet down to the calculation we needed to run and wrote that in PHP to hide the business logic on the server. To make the graphic run quickly, the inputted numbers are sent to the server while the user remains on the page (AJAX). When the data is returned, the savings are mapped out on a canvas drawing to show how it all breaks down. This needed to run on a WordPress site so the whole thing is a standalone plugin with a shortcode so it could be placed on multiple pages. The whole thing is responsive, easy to use, and easy to extend so things like colors and legend text could be configured in the admin.

Scroll down to give it a try!

We Pay

Per Thing



Increased Revenue

Buys More Stuff
Customer Stays Customers Galore

Reduced Costs

Reduced Spending Expense Reductions Money Reductions Operational Costs



Total: 0

Your email address will not be published. Required fields are marked *


If you've got something to say about the above, now is your time. I moderate for spam, relevance, and abuse but, aside from that, this is an open forum. I will not publish your email address but feel free to be anonymous. If you just have a general question or want to get in touch, my contact form is the best place for that. Thanks in advance!