Generate a Chart Image from URL

Create static charts for embedding in email, SMS, reports, and more.

Create a chart using a single URL

<img src="https://analytics.dankm.us/chart?width=500&height=300&c={type:'bar',data:{labels:['January','February','March','April', 'May'], datasets:[{label:'Dogs',data:[50,60,70,180,190]},{label:'Cats',data:[100,200,300,400,500]}]}}">

This service is a replacement for the Google Image Charts API, which turned off on March 14, 2019. It can also generate chart PDFs and QR codes.

Contents


How It Works

Chart images are defined by their URLs. Each URL contains a JSON/Javascript object that includes all the data and display options. These options follow the popular open-source graphing library Chart.js. Use the documentation to define your chart.

Once you've written your config, render it as an image with https://analytics.dankm.us/chart?c=[[insert config here]]. Try the realtime editor below:

The API also lets you generate charts in PDF format (see below for all customization options).

Customize Your Chart

Let's get creative. The example below uses custom background colors, title, legend, stacked bars, axis labels, and data labels:

You can use any static customization option available in Chart.js. The best place to learn the extent of customization options is through the documentation.

A couple things to remember when customizing your chart:

We also provide these additional options as query parameters:

Combine these parameters in your query string. For example: /chart?width=500&height=300&format=pdf&c={...}

Advanced API

POST endpoint

If your chart is large or complicated, you may prefer to send a POST request rather than a GET request. This avoids limitations on URL length and means you don't have to worry about URL encoding. The /chart POST endpoint takes the same parameters as above via the following JSON object:

{
  "backgroundColor": "transparent",
  "width": 500,
  "height": 300,
  "format": "png",
  "chart": {...},
}
    

Note that if you want to include Javascript code in chart (e.g. to format labels), you'll have to send the parameter as a string rather than a JSON object.

Short URLs

You may like to create a shorter URL for your charts, especially if you are sending them via email or SMS. Send a POST request to https://analytics.dankm.us/chart/create per the above POST spec. For example:

curl -X POST \
     -H 'Content-Type: application/json' \
     -d '{"chart": {"type": "bar", "data": {"labels": ["Hello", "World"], "datasets": [{"label": "Foo", "data": [1, 2]}]}}}' \
     https://analytics.dankm.us/chart/create
    

You will get a response that looks like this:

{
  "success": true,
  "url": "https://analytics.dankm.us/chart/render/9a560ba4-ab71-4d1e-89ea-ce4741e9d232"
}
    

Go to the url in the response to render your chart.

Note the following caveats:


Chart Types

Customization can be very simple. By changing type: bar to type: line, for example, we can instantly produce an equivalent line graph:

Bar Graph

<img src="https://analytics.dankm.us/chart?c={type:'bar',data:{labels:['January','February','March','April', 'May'], datasets:[{label:'Dogs',data:[50,60,70,180,190]},{label:'Cats',data:[100,200,300,400,500]}]}}">

Line Graph

<img src="https://analytics.dankm.us/chart?c={type:'line',data:{labels:['January','February','March','April', 'May'], datasets:[{label:'Dogs',data:[50,60,70,180,190]},{label:'Cats',data:[100,200,300,400,500]}]}}">

There are many other chart types as well:

Radar Chart

<img src="https://analytics.dankm.us/chart?c={type:'radar',data:{labels:['January','February','March','April', 'May'], datasets:[{label:'Dogs',data:[50,60,70,180,190]},{label:'Cats',data:[100,200,300,400,500]}]}}">

Pie Chart

<img src="https://analytics.dankm.us/chart?c={type:'pie',data:{labels:['January','February','March','April', 'May'], dnut Chart <img src="https://analytics.dankm.us/chart?c={type:'doughnut',data:{labels:['January','February','March','April', 'May'], datasets:[{data:[50,60,70,180,190]}]}}">

Scatter Plot

<img src="https://analytics.dankm.us/chart?c={type:'scatter',data:{datasets:[{label:'Data 1',data:[{x:2,y:4},{x:3,y:3},{x:-10,y:0},{x:0,y:10},{x:10,y:5}]}]}}">

Bubble Chart

The r variable defines bubble radius in pixels:

<img src="https://analytics.dankm.us/chart?c={type:'bubble',data:{datasets:[{label:'Data 1',data:[{x:1,y:4,r:9},{x:2,y:4,r:6},{x:3,y:8,r:30},{x:0,y:10,r:1},{x:10,y:5,r:5}]}]}}">

Radial Gauge / "Meter" Charts

View the options at chartjs-radial-gauge for customization details.

<img src="https://analytics.dankm.us/chart?c={type:'radialGauge',data:{datasets:[{data:[70],backgroundColor:'green'}]}}">

Sparklines

A sparkline is a special case of line graph with axes and other labeling removed. All line graph options can be applied.

<img src="https://analytics.dankm.us/chart?c={type:'sparkline',data:{datasets:[{data:[140,60,274,370,199]}]}}">

You can combine charts together by specifying different "types":

Mixed Charts

<img src="https://analytics.dankm.us/chart?c={type:'bar',data:{labels:['January','February','March','April', 'May'], datasets:[{label:'Dogs',data:[50,60,70,180,190]},{label:'Cats',data:[100,200,300,400,500],},{type:'line',fill:false, label:'Potatoes',data:[100,400,200,400,700]}]}}">

An example of the outlabeledPie type:

QR codes

We also support QR code generation. You can render a QR code like so:

https://analytics.dankm.us/qr?text=Here's my text

Remember the URL-encode your text parameter for more complex strings. The QR endpoint produces a PNG image by default. You may optionally set the query parameter format=svg for SVG format.

Specify the whitespace around QR image in modules with query parameter margin (defaults to 4), size in pixels of the square QR image (defaults to 150), and error correction level with ecLevel=M (valid values: L, M, Q, H).

If you'd like to customize the color of your QR code, use dark=000000 and light=ffffff. The parameters must be hex color codes. Here's the same code as above but with slimmer margins, more error protection, and colors:

https://analytics.dankm.us/qr?text=Here's%20my%20text&dark=f00&light=0ff&ecLevel=Q