Welcome to the API reference for PriceGuide.Cards. With this tool you can place an interactive chart showing the price of any card from the millions of cards in our trading card database in an iframe on your site - all for free.

The prices on PriceGuide.Cards come from actual card sales.

There are many options for displaying a chart exactly how you want it to appear and fit it in with the article on cards you are writing - or any other use case you can think of!

The content of the iframes is designed to be as lightweight as it can be and requests are cached on our server to load as quick as possible.

All content within the iframes is responsive - so it will look great on both mobile and desktop!

This is the first version of the api, so I welcome feedback on changes or extra features you would like to see in it - get in touch at [email protected]

Developer Guide

Get an API Key

We require requests to be submitted with an API key, the examples below will show you how to get set up with this.

To obtain an API key please register or log in to your account and go to API Management. Here you will be presented with your API key.

You are required to whitelist by HTTP referrers (web sites) to use your API key.

By default each API has access to 100 different cards, to raise this limit please click the 'Raise API Limit' button to submit your website for review.

API Endpoint

All requests for iframe charts are to be sent to

Selecting a Card

To set which card is displayed on the chart the you need find the card you looking for on the home page of PriceGuide.Cards by using the search interface.

Once you have found the card you are looking click on it in the results, then in the Card Details section click the button to copy the link and a modal will open.

Copy Link Modal

The value for the views variable is the card code that you will need.

HighCharts - Selecting a Card

Graded Overview

If you wish to display overall market stats of the volume and value of different card grades then set graded_overview=true.

This option is turned off by detault

HighCharts - Graded Overview

Card Grade|PSA-10|BGS-9.5

If you would like to only display certain card grades on a chart you are able to do that by setting the variable grade=ungraded|PSA-10|BGS-9.5 like this, with multiple grades seperated by a |.

You are able to have a maximum of 5 different grades on a single chart. By default the chart will show only ungraded sales.

HighCharts - Card Grade

Chart Title|PSA-10|BGS-9.5&title=true

If you want the iframe to contain the title of the card there is an option for that, or you can fit it in with your own styling. Set title=true to display the title on the chart.

The chart title is turned off by deault.

HighCharts - Chart Title

Sales Points|PSA-10|BGS-9.5&title=true&dots=false

To hide the sales point automatically on first load set the variable dots=false

Sales points are set to show by default.

HighCharts - Sales Points

Date Range|PSA-10|BGS-9.5&title=true&dots=false&daterange=20140630|20150630

You can control the date range displayed on the chart by using the parameter daterange. daterange takes two values split by a |. Each value can be an exact date in the format YYYYMMDD, or the keyword most_recent to set the date at the most recent sale and oldest to set the date at the first sale recorded. The keywords most_recent and oldest can be combined with exact dates. e.g. daterange=oldest|20200325 or daterange=20160530|most_recent.

This is not currently available on the Chart.js API, but will be added soon.

HighCharts - Date Range

Charting Library|PSA-10|BGS-9.5&title=true&dots=false&type=chartjs

You have the choice between Highcharts and Chart.js, the default it HighCharts if you wish to change this set type=chartjs. Chart.js is slightly faster due to a smaller library size.

Chart.js - Charting Library

Color Scheme|PSA-10|BGS-9.5&title=true&dots=false&type=chartjs&theme=dark

To change the color scheme from the default you can set theme=dark to show the charts in a dark theme.

If you would like a custom theme please get in touch at [email protected] with details of your design.

Chart.js - Color Scheme

Example HighCharts iframe

<iframe style="width:100%;height:600px;" src="|PSA-10|BGS-9.5&title=true&dots=false"></iframe>

Example Charts.js iframe

<iframe style="width:100%;height:600px;" src="|PSA-10|BGS-9.5&title=true&dots=false&type=chartjs&theme=dark"></iframe>