Learn how to work with the Data Table and Debug elements in Canvas, using a sample data set built into Elasticsearch and Kibana.

canvas_debug_banner.jpg

thumb-bw-gears-motor.jpg

Canvas: Data Table and Debug Elements

Learn how to work with the Metric and Markdown elements in Canvas, using a sample data set built-in to Elasticsearch and Kibana.

fullbleed2.jpg

canvas_metric_thumb.jpg

Canvas: Metric and Markdown Elements

Learn how to use Canvas to create pixel-perfect presentations and slide decks that pull live data directly from Elasticsearch.

<table style="background: #FFFFD2;">
<tbody>
<tr>
	<td><i>Updated Dec 21, 2018: Canvas ships with Kibana 6.5+ and no longer needs to be installed separately.<br><i>Canvas also comes ready to roll in the&nbsp;<a href="https://www.elastic.co/cloud/elasticsearch-service">Elasticsearch Service - try it out free for 14-days</a>.</i><br></i>
	</td>
</tr>
</tbody>
</table><h4>Manually updating scoreboards and presentations is a thing of the past.</h4><p>Canvas is a presentation tool — built into Kibana — that allows users to create pixel-perfect presentations and slide decks that pull live data directly from Elasticsearch. This means no manual updates for presentations, resulting in up-to-the-minute visuals, chart elements, and graphics. However, Canvas can be many things and has the flexibility to be used for more than just the primary use case presented in this article.
</p><p>Below is a video of Rashid Khan, the creator of Canvas, presenting his vision for Canvas at Elastic{ON} 2018.
</p><div class="video embed-container" style="height: 319.725px;">
	<img style="width: 100%; margin: auto; display: block;" class="vidyard-player-embed" src="https://play.vidyard.com/ga3NJzS76dX9kCgVaDBCrV.jpg" data-uuid="ga3NJzS76dX9kCgVaDBCrV" data-v="4" data-type="inline">
</div><h2>Why use Canvas</h2><p>Creating a presentation can be a time consuming process, especially when the data being presented requires manipulation in order to make it more palatable to the audience than pure JSON. Even something as simple as taking a screenshot of a bar graph and then dropping the image into a presentation can be tedious if the data in the bar graph needs to be updated regularly. Unfortunately, it's not uncommon to need to export your data, clean it up, paste it into your presentation, add images, and more. This can quickly become a very painful and arduous process.
</p><p>These concerns don't even begin to address the possibility of adjusting things on the fly (i.e. live during a presentation). Imagine a presentation which contains a slide displaying the company earnings report broken down by quarter. What would happen if, during the presentation, the CEO asked to see the earnings report broken down by month? Either, someone prepared that slide ahead of time, or the presenter is simply forced to say, "Umm, let me get back to you with that information later."
</p><p>Canvas not only removes the tedium of constantly updating visualizations in a presentation, it also gives its users powerful tools and filters to adjust data on the fly, allowing for very flexible, dynamic, and compelling presentations.
</p><h2>Prerequisites and Installing Canvas</h2><h3>Prerequisites&nbsp;(no need if&nbsp;<a href="https://www.elastic.co/cloud/elasticsearch-service">running in the cloud</a>)</h3><p>To get started with Canvas, you will need the following:
</p><ul>
	<li>Elasticsearch for storing and indexing data</li>
	<li>Kibana for the UI</li>
