{"__v":1,"_id":"564d1afe4567342100ad96d2","category":{"__v":1,"_id":"564d1af94567342100ad96af","pages":["564d1afe4567342100ad96d1","564d1afe4567342100ad96d2"],"project":"551375e1d04af219007ddc52","version":"564d1af84567342100ad96aa","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-11-05T05:56:23.621Z","from_sync":false,"order":4,"slug":"displaying-data","title":"Displaying Data"},"project":"551375e1d04af219007ddc52","user":"5539912a0074c80d00621b14","version":{"__v":1,"_id":"564d1af84567342100ad96aa","project":"551375e1d04af219007ddc52","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"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-10-26T20:59:10.878Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":1,"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:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/rGOjTd4S064Hhv22qeqT_custom_graphs_pencil.png\",\n        \"custom_graphs_pencil.png\",\n        \"706\",\n        \"381\",\n        \"#656565\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nOnce you have added a chart to your page, customizing charts from the Chart API can be easily done via query parameters added to the `iframe` URL. The guide below will outline all available options, chart types, and styling tips. \n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"\",\n  \"body\": \"See the [Chart API Overview](doc:chart-api) for more information on authenticating and adding a chart to your page.\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Query Parameters\"\n}\n[/block]\nThere are numerous query parameters that you can use to customize the aesthetic and data for each graph. Chart API parameters universal to all chart types are listed in this section and all other non-universal parameters are listed along with each chart's description in subsequent sections of this page. \n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Standard Query Parameters\",\n  \"body\": \"All standard query parameters used for the Data API are also valid when rendering charts. Please refer to the standard query parameters (including date ranges) as detailed on the [Patterns and Conventions](http://hub.humanapi.co/docs/patterns-and-conventions-reference#section-query-options) page of the documentation.\"\n}\n[/block]\n\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Parameter\",\n    \"0-0\": \"`chart_token`\",\n    \"1-0\": \"`y`\",\n    \"2-0\": \"`days`\",\n    \"3-0\": \"`color`\",\n    \"h-1\": \"Value\",\n    \"3-1\": \"Hex or [CSS Color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value)\\n\\n(omit `#` for hex)\",\n    \"2-1\": \"Number of days\\n( max 50 )\",\n    \"1-1\": \"Data Parameter\",\n    \"h-2\": \"Description\",\n    \"1-2\": \"The value that you would like plotted on the graph as it relates to the Human API JSON data object. \\nSee the [API Reference](doc:api-reference-1) for each data type.\\n\\n(e.g. \\\"steps\\\", \\\"calories\\\", \\\"duration\\\", etc...)\\n*Note: must be a numerical value*\",\n    \"2-2\": \"Returns a graph with data for the specified number of days ending with the current day.\\n\\n*This calculates `start_time` and `end_time` [date range parameters](http://hub.humanapi.co/docs/patterns-and-conventions-reference#section-date-ranges), which can alternatively be supplied explicitly for an end date that is not the current day*\",\n    \"3-2\": \"Add a custom color theme to your graph.\\n\\n(e.g. \\\"lightgreen\\\" and \\\"90EE90\\\" are equivalent)\\n*Defaults  to \\\"steelblue\\\"  if not specified.*\",\n    \"0-1\": \"Chart Token\",\n    \"0-2\": \"**[Required]** Chart Token for the relevant Human API user. (See [Chart API Overview](doc:chart-api) for information on obtaining a chart token)\",\n    \"4-0\": \"`unit`\",\n    \"4-1\": \"Unit for plotted Y Value\",\n    \"4-2\": \"**Time** = [`milliseconds`, `seconds`, `minutes`, `hours`]\\n**Distance** = [`millimeters`, `centimeters`,`meters`,`kilometers`, `inches`, `feet`, `miles`]\\n**Mass** = [`kilograms`, `lbs`]\\n\\n*Retains default object value if not specified*\"\n  },\n  \"cols\": 3,\n  \"rows\": 5\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"title\": \"Max Records Displayed\",\n  \"body\": \"By default, all charts will display a maximum of 50 records. To display up to 500, ensure you set a higher `limit` parameter.\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"External Styling\"\n}\n[/block]\nWhen placing a chart on your page, there are only three external formatting items that need to be defined: `border`, `width` & `height`.\n\nWe recommend setting `border: none` so that the chart appears like a native part of your application. Additionally, all charts are dynamically sized based on the defined `height` and `width` of the iframe, so it is important to set these properties as well. \n\nA basic implementation of the CSS styling properties might look like this:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"iframe {\\n  border: none;\\n  width: 100%;\\n  height: 300px;\\n}\",\n      \"language\": \"css\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Chart Types\"\n}\n[/block]\nBelow are all possible chart types with examples. For your reference, here are the data types available for the Chart API:\n* **[Periodic Resources](http://hub.humanapi.co/docs/patterns-and-conventions-reference#section-periodic-data)** = activities, sleeps\n* **[Discrete Resources](http://hub.humanapi.co/docs/patterns-and-conventions-reference#section-discrete-measurements)** = blood_glucose, blood_pressure, bmi, body_fat, heart_rate, height, weight\n* **No Chart** = genetics, food, locations\n\n#Bar Chart\n[block:html]\n{\n  \"html\": \"\\n<iframe class=\\\"hapi-chart\\\" src='https://chart.humanapi.co/v1/human/activities/summaries?chart_token=demo&color=lightgreen&start_date=2015-09-01&end_date=2015-09-28&type=bar&y=distance' > </iframe>\"\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"/v1/human/activities/summaries?chart_token=demo&color=lightgreen&start_date=2015-09-01&end_date=2015-09-28&type=bar&y=distance\",\n      \"language\": \"http\"\n    }\n  ]\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<div class=\\\"chart-summary\\\">\\n <div class=\\\"left-sum\\\">  \\n  <h5> Available For: </h5>\\n    <ul>\\n      <li> Periodic Resources </li>\\n      <li> Discrete Resources </li>\\n    </ul>\\n  </div>\\n  \\n  <div class=\\\"right-sum\\\">\\n    <h5> Summary </h5>\\n    <p>\\n      Shows a bar graph with detail tooltip on hover.\\n    </p>\\n  </div>\\n</div>\"\n}\n[/block]\n**Periodic & Discrete Resources** \n\nAppend `type=bar` query parameter to any endpoint.\n\n**Additional Parameters**\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Parameter\",\n    \"h-1\": \"Value\",\n    \"h-2\": \"Description\",\n    \"0-0\": \"`type`\",\n    \"0-1\": \"Chart Type\",\n    \"0-2\": \"Set to `bar` to render bar graph. Defaults to line graph.\"\n  },\n  \"cols\": 3,\n  \"rows\": 1\n}\n[/block]\n\n#Line Graph\n[block:html]\n{\n  \"html\": \"<iframe class=\\\"hapi-chart\\\" src='https://chart.humanapi.co/v1/human/blood_pressure/readings?chart_token=demo&color=tomato' > </iframe>\"\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"/v1/human/blood_pressure/readings?chart_token=demo&color=tomato\",\n      \"language\": \"http\"\n    }\n  ]\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<div class=\\\"chart-summary\\\">\\n <div class=\\\"left-sum\\\">  \\n  <h5> Available For: </h5>\\n    <ul>\\n      <li> Periodic Resources </li>\\n      <li> Discrete Resources </li>\\n    </ul>\\n  </div>\\n  \\n  <div class=\\\"right-sum\\\">\\n    <h5> Summary </h5>\\n    <p>\\n      Shows a line graph with details and data points on hover.\\n    </p>\\n  </div>\\n</div>\"\n}\n[/block]\n**Periodic Resources**\nUse any Periodic Resource endpoint.\n\n\n\n**Discrete Resources**\nUse any Discrete Resource endpoint with `/readings`.\n\n\n**Additional Parameters**\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Parameter\",\n    \"0-2\": \"Apply a line smoothing method to your graph.\\n\\nPossible values : \\n[`linear`, `monotone`,  `cardinal`, `basis`]\\n(no smoothing <-> high smoothing)\\n\\n*Note: basis does not show data point and detail text on hover *\",\n    \"0-0\": \"`smoothing`\",\n    \"0-1\": \"Smoothing Method\",\n    \"h-1\": \"Value\",\n    \"h-2\": \"Description\"\n  },\n  \"cols\": 3,\n  \"rows\": 1\n}\n[/block]\n#Latest Value\n\n[block:html]\n{\n  \"html\": \"<iframe class=\\\"hapi-chart\\\" src='https://chart.humanapi.co/v1/human/blood_pressure?chart_token=demo&color=lightblue' > </iframe>\"\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"/v1/human/blood_pressure?chart_token=demo&color=lightblue\",\n      \"language\": \"http\"\n    }\n  ]\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<div class=\\\"chart-summary\\\">\\n <div class=\\\"left-sum\\\">  \\n  <h5> Available For: </h5>\\n    <ul>\\n      <li> Discrete Resources\\n    </ul>\\n  </div>\\n  \\n  <div class=\\\"right-sum\\\">\\n    <h5> Summary </h5>\\n    <p>\\n      Shows the latest value retrieved for a particular data type along with the source and time elapsed.\\n    </p>\\n  </div>\\n</div>\"\n}\n[/block]\n**Discrete Resources **\n\nUse any query for a discrete resource without `/readings`\n\n#Goal Gauge\n[block:html]\n{\n  \"html\": \"<iframe class=\\\"hapi-chart\\\" src='https://chart.humanapi.co/v1/human/activities/summaries?chart_token=demo&color=orange&type=gauge&goal=12000&start_date=2015-10-25&end_date=2015-10-25'> </iframe>\"\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"/v1/human/activities/summaries?chart_token=demo&color=orange&type=gauge&goal=12000&start_date=2015-10-25&end_date=2015-10-25\",\n      \"language\": \"text\"\n    }\n  ]\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<div class=\\\"chart-summary\\\">\\n <div class=\\\"left-sum\\\">  \\n  <h5> Available For: </h5>\\n    <ul>\\n      <li> Periodic Resources </li>\\n </li>\\n    </ul>\\n  </div>\\n  \\n  <div class=\\\"right-sum\\\">\\n    <h5> Summary </h5>\\n    <p>\\n    \\tShows a gauge representing how close the user is to a specific goal. (percentage shown on hover)\\n    </p>\\n  </div>\\n</div>\"\n}\n[/block]\nUse any query for a discrete or periodic resource and set `type=gauge` and the `goal` parameter.\n\nFor today's totals, simply use `days=1`\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Parameter\",\n    \"h-1\": \"Value\",\n    \"h-2\": \"Description\",\n    \"0-0\": \"`goal`\",\n    \"0-1\": \"Integer\",\n    \"0-2\": \"The goal value represented as the 100% mark of the gauge.\"\n  },\n  \"cols\": 3,\n  \"rows\": 1\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Chart API Explorer\"\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<style>\\n  iframe#explorer {\\n    border: none;\\n    width: 100%;\\n    height: 800px;\\n  }\\n</style>\\n\\n<iframe id=\\\"explorer\\\" src=\\\"https://chart.humanapi.co/explorer\\\" />\"\n}\n[/block]","excerpt":"","slug":"custom-charts","type":"basic","title":"Customizing Charts"}

Customizing Charts


[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:image] { "images": [ { "image": [ "https://files.readme.io/rGOjTd4S064Hhv22qeqT_custom_graphs_pencil.png", "custom_graphs_pencil.png", "706", "381", "#656565", "" ] } ] } [/block] Once you have added a chart to your page, customizing charts from the Chart API can be easily done via query parameters added to the `iframe` URL. The guide below will outline all available options, chart types, and styling tips. [block:callout] { "type": "info", "title": "", "body": "See the [Chart API Overview](doc:chart-api) for more information on authenticating and adding a chart to your page." } [/block] [block:api-header] { "type": "basic", "title": "Query Parameters" } [/block] There are numerous query parameters that you can use to customize the aesthetic and data for each graph. Chart API parameters universal to all chart types are listed in this section and all other non-universal parameters are listed along with each chart's description in subsequent sections of this page. [block:callout] { "type": "info", "title": "Standard Query Parameters", "body": "All standard query parameters used for the Data API are also valid when rendering charts. Please refer to the standard query parameters (including date ranges) as detailed on the [Patterns and Conventions](http://hub.humanapi.co/docs/patterns-and-conventions-reference#section-query-options) page of the documentation." } [/block] [block:parameters] { "data": { "h-0": "Parameter", "0-0": "`chart_token`", "1-0": "`y`", "2-0": "`days`", "3-0": "`color`", "h-1": "Value", "3-1": "Hex or [CSS Color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value)\n\n(omit `#` for hex)", "2-1": "Number of days\n( max 50 )", "1-1": "Data Parameter", "h-2": "Description", "1-2": "The value that you would like plotted on the graph as it relates to the Human API JSON data object. \nSee the [API Reference](doc:api-reference-1) for each data type.\n\n(e.g. \"steps\", \"calories\", \"duration\", etc...)\n*Note: must be a numerical value*", "2-2": "Returns a graph with data for the specified number of days ending with the current day.\n\n*This calculates `start_time` and `end_time` [date range parameters](http://hub.humanapi.co/docs/patterns-and-conventions-reference#section-date-ranges), which can alternatively be supplied explicitly for an end date that is not the current day*", "3-2": "Add a custom color theme to your graph.\n\n(e.g. \"lightgreen\" and \"90EE90\" are equivalent)\n*Defaults to \"steelblue\" if not specified.*", "0-1": "Chart Token", "0-2": "**[Required]** Chart Token for the relevant Human API user. (See [Chart API Overview](doc:chart-api) for information on obtaining a chart token)", "4-0": "`unit`", "4-1": "Unit for plotted Y Value", "4-2": "**Time** = [`milliseconds`, `seconds`, `minutes`, `hours`]\n**Distance** = [`millimeters`, `centimeters`,`meters`,`kilometers`, `inches`, `feet`, `miles`]\n**Mass** = [`kilograms`, `lbs`]\n\n*Retains default object value if not specified*" }, "cols": 3, "rows": 5 } [/block] [block:callout] { "type": "warning", "title": "Max Records Displayed", "body": "By default, all charts will display a maximum of 50 records. To display up to 500, ensure you set a higher `limit` parameter." } [/block] [block:api-header] { "type": "basic", "title": "External Styling" } [/block] When placing a chart on your page, there are only three external formatting items that need to be defined: `border`, `width` & `height`. We recommend setting `border: none` so that the chart appears like a native part of your application. Additionally, all charts are dynamically sized based on the defined `height` and `width` of the iframe, so it is important to set these properties as well. A basic implementation of the CSS styling properties might look like this: [block:code] { "codes": [ { "code": "iframe {\n border: none;\n width: 100%;\n height: 300px;\n}", "language": "css" } ] } [/block] [block:api-header] { "type": "basic", "title": "Chart Types" } [/block] Below are all possible chart types with examples. For your reference, here are the data types available for the Chart API: * **[Periodic Resources](http://hub.humanapi.co/docs/patterns-and-conventions-reference#section-periodic-data)** = activities, sleeps * **[Discrete Resources](http://hub.humanapi.co/docs/patterns-and-conventions-reference#section-discrete-measurements)** = blood_glucose, blood_pressure, bmi, body_fat, heart_rate, height, weight * **No Chart** = genetics, food, locations #Bar Chart [block:html] { "html": "\n<iframe class=\"hapi-chart\" src='https://chart.humanapi.co/v1/human/activities/summaries?chart_token=demo&color=lightgreen&start_date=2015-09-01&end_date=2015-09-28&type=bar&y=distance' > </iframe>" } [/block] [block:code] { "codes": [ { "code": "/v1/human/activities/summaries?chart_token=demo&color=lightgreen&start_date=2015-09-01&end_date=2015-09-28&type=bar&y=distance", "language": "http" } ] } [/block] [block:html] { "html": "<div class=\"chart-summary\">\n <div class=\"left-sum\"> \n <h5> Available For: </h5>\n <ul>\n <li> Periodic Resources </li>\n <li> Discrete Resources </li>\n </ul>\n </div>\n \n <div class=\"right-sum\">\n <h5> Summary </h5>\n <p>\n Shows a bar graph with detail tooltip on hover.\n </p>\n </div>\n</div>" } [/block] **Periodic & Discrete Resources** Append `type=bar` query parameter to any endpoint. **Additional Parameters** [block:parameters] { "data": { "h-0": "Parameter", "h-1": "Value", "h-2": "Description", "0-0": "`type`", "0-1": "Chart Type", "0-2": "Set to `bar` to render bar graph. Defaults to line graph." }, "cols": 3, "rows": 1 } [/block] #Line Graph [block:html] { "html": "<iframe class=\"hapi-chart\" src='https://chart.humanapi.co/v1/human/blood_pressure/readings?chart_token=demo&color=tomato' > </iframe>" } [/block] [block:code] { "codes": [ { "code": "/v1/human/blood_pressure/readings?chart_token=demo&color=tomato", "language": "http" } ] } [/block] [block:html] { "html": "<div class=\"chart-summary\">\n <div class=\"left-sum\"> \n <h5> Available For: </h5>\n <ul>\n <li> Periodic Resources </li>\n <li> Discrete Resources </li>\n </ul>\n </div>\n \n <div class=\"right-sum\">\n <h5> Summary </h5>\n <p>\n Shows a line graph with details and data points on hover.\n </p>\n </div>\n</div>" } [/block] **Periodic Resources** Use any Periodic Resource endpoint. **Discrete Resources** Use any Discrete Resource endpoint with `/readings`. **Additional Parameters** [block:parameters] { "data": { "h-0": "Parameter", "0-2": "Apply a line smoothing method to your graph.\n\nPossible values : \n[`linear`, `monotone`, `cardinal`, `basis`]\n(no smoothing <-> high smoothing)\n\n*Note: basis does not show data point and detail text on hover *", "0-0": "`smoothing`", "0-1": "Smoothing Method", "h-1": "Value", "h-2": "Description" }, "cols": 3, "rows": 1 } [/block] #Latest Value [block:html] { "html": "<iframe class=\"hapi-chart\" src='https://chart.humanapi.co/v1/human/blood_pressure?chart_token=demo&color=lightblue' > </iframe>" } [/block] [block:code] { "codes": [ { "code": "/v1/human/blood_pressure?chart_token=demo&color=lightblue", "language": "http" } ] } [/block] [block:html] { "html": "<div class=\"chart-summary\">\n <div class=\"left-sum\"> \n <h5> Available For: </h5>\n <ul>\n <li> Discrete Resources\n </ul>\n </div>\n \n <div class=\"right-sum\">\n <h5> Summary </h5>\n <p>\n Shows the latest value retrieved for a particular data type along with the source and time elapsed.\n </p>\n </div>\n</div>" } [/block] **Discrete Resources ** Use any query for a discrete resource without `/readings` #Goal Gauge [block:html] { "html": "<iframe class=\"hapi-chart\" src='https://chart.humanapi.co/v1/human/activities/summaries?chart_token=demo&color=orange&type=gauge&goal=12000&start_date=2015-10-25&end_date=2015-10-25'> </iframe>" } [/block] [block:code] { "codes": [ { "code": "/v1/human/activities/summaries?chart_token=demo&color=orange&type=gauge&goal=12000&start_date=2015-10-25&end_date=2015-10-25", "language": "text" } ] } [/block] [block:html] { "html": "<div class=\"chart-summary\">\n <div class=\"left-sum\"> \n <h5> Available For: </h5>\n <ul>\n <li> Periodic Resources </li>\n </li>\n </ul>\n </div>\n \n <div class=\"right-sum\">\n <h5> Summary </h5>\n <p>\n \tShows a gauge representing how close the user is to a specific goal. (percentage shown on hover)\n </p>\n </div>\n</div>" } [/block] Use any query for a discrete or periodic resource and set `type=gauge` and the `goal` parameter. For today's totals, simply use `days=1` [block:parameters] { "data": { "h-0": "Parameter", "h-1": "Value", "h-2": "Description", "0-0": "`goal`", "0-1": "Integer", "0-2": "The goal value represented as the 100% mark of the gauge." }, "cols": 3, "rows": 1 } [/block] [block:api-header] { "type": "basic", "title": "Chart API Explorer" } [/block] [block:html] { "html": "<style>\n iframe#explorer {\n border: none;\n width: 100%;\n height: 800px;\n }\n</style>\n\n<iframe id=\"explorer\" src=\"https://chart.humanapi.co/explorer\" />" } [/block]