Skip to content
Google Image Charts alternative
HTML JavaScript Shell Dockerfile
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib Move logger creation into its own file Aug 16, 2019
nginx/conf.d Make nginx logs lighterweight Aug 7, 2019
scripts Add docker prod run script Aug 8, 2019
templates
.dockerignore Add Dockerfile Mar 23, 2019
.eslintignore Add eslint Mar 12, 2019
.eslintrc.js Format codebase Aug 15, 2019
.gitignore Add support for API keys that bypass rate limiting Aug 15, 2019
Dockerfile Upgrade to node 10 again now that we are working around NodeVM bug a … Aug 8, 2019
LICENSE Create LICENSE Mar 5, 2019
README.md Give more info about where to deploy Jun 24, 2019
api_keys.js Move logger creation into its own file Aug 16, 2019
index.js Add support for base64 encoding. #21 Aug 21, 2019
lefthook.yml
logging.js Move logger creation into its own file Aug 16, 2019
package.json
yarn.lock Bump assign-deep from 0.4.7 to 0.4.8 Aug 21, 2019

README.md

QuickChart

QuickChart is a service that generates images of charts from a URL. Because these charts are simple images, they are very easy to embed in non-dynamic environments such as email, SMS, chat rooms, and so on.

See it in action

The chart image generation service is available online at QuickChart.io. There is an interactive editor that allows you to adjust inputs and build images.

Here's an example chart that is defined completely by its URL:

Chart from URL

The above image can be included anywhere you like. Here is its URL:

https://quickchart.io/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]}]}}

As you can see, the Javascript or JSON object contained in the URL defines the chart:

{
  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 ]
    }]
  }
}

Configuring your chart

The chart configuration object is based on the popular Chart.js API. Check out the Chart.js documentation for more information on how to customize your chart, or see QuickChart.io for more examples.

QR Codes

The service also produces QR codes. For example, https://quickchart.io/qr?text=Hello+world produces:

https://quickchart.io/qr?text=Hello+world

The /qr endpoint has the following query parameters:

  • text - QR code data (required)
  • format - png or svg (png default)
  • size - size in pixels of one side of the square image (defaults to 150)
  • margin - size of the QR image margin in modules (defaults to 4)
  • ecLevel - Error correction level (defaults to M)
  • dark - Hex color code for dark portion of QR code (defaults to 000000)
  • light - Hex color code for light portion of QR code (defauls to ffffff)

Dependencies and Installation

Chart generation requires several system dependencies: Cairo, Pango, libjpeg, and libgif. Run ./scripts/setup.sh for a fresh install on Linux machines (note that this also installs yarn and node).

To install system dependencies on Mac OSX, you probably just need to brew install cairo pango libffi. You may have to export PKG_CONFIG_PATH="/usr/local/opt/libffi/lib/pkgconfig" before installing node packages.

Once you have system dependencies installed, run yarn install or npm install to install the node dependencies.

Running the server

node index.js will start the server on port 3400. Set your PORT environmental variable to change this port.

Docker

A docker image is available on dockerhub at ianw/quickchart.

Building

Dockerfile sets up a server that provides chart and qr code web endpoints. It is not parameterized and provides exactly the same web service as https://quickchart.io/.

The Docker image for this project is built with the following command:

docker build -t ianw/quickchart .

Running

The server runs on port 3400 within the container. This command will expose the server on port 8080 on your host (hostport:containerport):

docker run -p 8080:3400 ianw/quickchart

The production service on QuickChart.io runs behind an NGINX reverse proxy via the config available in nginx/. You should modify this for your own purposes or use a docker image such as nginx-proxy. Of course, you can always serve traffic directly from Node, but it is generally best practice to put something in front of it.

Deploy

By following the Docker instructions above, you can deploy the service to any platform that supports running containers.

Clicking the following will execute the Docker build on a remote machine and deploy the service to Google Cloud Run an automatically scaled and pay-per-request environment:

Run on Google Cloud

License

QuickChart is open source, licensed under version 3 of the GNU GPL. If you would like to modify this project for commercial purposes (and not release the source code), please contact me.

You can’t perform that action at this time.