Use a workpad in Canvas to jumpstart your APM efforts and present your data in a big, bold, and beautiful way — in real time.

<p>Since <a href="https://www.elastic.co/what-is/kibana-canvas">we launched Canvas in 2018</a>, we have seen tons of our users <a href="https://www.elastic.co/blog/monitoring-airport-security-operations-with-canvas-and-elasticsearch">create beautiful dashboards that tell stories with Elasticsearch data</a>. In the spirit of making it even easier to get started, we are creating templates that you can import and get instantly beautiful dashboards for all the data the Elastic Stack captures.&nbsp;
</p><p>In this article we’ll show you how to use a Canvas template to observe Elastic APM KPIs that complement the current APM home page and tools. Our goal is to release updates to this template, as well as new versions of other <a href="https://www.elastic.co/observability">observability</a>, <a href="https://www.elastic.co/security">security</a>, and <a href="https://www.elastic.co/enterprise-search">enterprise search</a> templates, in the future. We are making our products more integrated and ready for you to use with minimal effort right out of the box. <em>Solutions templates </em>are part of this initiative, and while this particular template needs to be downloaded and installed in Canvas, we are working on ways to deliver templates and updates inside of all Kibana apps, so stay tuned.
</p><h2>What is Elastic APM?</h2><p><a href="https://www.elastic.co/apm">Elastic APM</a> provides deep insights into the health and performance of your applications so you can troubleshoot and get to the root cause of a problem quickly. Along with these detailed insights, APM surfaces the KPIs that your DevOps and monitoring teams need to identify, investigate, and resolve issues.&nbsp;
</p><p>Canvas extends the out-of-the-box APM visualization capabilities by helping you build customized dashboards to surface your KPI data in any way that suits your needs. With Canvas templates, we are making it even easier for you to get started on your personalization/customization journey. The <strong>Elastic APM Service KPI template</strong> makes it easy to create highly customized and beautiful Canvas workpads that surface all of your service KPI data in one place.&nbsp;
</p><h2>Using the Elastic APM Service KPI template</h2><p>By the end of this article, you’ll have imported and connected the template to your data, enabling you to get better visibility into your APM data. The workpad uses the four golden signals of monitoring: latency (the time it takes to send a request and receive a response), traffic (a measure of the number of requests across a network), errors (misconfigurations, broken dependencies, etc.), and saturation (the load on your network and server resources).
</p><h3>Prerequisites</h3><p>You must be using an instance with the Elastic Common Schema (ECS) 1.5 or later enabled. If this is new to you, please visit our <a href="https://www.elastic.co/guide/en/ecs/current/index.html">ECS documentation</a>, and then come back here when it’s set up. You also need APM data in your system, which is by default called apm-*. You can still download the Canvas template, but you’ll have to change around the data sources for each element. This might be what you want, so by all means go ahead.
</p><h3>Download and import the APM Canvas workpad</h3><p>You can download and import the template as a workpad. A workpad can be edited and/or cloned. If you overwrite the original template you can always import again.
</p><h3>Import as a workpad</h3><ol>
	<li>Download the <a href="https://assets.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt702d5655279f4e98/5f3d8a2a1020421e0b078218/blog-canvas-for-o11y-apm-template.json?elektra=blog-canvas-for-o11y-apm">Canvas APM JSON file here</a>&nbsp;(<strong></strong>Right-click &gt; Save As).&nbsp;Pay attention to where you put it — we’ll need it in a minute.</li>
	<li>From Kibana, open <strong>Canvas, </strong>then<strong> Import workpad JSON file</strong>.</li>
	<li>Browse for the workpad JSON file you just downloaded, then click <strong>Open.</strong></li>
	<li>Open the workpad.</li>
	<li>If this does not yield something similar to the result above, see the FAQ below.</li>
</ol><h3>Visualize your APM data in Canvas</h3><p>And that’s it! Now you can visualize your APM data in this prebuilt Canvas workpad. If you’ve never used Canvas before, or if you’ve only used it a little, we encourage you to explore. Make changes, tune it for your data, experiment with all the options. And if you break anything, don’t worry — you can just delete the workpad and start over.
</p><p><img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt10b6a0c4910f9a2b/5f457d8da9d4814afda14049/blog-canvas-observability.png" data-sys-asset-uid="blt10b6a0c4910f9a2b" alt="blog-canvas-observability.png"></p><h2>Observability and beyond</h2><p>Canvas is a powerful tool for making robust, real-time visualization of all of your data, not just APM. After you’ve had a chance to get to know the APM template, we encourage you to add data from your other data sources. Correlating APM traces with <a href="https://www.elastic.co/log-monitoring">logs</a> and <a href="https://www.elastic.co/infrastructure-monitoring">metrics</a> is the only way to achieve full observability. Not using Elastic APM yet? Try it out for yourself in a <a href="https://www.elastic.co/elasticsearch/service">free trial of Elasticsearch Service</a> or explore sample data in our <a href="https://demo.elastic.co/app/apm">live Elastic APM demo</a>.
</p><h2>Frequently asked questions (FAQ)</h2><p>Q: I can’t load the template or can’t find it.
</p><p>A: The file might be corrupt. Try downloading it again. The file may also not be in the spot you thought it was. Make sure you put it in a spot where you have rights to access it.&nbsp;&nbsp;
</p><p>Q: After loading, why does the template have a bunch of errors and exclamation marks?
</p><p>A: The data for elements with errors and exclamation marks is likely not connected correctly in the data tab of each element. You’ll have to change the queries on the data tab, and perhaps toggle some things on the display tab to reflect the proper index and field names, especially if you’ve changed them or if you are not using ECS. Note that <a href="https://www.elastic.co/guide/en/ecs/current/index.html">ECS</a> with apm-* indices are prerequisites for this workpad to work out of the box. For information about how to connect your data, refer to <a href="https://www.elastic.co/guide/en/kibana/current/canvas.html#add-canvas-elements">Add elements</a>.
</p><p>Q: Where can I get support on this template?
</p><p>A: You can try <a href="https://discuss.elastic.co">discuss.elastic.co</a> or our <a href="https://ela.st/slack">Elastic Slack channel</a>.
</p>

blog-banner-charts-monitor.png

blog-thumb-charts-monitor.png

Bold, insightful, real-time: Visualizing APM data with Canvas in Kibana

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

Bold, insightful, real-time: Visualizing APM data with Canvas in Kibana

Canvas: Data Table and Debug Elements

Canvas: Metric and Markdown Elements

Getting Started with Canvas in Kibana

Products & Solutions

Company

Resources

Featured topics

News

Articles by Ethan Groves

Bold, insightful, real-time: Visualizing APM data with Canvas in Kibana

Canvas: Data Table and Debug Elements

Canvas: Metric and Markdown Elements

Getting Started with Canvas in Kibana