Info
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 https://api.priceguide.cards/v1/embedded/.
Selecting a Card
https://api.priceguide.cards/v1/embedded?
views=PWC14-S-S-S-LME&api_key=meowmeowmeow
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.
The value for the views
variable is the card code that you will need.
Graded Overview
https://api.priceguide.cards/v1/embedded?views=PWC14-S-S-S-LME&api_key=meowmeowmeow&
graded_overview=true
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
Card Grade
https://api.priceguide.cards/v1/embedded?views=PWC14-S-S-S-LME&api_key=meowmeowmeow&graded_overview=true&
grade=ungraded|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.
Chart Title
https://api.priceguide.cards/v1/embedded?views=PWC14-S-S-S-LME&api_key=meowmeowmeow&graded_overview=true&grade=ungraded|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.
Sales Points
https://api.priceguide.cards/v1/embedded?views=PWC14-S-S-S-LME&api_key=meowmeowmeow&graded_overview=true&grade=ungraded|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.
Date Range
https://api.priceguide.cards/v1/embedded?views=PWC14-S-S-S-LME&api_key=meowmeowmeow&graded_overview=true&grade=ungraded|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.
Charting Library
https://api.priceguide.cards/v1/embedded?views=PWC14-S-S-S-LME&api_key=meowmeowmeow&graded_overview=true&grade=ungraded|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.
Color Scheme
https://api.priceguide.cards/v1/embedded?views=PWC14-S-S-S-LME&api_key=meowmeowmeow&graded_overview=true&grade=ungraded|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.
Example HighCharts iframe
<iframe style="width:100%;height:600px;" src="https://api.priceguide.cards/v1/embedded?views=PWC14-S-S-S-LME&api_key=meowmeowmeow&graded_overview=true&grade=ungraded|PSA-10|BGS-9.5&title=true&dots=false"></iframe>
Example Charts.js iframe
<iframe style="width:100%;height:600px;" src="https://api.priceguide.cards/v1/embedded?views=PWC14-S-S-S-LME&api_key=meowmeowmeow&graded_overview=true&grade=ungraded|PSA-10|BGS-9.5&title=true&dots=false&type=chartjs&theme=dark"></iframe>