</ul><p>If you don't already have these installed and running, see <a href="/guide/en/elastic-stack-get-started/6.4/get-started-elastic-stack.html">Getting started with the Elastic Stack</a> for more information. Also check out this <a href="https://github.com/elastic/quick-deploy">Quick Deploy repo</a>, which provides an easy way to get Elasticsearch and Kibana up and running on a Ubuntu machine within minutes.
</p><h3>Installing Canvas</h3><p>Starting in version 6.5, Canvas ships with the default distribution of Kibana. Simply install <a href="/downloads/elasticsearch">Elasticsearch</a> and <a href="/downloads/kibana">Kibana</a> to get started with Canvas&nbsp;or spin up a&nbsp;<a href="https://www.elastic.co/cloud/elasticsearch-service">14-day Elasticsearch Service trial</a>. <i>(Note: This section was updated in December 2018 to reflect the instructions for version 6.5 and newer)</i>
</p><h2>Data Sources</h2><p>For the purposes of this tutorial, we're going to use <a href="/beats/metricbeat">Metricbeat</a> as a quick, easy, and relatively predictable source of live data.
</p><h3>1. Download and Unzip Metricbeat</h3><p>Visit the <a href="/downloads/beats/metricbeat">Metricbeat download page</a> to download the correct binary for your OS. Once you have downloaded it, go ahead and unpack it. Once unpacked, you will find several files in the Metricbeat directory.
</p><h3>2. Configuring Metricbeat</h3><p>Next we need to configure Metricbeat to send data to your Elasticsearch instance. Open <code>metricbeat.yml</code> with your favorite code editor. If your Elasticsearch instance is...
</p><ol>
	<li><strong>Local:</strong> The default configuration is already setup to send data to Elasticsearch (running at <code>http://localhost:9200</code>), so you shouldn't have to change anything. If you do need to change something, the process is the same as in the next step.</li>
	<li><strong>Remote:</strong> Go to the <em>Elasticsearch output</em> section and modify it to point to your instance:
	<pre class="prettyprint">setup.kibana:
  host: "url-to-my-kibana-instance:5601"
...
...
output.elasticsearch:
  hosts: ["url-to-my-elasticsearch-instance:9200"]
    </pre>
	</li>
</ol><h3>3. Run Metricbeat</h3><p>Save the metricbeat.yml file. Then run metricbeat with the <code>-setup</code> option, which will tell the system to load the default metrics dashboards to Kibana.
</p><pre class="prettyprint">./metricbeat -c metricbeat.yml -setup -e
</pre><p><em>TIP: if you add the -e option when running Metricbeat you can see the logs while running.</em>
</p><h2>How to create your first Canvas workpad</h2><p>Canvas projects are called "workpads". Workpads are analogous to presentations and can have multiple pages.
</p><ol>
	<li>Once you have Canvas installed and Metricbeat set up, navigate to your Kibana instance, and select <em>Canvas</em> from the sidebar (as shown below)</li>
	<li>Click "Create workpad"</li>
	<li>Give your workpad a unique name</li>
</ol><p><img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/bltdb55167a4649a9ed/5c5837f365ace9e30b316503/image1.gif" data-sys-asset-uid="bltdb55167a4649a9ed" alt="image1.gif" data-image="r6kb6wouo89k">
</p><h3>Anatomy of the Canvas Interface</h3><p><br>
</p><p><img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt1ad52e250654077f/5c304e37c05f480270a742ec/canvas.jpg" data-sys-asset-uid="blt1ad52e250654077f" alt="canvas.jpg" data-image="kmsbacpo2o38">
</p><ol>
	<li><strong>Buttons</strong>
	<ul>
		<li><strong>Data Refresh Interval</strong> - Set the interval that Canvas checks for updates from Elasticsearch</li>
		<li><strong>Toggle Fullscreen</strong> - Toggles "Presentation mode"</li>
		<li><strong>Export Workpad</strong> - Exports the workpad as a PDF file</li>
		<li><strong>Toggle Editing Sidebar</strong> - Hides section 6 in the diagram above</li>
	</ul>
	</li>
	<li><strong>Add Element</strong> - This brings up the element picker, so you can add charts, graphs, images, and more to your canvas workpad</li>
	<li><strong>Element Layer Control</strong> - Choose which elements are on top, allowing for compositing and hiding</li>
	<li><strong>Duplicate an Element</strong> - Note: an element must be selected for this to work</li>
	<li><strong>Canvas Workpad</strong> - The main work area</li>
	<li><strong>Editing Controls</strong> - Context-aware panel that presents property editing for selected elements, including fonts, colors, custom style sheets, etc.</li>
	<li><strong>Opens Canvas Main Menu</strong> - Navigate between workpads, clone, import, export, or delete workpads</li>
	<li><strong>Page Control</strong> - Add new pages or switch between existing ones</li>
	<li><strong>Element Code Editor</strong> - When in doubt, code it out. Complete flexibility on your queries, formatting, and pipelines (more on this in a later post)</li>
</ol><h2 id="canvas_elements">Creating your first elements in Canvas</h2><h3>Element Types</h3><p><img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/bltff2744f4cd06c410/5c5839ba122247d10be8ecad/image8.jpg" data-sys-asset-uid="bltff2744f4cd06c410" data-image="ryao0cojup41" style="display: block; margin: auto;">
</p><ol>
	<li>Click "Add element"</li>
	<li>Canvas comes with many built-in element which we can leverage immediately. Select the "Horizontal Bar Chart" element.
	<br><em>TIP: When an element is first created, it is populated with demo data so you can start playing right away!</em></li>
	<li>In the panel on the right, select the "Data" tab</li>
	<li>Click "Change your data source"</li>
	<li>Select "Elasticsearch Raw Documents"
	<br>
	<br>
	<table style="border:none">
	<tbody>
	<tr>
		<td style="border:none"><img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt7ce97e22180c753c/5c57de54773ad9030c5c2bfa/image5_small.png" data-sys-asset-uid="blt7ce97e22180c753c" alt="image5_small.png" data-image="ryx7ffiomaa2">
		</td>
		<td style="vertical-align:middle; border:none"><strong>Datasources Explained:<br></strong><br>
			<ul>
				<li><strong>Demo Data:</strong> This is a small sample dataset that is used when you first create a new canvas element. Mostly used for testing purposes.</li>
				<li><strong>Elasticsearch Raw Documents:</strong> This is allows you to access your raw data in Elasticsearch.</li>
				<li><strong>Timelion:</strong> Timelion provides a specialized way for handling your time series data in Elasticsearch.</li>
				<li><strong>Elasticsearch SQL:</strong> Similar to Raw Documents, this allows you to access your data in Elasticsearch using SQL syntax feature.</li>
			</ul>
		</td>
	</tr>
	</tbody>
	</table>
	</li>
	<li>Select the <code>metricbeat-*</code> index from the drop down list</li>
	<li>Go to the bottom of the sidebar and click "Save"</li>
	<li>Go back to the top of the sidebar, and select the "Display" tab</li>
	<li>We will plot the round-trip time against the name of the metricset, so we set the axes for the bar graph as follows:
	<ul>
		<li>X-Axis:
		<ul>
			<li>Measurement: Value</li>
			<li>Field: metricset.rtt</li>
		</ul>
		</li>
		<li>Y-Axis
		<ul>
			<li>Measurement: Value</li>
			<li>Field: metricset.name</li>
		</ul>
		</li>
		<li>Color
		<ul>
			<li>Measurement: Value</li>
			<li>Field: metricset.name</li>
		</ul>
		</li>
	</ul>
	</li>
</ol><p><img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt251899278831d9b2/5c304cae29d13af10bc2ab20/image7.gif" data-sys-asset-uid="blt251899278831d9b2" data-image="8viqpbbag34l" style="display: block; margin: auto;">
</p><p>Let's add one more element…
</p><ol>
	<li>Click "Add element"</li>
	<li>Select the "Metric" element</li>
	<li>Drag it over to somewhere you can see it better</li>
	<li>In the panel on the right, select the "Data" tab</li>
	<li>This time, select "Elasticsearch SQL"</li>
	<li>Type the following into the SQL query editor:<br>
	<code>SELECT COUNT(*) FROM metricbeat*</code></li>
	<li>Click "Save"</li>
	<li>Notice that the element now shows a warning. This is because the element is no longer pulling any data.</li>
	<li>At the top of the sidebar, select the "Display" tab</li>
	<li>In the "Numbers" section, set the following:
	<ul>
		<li>Measurement: <code>Value</code></li>
		<li>Field: <code>COUNT_1</code></li>
	</ul>
	</li>
	<li>Change the label for this element to be "Entries", since this is showing the number of entries in Elasticsearch</li>
	<li>As long as Metricbeat is still running, we will see this number update live. In the top left-hand side of the screen, click on "Refresh"</li>
	<li>Set the refresh rate to be 5 seconds</li>
	<li>Watch your presentation update with live data!</li>
</ol><p><img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt91dde0dbfdd24acc/5c30479f4657a057675ba64a/image4.gif" data-sys-asset-uid="blt91dde0dbfdd24acc" alt="image4.gif" data-image="rgzo7mc3zlk3">
</p><h3>No more manually updating your presentation!</h3><p><img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt036f8600b18aa124/5c583bf4a669c2e50b763f2f/image6.2018-10-11_11_23_03.gif" data-sys-asset-uid="blt036f8600b18aa124" data-image="w7sjb3qo1lnh" style="display: block; margin: auto;">
</p><h2>Links to other helpful resources</h2><p>That's it! You've just created your first canvas workpad with live data being piped in via Metricbeat. Try adding some other elements to your workpad and experimenting with the capabilities of Canvas!
</p><p>Also, check out some other Canvas tutorials here:
</p><ul>
	<li><a href="/blog/kibana-canvas-metric-and-markdown-elements">Working with Metric and Markdown Elements in Canvas</a></li>
	<li><a href="/blog/kibana-canvas-data-table-and-debug-elements">Working with Data Table and Debug Elements in Canvas</a></li>
	<li><a href="/blog/elasticon-kibana-canvas-story-elasticoffee">But First, Coffee... (An Elastic{ON} Canvas Story)</a></li>
	<li><a href="/blog/elasticon-kibana-canvas-story-ama">Here to Help... (An Elastic{ON} Canvas Story)</a></li>
</ul><hr><p><em>Banner Image: "<a href="https://www.flickr.com/photos/ekilby/711547840">By hand</a>" by <a href="https://www.flickr.com/photos/ekilby/">Eric Kilby</a>, used under <a href="https://creativecommons.org/licenses/by/2.0/">CC BY</a> / Cropped from original</em>
</p>

Articles By Ethan Groves

Canvas: Data Table and Debug Elements

Canvas: Metric and Markdown Elements

Getting Started with Canvas in Kibana

Products & Solutions

Company

Resources

SaaS

ORCHESTRATION

Articles By Ethan Groves

Canvas: Data Table and Debug Elements

Canvas: Metric and Markdown Elements

Getting Started with Canvas in Kibana