chartd

At StatHat, we make a lot of charts...

Our web app creates dynamic, autoupdating charts using JavaScript, but we also send charts via email and to external services like Campfire and Slack. Plus, we let users embed charts on their own web pages. For these situations, JavaScript charts either won't work, are overkill, or could get messy.

So we made chartd. It allows you to create a chart with just an img tag. These charts:

• are responsive (resize this page to see the charts respond)
• are retina-friendly
• can contain up to 5 datasets
• can be line or step charts
• have customizable colors and strokes

No JavaScript is required. You can generate SVG or PNG charts. We prefer SVG, but some services (like gmail) won't render SVGs in emails.

Here's a basic chart. All charts must have these parameters: width (w), height (h), and a dataset (d0).

When you give chartd the ymin and ymax values, it will draw the y axes.

Just show the left axis with ol=1 (or just the right with or=1).

You can add a title with the t parameter.

You can put up to 5 datasets (d0..d4) on each chart.

Change any chart to a step chart by adding step=1.

Highlight the last point with hl=1. This is the style StatHat uses for automatic anomaly detection emails.

Provide xmin and xmax as UNIX timestamps and chartd will render the times on the X axis.

UTC is the default time zone. Change this with the tz parameter.

You can change the stroke colors and fills.

You can make the lines dashed or dotted.

If you need a PNG chart instead of SVG, use a.png instead of a.svg.

The SVG chart images are vectors and can be scaled down for smaller screens. If you're on a desktop browser, go ahead and resize this window to see the charts scale.

To make this happen, wrap the image in an svg-container class and give the image tag an svg-content class.

Here's the CSS for svg-container and svg-content:

.svg-container {
        display: inline-block;
        position: relative;
        vertical-align: middle;
        overflow: hidden;
        width: 100%;
        padding-bottom: 32%;
}

.svg-content {
        display: inline-block;
        position: absolute;
        top: 0;
        left: 0;
}

The only tricky thing is that you need the padding-bottom percentage to be at least as great as the ratio of the chart height to its width. The charts on this page are 580px wide by 180px high. So the ratio of height to width is just over 31%, so we rounded up to 32%. You can make it larger to add more padding below the charts.

While they don't scale as nicely as SVGs, you can make the PNG charts responsive as well. Add the img-responsive class to the PNG img tag and make sure the width you provide as a parameter matches the width of the container.

Here's the CSS for img-responsive (borrowed from Bootstrap 3):

.img-responsive {
  display: block;
  width: 100% \9;
  max-width: 100%;
  height: auto;
}

Then just provide the width and height to the img tag for SVG or PNG. It won't resize when displayed on a smaller screen (but will still look great on retina displays).