{"_id":"564d1afe4567342100ad96d1","__v":2,"category":{"_id":"564d1af94567342100ad96af","__v":1,"pages":["564d1afe4567342100ad96d1","564d1afe4567342100ad96d2"],"version":"564d1af84567342100ad96aa","project":"551375e1d04af219007ddc52","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-11-05T05:56:23.621Z","from_sync":false,"order":4,"slug":"displaying-data","title":"Displaying Data"},"version":{"_id":"564d1af84567342100ad96aa","project":"551375e1d04af219007ddc52","__v":1,"createdAt":"2015-11-19T00:42:32.705Z","releaseDate":"2015-11-19T00:42:32.705Z","categories":["564d1af94567342100ad96ab","564d1af94567342100ad96ac","564d1af94567342100ad96ad","564d1af94567342100ad96ae","564d1af94567342100ad96af","564d1af94567342100ad96b0","564d1af94567342100ad96b1","564d1af94567342100ad96b2"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.1.0","version":"1.1"},"user":"5539912a0074c80d00621b14","project":"551375e1d04af219007ddc52","updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-09-17T23:36:26.212Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":0,"body":"[block:html]\n{\n  \"html\": \"<style>\\n  div.chart-summary {\\n    background-color:rgba(234, 234, 234, 0.48);\\n    border-radius:10px;\\n    padding: 10px;\\n    height:100px;\\n    width:100%;\\n  }\\n  \\n  div.left-sum {\\n   width: 33%;\\n   display: inline-block;\\n   float: left;\\n  }\\n  \\n  div.right-sum {\\n   width: 66%;\\n   display: inline-block;\\n   float: left;\\n  }\\n  \\n  \\n  h5 {\\n    font-weight: bold;\\n  }\\n  \\n  iframe.hapi-chart {\\n  \\tborder: none;\\n    width: 100%;\\n    height: 300px;\\n  }\\n\\n</style>\"\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"title\": \"\",\n  \"body\": \"Send us a note at [support:::at:::humanapi.co](mailto:support@humanapi.co) if you would like access to the Chart API.\"\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<iframe class=\\\"hapi-chart\\\" src='https://chart.humanapi.co/v1/human/activities/summaries?chart_token=demo&start_date=2015-09-01&end_date=2015-09-30&type=bar' />\"\n}\n[/block]\nThe Chart API is the easiest way to display 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:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<iframe src='https://chart.humanapi.co/v1/human/activities/summaries?chart_token=demo&start_date=2015-09-01&end_date=2015-09-30&type=bar'/>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\nThe full range of available charts includes: \n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/tBTOIv1TRw8CtE7EUowr_charts-overview.png\",\n        \"charts-overview.png\",\n        \"1117\",\n        \"722\",\n        \"#3895da\",\n        \"\"\n      ],\n      \"caption\": \"\"\n    }\n  ]\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<div>\\n  <p style=\\\"text-align:center\\\">Line Graph | Bar Chart | Goal Gauge | Latest Value</p>\\n</div>\"\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"success\",\n  \"body\": \"To see live examples of these charts, head over to [Customizing Charts](doc:custom-charts).\"\n}\n[/block]\nUsing the Chart API in your application requires two steps:\n1. Generating a temporary chart token for authentication\n2. Customizing the chart displayed\n\nLet's get started with step one.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Generating a Chart Token\"\n}\n[/block]\nTo 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. \n[block:callout]\n{\n  \"type\": \"info\",\n  \"body\": \"To test graphs, you can always use `demo` as the `chart_token` to use [demo data](doc:demo-data).\"\n}\n[/block]\nBefore loading a page that contains graphs from the Chart API, simply send a `POST` request to:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"https://chart.humanapi.co/v1/tokens/chart\",\n      \"language\": \"http\"\n    }\n  ]\n}\n[/block]\nwith the following payload: \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{\\n  humanId: \\\"52867cbede3155565f000a0d\\\",\\n  clientId: \\\"2e9574ecd415c99346879d07689ec1c732c11036\\\",\\n  accessToken: \\\"8836c122c0483eb193ac2dd121136931\\\"\\n}\",\n      \"language\": \"json\"\n    }\n  ]\n}\n[/block]\n\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Property\",\n    \"h-1\": \"Description\",\n    \"0-0\": \"`humanId`\",\n    \"1-0\": \"`clientId`\",\n    \"2-0\": \"`accessToken`\",\n    \"2-1\": \"Token used to query user data from the [Data API](doc:data-overview). Obtained via [Human Connect](http://hub.humanapi.co/docs/integrating-human-connect#finalize-user-authentication)\",\n    \"1-1\": \"Unique ID of your application container in the [Developer Portal](https://developer.humanapi.co).\",\n    \"0-1\": \"Unique ID of the Human API user.\"\n  },\n  \"cols\": 2,\n  \"rows\": 3\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"body\": \"Ensure you set the `Content-Type` header as `application/json`\"\n}\n[/block]\nIn response you will get a payload that looks like this:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{\\n  humanId: \\\"52867cbede3155565f000a0d\\\",\\n  chartToken: \\\"c82e2fdd4e6c91edded993019c59e531\\\",\\n  expiresAt: \\\"2015-10-27T21:48:23+00:00\\\"\\n}\",\n      \"language\": \"json\"\n    }\n  ]\n}\n[/block]\nThe `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.\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Adding a Chart to Your Page\"\n}\n[/block]\n1. Add an `iframe` element to your page\n2. Set iframe `src` to the appropriate url where:\n  * Base URL = `https://chart.humanapi.co` \n  * Path = the [Data API Endpoint Path](doc:api-reference-1) of the desired data type. \n3. Add the user's `chart_token` as the first query parameter (or test with `demo`)\n4. Add `height`, `width`, and `border:none` to your iframe's stlyle\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<iframe src='https://chart.humanapi.co/v1/human/[type]?chart_token=[chartToken]' />\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n\nThat's it! By default, this will render a line graph or the latest value of the resource. \n\nThere are numerous ways that you can customize the format of the rendered graph. Read the guide on [Customizing Charts](doc:custom-charts) for more information.","excerpt":"","slug":"chart-api","type":"basic","title":"Chart API Overview"}

Chart API Overview


[block:html] { "html": "<style>\n div.chart-summary {\n background-color:rgba(234, 234, 234, 0.48);\n border-radius:10px;\n padding: 10px;\n height:100px;\n width:100%;\n }\n \n div.left-sum {\n width: 33%;\n display: inline-block;\n float: left;\n }\n \n div.right-sum {\n width: 66%;\n display: inline-block;\n float: left;\n }\n \n \n h5 {\n font-weight: bold;\n }\n \n iframe.hapi-chart {\n \tborder: none;\n width: 100%;\n height: 300px;\n }\n\n</style>" } [/block] [block:callout] { "type": "warning", "title": "", "body": "Send us a note at [support@humanapi.co](mailto:support@humanapi.co) if you would like access to the Chart API." } [/block] [block:html] { "html": "<iframe class=\"hapi-chart\" src='https://chart.humanapi.co/v1/human/activities/summaries?chart_token=demo&start_date=2015-09-01&end_date=2015-09-30&type=bar' />" } [/block] The Chart API is the easiest way to display 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: [block:code] { "codes": [ { "code": "<iframe src='https://chart.humanapi.co/v1/human/activities/summaries?chart_token=demo&start_date=2015-09-01&end_date=2015-09-30&type=bar'/>", "language": "html" } ] } [/block] The full range of available charts includes: [block:image] { "images": [ { "image": [ "https://files.readme.io/tBTOIv1TRw8CtE7EUowr_charts-overview.png", "charts-overview.png", "1117", "722", "#3895da", "" ], "caption": "" } ] } [/block] [block:html] { "html": "<div>\n <p style=\"text-align:center\">Line Graph | Bar Chart | Goal Gauge | Latest Value</p>\n</div>" } [/block] [block:callout] { "type": "success", "body": "To see live examples of these charts, head over to [Customizing Charts](doc:custom-charts)." } [/block] 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. [block:api-header] { "type": "basic", "title": "Generating a Chart Token" } [/block] 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. [block:callout] { "type": "info", "body": "To test graphs, you can always use `demo` as the `chart_token` to use [demo data](doc:demo-data)." } [/block] Before loading a page that contains graphs from the Chart API, simply send a `POST` request to: [block:code] { "codes": [ { "code": "https://chart.humanapi.co/v1/tokens/chart", "language": "http" } ] } [/block] with the following payload: [block:code] { "codes": [ { "code": "{\n humanId: \"52867cbede3155565f000a0d\",\n clientId: \"2e9574ecd415c99346879d07689ec1c732c11036\",\n accessToken: \"8836c122c0483eb193ac2dd121136931\"\n}", "language": "json" } ] } [/block] [block:parameters] { "data": { "h-0": "Property", "h-1": "Description", "0-0": "`humanId`", "1-0": "`clientId`", "2-0": "`accessToken`", "2-1": "Token used to query user data from the [Data API](doc:data-overview). Obtained via [Human Connect](http://hub.humanapi.co/docs/integrating-human-connect#finalize-user-authentication)", "1-1": "Unique ID of your application container in the [Developer Portal](https://developer.humanapi.co).", "0-1": "Unique ID of the Human API user." }, "cols": 2, "rows": 3 } [/block] [block:callout] { "type": "warning", "body": "Ensure you set the `Content-Type` header as `application/json`" } [/block] In response you will get a payload that looks like this: [block:code] { "codes": [ { "code": "{\n humanId: \"52867cbede3155565f000a0d\",\n chartToken: \"c82e2fdd4e6c91edded993019c59e531\",\n expiresAt: \"2015-10-27T21:48:23+00:00\"\n}", "language": "json" } ] } [/block] 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. [block:api-header] { "type": "basic", "title": "Adding a Chart to Your Page" } [/block] 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](doc:api-reference-1) of the desired data type. 3. Add the user's `chart_token` as the first query parameter (or test with `demo`) 4. Add `height`, `width`, and `border:none` to your iframe's stlyle [block:code] { "codes": [ { "code": "<iframe src='https://chart.humanapi.co/v1/human/[type]?chart_token=[chartToken]' />", "language": "html" } ] } [/block] 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](doc:custom-charts) for more information.