GuidesAPI ReferencePortalSupport and Knowledge baseIntegration Status

Deprecated feature

The current iteration of the Chart API will continue to be available for paying customers but will not be actively developed. Thank you for your understanding.

(Script tags will be stripped)

(Script tags will be stripped)

The Chart API is the easiest way to display wellness data from Human API in your app or portal. At a basic level, it is built to render graphs within `iframe` elements using URLs modeled after those of the main Data API. For example, the graph above was created with the following line of code:

The full range of available charts includes: 
1117

(Script tags will be stripped)


To see live examples of these charts, head over to [Customizing Charts](🔗).
Using the Chart API in your application requires two steps:
  1. Generating a temporary chart token for authentication
  2. Customizing the chart displayed
Let's get started with step one.
## Generating a Chart Token
To render a chart in the client browser, you will need to pass a a temporary token to add to each iframe URL as the `chart_token` parameter. These temporary tokens can be retrieved from your server using the user's `accessToken` before the page containing charts loads. By using these temporary chart tokens, you can ensure that the user's `accessToken` remains secure on your server. 

To test graphs, you can always use `demo` as the `chart_token` to use [demo data](🔗).
Before loading a page that contains graphs from the Chart API, simply send a `POST` request to:

with the following payload: 

PropertyDescription
`humanId`Unique ID of the Human API user.
`clientId`Unique ID of your application container in the Developer Portal
`accessToken`Token used to query user data from the [Data API](🔗). Obtained via [Human Connect](🔗)

Ensure you set the `Content-Type` header as `application/json`
In response you will get a payload that looks like this:

The `chartToken` you receive will be valid for **5 minutes**.  As a result of this short expiry time, it is best to retrieve a new chart token every time a page loads containing charts from the Chart API.
## Adding a Chart to Your Page
  1. Add an `iframe` element to your page
  2. Set iframe `src` to the appropriate url where:
  • Base URL = `https://chart.humanapi.co` 
  • Path = the [Data API Endpoint Path](🔗) of the desired data type. 
  1. Add the user's `chart_token` as the first query parameter (or test with `demo`)
  2. Add `height`, `width`, and `border:none` to your iframe's stlyle

That's it! By default, this will render a line graph or the latest value of the resource. 
There are numerous ways that you can customize the format of the rendered graph. Read the guide on [Customizing Charts](🔗) for more information.