Baremetrics BarePNG ![Deploy](https://camo.githubusercontent.com/dc2056acd0e6ff421bfc2b129417f4f832d626c61d1c083221211d8503a429f7/68747470733a2f2f7777772e6865726f6b7563646e2e636f6d2f6465706c6f792f627574746f6e2e737667)
Baremetrics provides one-click subscription analytics & insights. Get started today!
Built by Tyler van der Hoeven
BarePNG is a little app we built to turn our charts into slick PNGs for our Slack Bot and emails. Download, serve and enjoy or just use our little free standing demo to snag a few quick graph PNGs every now and again.
The app itself is actually very simple. We have one page at /chart
that hosts the svg, drawn from a small JavaScript file using the url queries.
With that page in place all we have to do is call the /api
url with the appropriate queries and PhantomJS will take care of the rest.
Just look! https://barepng.herokuapp.com/api?start=14609556&data=[0,10,20,50,20]&symbol=^%25
start
8 digit number to start the graph on, will be added unto just like data with the
step
value
// new Date().setHours(0,0,0,0) / 100000
start=14609556
step
Number to add onto the iteration from the
start
value. Default is864
, one day
// day = 864
// week = 6048
// 30 day = 25920
step=864
data
Array
of values starting with an initial value and proceeding with additional values which will be added on to the previous summarized value (i.edata=100,50,-10
// 100, 150, 140)
data=[4500,20,35,5,-20,15,-5,20,15,-5,10,-15,5]
w
Number width of the generated graph and image. Default is
800
w=800
h
Number height of the generated graph and image. Default is
400
h=400
style
Select the graph style. Default is.. well.. default
// default, email
style=email
symbol
String
. Symbol and placement for the x axis labels. Pretend the^
is your number, cause that's where it will show up. Default is''
symbol=^% // 45%
symbol=$^ // $1,000
goal
Array for creating a goal line for your email graph by sending the start date, start value, end date and end value.
*note this is a little different then the data key as all four values are their actual final values and not values which will be added onto inside a loop
goal=[14609556,4500,14619924,4600]
Base "Slack" graph
?start=14609556&data=[4500,20,35,5,-20,15,-5,20,15,-5,10,-15,5]&symbol=$^
Base "Email" w/goal
?style=email&start=14609556&data=[4500,20,35,5,-20,15,-5,20,15,-5,10,-15,5]&w=600&h=250&goal=[14609556,4500,14619924,4600]
Nice large % based graph with 7 day (week) steps
?start=14609556&step=6048&data=[0,100]&w=1200&h=600&symbol=^%
It's worth noting that once you're hosting the app yourself there's no reason for you to not completely change it. Try adding your own keys and CSS for the stuff that shows up at /chart
. It's your app so make it yours! It's easy!
- clone this repo or your own fork
- Install meteor if you haven't already https://www.meteor.com/install
- cd into this directory and run
meteor
. Your app will be up and running locally
Replace <app-name>
with the name of your app
- Fork this repo
- Clone your fork and
cd
into it locally - Create an empty heroku app called
heroku create <app-name>
- Add heroku as a remote to your fork
git remote add heroku git@heroku.com:<app-name>.git
- Set ENV vars for
heroku config: set ROOT_URL=https://<app-name>.herokuapp.com DISABLE_WEBSOCKETS=true
- Create the MONGO addon:
heroku addons:create mongolab:sandbox
- Create a Procfile in the root directory of this repo and define the web process
touch Procfile && echo "web: .meteor/heroku_build/bin/node .meteor/heroku_build/app/main.js" >> Procfile
- Push the public branch to heroku
git push heroku public:master