home-assistant.github.io/components/history_graph/index.html
2017-11-05 14:24:39 +00:00

261 lines
11 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>History Graph - Home Assistant</title>
<meta name="author" content="Home Assistant">
<meta name="description" content="Instructions for setting up History Graph.">
<meta name="viewport" content="width=device-width">
<link rel="canonical" href="https://home-assistant.io/components/history_graph/">
<meta property="fb:app_id" content="338291289691179">
<meta property="og:title" content="History Graph">
<meta property="og:site_name" content="Home Assistant">
<meta property="og:url" content="https://home-assistant.io/components/history_graph/">
<meta property="og:type" content="article">
<meta property="og:description" content="Instructions for setting up History Graph.">
<meta property="og:image" content="https://home-assistant.io/images/default-social.png">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@home_assistant">
<meta name="twitter:title" content="History Graph">
<meta name="twitter:description" content="Instructions for setting up History Graph.">
<meta name="twitter:image" content="https://home-assistant.io/images/default-social.png">
<link href="/stylesheets/screen.css" media="screen, projection, print" rel="stylesheet">
<link href="/atom.xml" rel="alternate" title="Home Assistant" type="application/atom+xml">
<link rel='shortcut icon' href='/images/favicon.ico' />
<link rel='icon' type='image/png' href='/images/favicon-192x192.png' sizes='192x192' />
</head>
<body >
<header class='site-header'>
<div class="grid-wrapper">
<div class="grid">
<div class="grid__item three-tenths lap-two-sixths palm-one-whole ha-title">
<a href="/" class="site-title">
<img width='40' src='/demo/favicon-192x192.png'>
<span>Home Assistant</span>
</a>
</div>
<div class="grid__item seven-tenths lap-four-sixths palm-one-whole">
<nav>
<input type="checkbox" id="toggle">
<label for="toggle" class="toggle" data-open="Main Menu" data-close="Close Menu"></label>
<ul class="menu pull-right">
<li><a href="/getting-started/">Getting started</a></li>
<li><a href="/components/">Components</a></li>
<li><a href="/docs/">Docs</a></li>
<li><a href="/cookbook/">Examples</a></li>
<li><a href="/developers/">Developers</a></li>
<li><a href="/blog/">Blog</a></li>
<li><a href="/help/">Need help?</a></li>
<li><a href='#' class='show-search'><i class="icon-search"></i></a></li>
</ul>
</nav>
<div class='search-container' style='display: none'>
<div class='search'>
<i class="icon-search"></i>
<input id='search' placeholder='Search the docs…'>
<a href='#' class='close'><i class="icon-remove-sign"></i></a>
</div>
</div>
</div>
</div>
</div>
</header>
<div class="grid-wrapper">
<div class="grid grid-center">
<div class="grid__item two-thirds lap-one-whole palm-one-whole">
<article class="page">
<header>
<h1 class="title indent">
History Graph
</h1>
</header>
<hr class="divider">
<p class="img">
<img src="/images/screenshots/history_graph.png" />
</p>
<p>The <code class="highlighter-rouge">history_graph</code> component will make the UI display a graph similar to the graphs in <code class="highlighter-rouge">more-info</code> popups and the <a href="/components/history/">history</a> panel.</p>
<p>To use this component in your installation, add the following to your <code class="highlighter-rouge">configuration.yaml</code> file:</p>
<div class="language-yaml highlighter-rouge"><pre class="highlight"><code><span class="c1"># Minimal configuration.yaml entry</span>
<span class="s">history_graph</span><span class="pi">:</span>
<span class="s">gr1</span><span class="pi">:</span>
<span class="s">entities</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">light.ceiling.lights</span>
</code></pre>
</div>
<h3><a class="title-link" name="configuration-variables" href="#configuration-variables"></a> Configuration variables</h3>
<table>
<thead>
<tr>
<th>Attribute</th>
<th>Optional</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code class="highlighter-rouge">entities</code></td>
<td>no</td>
<td> </td>
<td>List of entities whose history to show as a graph.</td>
</tr>
<tr>
<td><code class="highlighter-rouge">name</code></td>
<td>yes</td>
<td>ID</td>
<td>Name to display.</td>
</tr>
<tr>
<td><code class="highlighter-rouge">hours_to_show</code></td>
<td>yes</td>
<td>24</td>
<td>Number of hours to show.</td>
</tr>
<tr>
<td><code class="highlighter-rouge">refresh</code></td>
<td>yes</td>
<td>0</td>
<td>Number of seconds between graph refreshes. 0 for no refreshes.</td>
</tr>
</tbody>
</table>
<h3><a class="title-link" name="full-example" href="#full-example"></a> Full Example</h3>
<div class="language-yaml highlighter-rouge"><pre class="highlight"><code><span class="c1"># Full configuration.yaml entry</span>
<span class="s">history_graph</span><span class="pi">:</span>
<span class="s">gr1</span><span class="pi">:</span>
<span class="s">name</span><span class="pi">:</span> <span class="s">Lights Graph</span>
<span class="s">entities</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">light.ceiling.lights</span>
<span class="pi">-</span> <span class="s">light.bed_light</span>
<span class="s">hours_to_show</span><span class="pi">:</span> <span class="s">240</span>
<span class="s">refresh</span><span class="pi">:</span> <span class="s">60</span>
<span class="s">gr2</span><span class="pi">:</span>
<span class="s">name</span><span class="pi">:</span> <span class="s">Temperature</span>
<span class="s">entities</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">sensor.outside_temperature</span>
<span class="pi">-</span> <span class="s">sensor.inside_temperature</span>
<span class="s">hours_to_show</span><span class="pi">:</span> <span class="s">120</span>
<span class="c1"># refresh: 0</span>
</code></pre>
</div>
</article>
</div>
<aside id="sidebar" class="grid__item one-third lap-one-whole palm-one-whole">
<div class="grid">
<section class="aside-module grid__item one-whole lap-one-half">
<div class='edit-github'><a href='https://github.com/home-assistant/home-assistant.github.io/tree/current/source/_components/history_graph.markdown'>Edit this page on GitHub</a></div>
<div class='brand-logo-container section'>
<img src='/images/supported_brands/home-assistant.png' />
</div>
<div class='section'>
Introduced in release: 0.55
</div>
<div class='section'>
<h1 class="title delta">Category History</h1>
<ul class='divided'>
<li>
<a href='/components/datadog/'>Datadog</a>
</li>
<li>
<a href='/components/dweet/'>Dweet.io</a>
</li>
<li>
<a href='/components/emoncms_history/'>Emoncms history</a>
</li>
<li>
<a href='/components/graphite/'>Graphite</a>
</li>
<li>
<a href='/components/history/'>History</a>
</li>
<li>
History Graph
</li>
<li>
<a href='/components/influxdb/'>InfluxDB</a>
</li>
<li>
<a href='/components/logbook/'>Logbook</a>
</li>
<li>
<a href='/components/logentries/'>Logentries</a>
</li>
<li>
<a href='/components/prometheus/'>Prometheus</a>
</li>
<li>
<a href='/components/recorder/'>Recorder</a>
</li>
<li>
<a href='/components/shiftr/'>Shiftr.io</a>
</li>
<li>
<a href='/components/splunk/'>Splunk</a>
</li>
<li>
<a href='/components/statsd/'>StatsD</a>
</li>
<li>
<a href='/components/thingspeak/'>ThingSpeak</a>
</li>
</ul>
</div>
</section>
</div>
</aside>
</div>
</div>
<footer>
<div class="grid-wrapper">
<div class="grid">
<div class="grid__item">
<div class="copyright">
<a rel="me" href='https://twitter.com/home_assistant'><i class="icon-twitter"></i></a>
<a rel="me" href='https://facebook.com/homeassistantio'><i class="icon-facebook"></i></a>
<a rel="me" href='https://plus.google.com/110560654828510104551'><i class="icon-google-plus"></i></a>
<a rel="me" href='https://github.com/home-assistant/home-assistant'><i class="icon-github"></i></a>
<div class="credit">
Contact us at <a href='mailto:hello@home-assistant.io'>hello@home-assistant.io</a> (no support!).<br>
Website powered by <a href='http://jekyllrb.com/'>Jekyll</a> and the <a href='https://github.com/coogie/oscailte'>Oscalite theme</a>.<br />
Hosted by <a href='https://pages.github.com/'>GitHub</a> and served by <a href='https://cloudflare.com'>CloudFlare</a>.
</div>
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png" /></a><br /><span xmlns:dct="http://purl.org/dc/terms/" property="dct:title">home-assistant.io</span> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License</a>.
</div>
</div>
</div>
</div>
</footer>
<script>
var _gaq=[['_setAccount','UA-57927901-1'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
<script type="text/javascript">
docsearch({
apiKey: 'ae96d94b201c5444c8a443093edf3efb',
indexName: 'home-assistant',
inputSelector: '#search',
debug: false // Set debug to true if you want to inspect the dropdown
});
document.querySelector('.search .close').addEventListener('click', function(ev) {
ev.preventDefault();
document.querySelector('.search-container').style.display = 'none';
});
document.querySelector('.show-search').addEventListener('click', function(ev) {
ev.preventDefault();
document.querySelector('.search-container').style.display = 'block';
document.getElementById('toggle').checked = false;
document.querySelector('.search-container input').focus();
});
</script>
</body>
</html>