Conoce cómo trabajar con los elementos de tabla de datos (Data Table) y depuración (Debug) en Canvas mediante un conjunto de datos de muestra integrado

canvas_debug_banner.jpg

thumb-bw-gears-motor.jpg

Canvas: Data Table and Debug Elements

Canvas: Elementos de tabla de datos y depuración

Canvas: Metric and Markdown Elements

Canvas: Elementos de métrica y reducción

<table style="background: #FFFFD2;">
<tbody>
<tr>
	<td><i>Actualizado el 21 de diciembre de 2018: Canvas se envía con Kibana 6.5+ y ya no hace falta instalarla por separado.</i>
	</td>
</tr>
</tbody>
</table>
<h4>La actualización manual de marcadores y presentaciones es cosa del pasado.</h4>

<p>Canvas es una herramienta de presentaciones —integrada en Kibana— que permite que los usuarios creen presentaciones y diapositivas de alta calidad visual que extraen datos en vivo directamente desde Elasticsearch. Esto significa que no hay actualizaciones manuales para las presentaciones, lo que permite tener objetos visuales, elementos de tablas y gráficos actualizados instantáneamente. Sin embargo, Canvas puede ser muchas cosas y tiene la flexibilidad de usarse para algo más que el caso de uso primario presentado en este artículo.
</p>
<p>El siguiente es un video de Rashid Khan, el creador de Canvas, en el que presenta su visión de Canvas en 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>Por qué usar Canvas</h2>

<p>Crear una presentación puede ser un proceso que toma mucho tiempo, especialmente cuando los datos presentados deben manipularse para que la audiencia pueda apreciarlos mejor que si se tratara de JSON puro. Incluso algo tan simple como sacar una captura de pantalla de un gráfico de barras y luego insertar la imagen en una presentación puede ser tedioso si los datos del gráfico de barras deben actualizarse con regularidad. Desafortunadamente, no es raro que se necesite exportar los datos, limpiarlos, pegarlos en la presentación, agregar imágenes, y más. Esto puede convertirse rápidamente en un proceso desagradable y difícil.
</p>
<p>Estas inquietudes ni siquiera comienzan a abordar la posibilidad de adaptar las cosas sobre la marcha (es decir, en vivo durante una presentación). Imagina una presentación que contiene una diapositiva que muestra el reporte de ganancias de la compañía desglosado por trimestre. ¿Qué sucedería si, durante la presentación, el director general pidiera ver el reporte de ganancias desglosado por mes? Si alguien no preparó esa diapositiva con anticipación, el presentador simplemente se ve obligado a decir: "Umm, permíteme que te dé la información más tarde".
</p>
<p>Canvas no solo elimina el problema&nbsp;de actualizar constantemente las visualizaciones en una presentación, sino que también brinda a los usuarios herramientas y filtros potentes para adaptar los datos sobre la marcha, al permitirles crear presentaciones muy flexibles, dinámicas y atractivas.
</p>

<h2>Requisitos previos e instalación de Canvas</h2>

<h3>Requisitos previos</h3>

<p>Para comenzar a usar Canvas, necesitarás lo siguiente:
</p>
<ul>
	<li>Elasticsearch para almacenar e indexar datos</li>
	<li>Kibana para la UI</li>
</ul>
<p>Si aún no tienes estas herramientas instaladas y en funcionamiento, consulta <a href="/guide/en/elastic-stack-get-started/6.4/get-started-elastic-stack.html">Primeros pasos con el Elastic Stack</a> para obtener más información. También revisa este <a href="https://github.com/elastic/quick-deploy">Repositorio de implementación rápida</a>, que ofrece una manera simple para tener Elasticsearch y Kibana listos y funcionando en un equipo Ubuntu en solo minutos.
</p>
<h3>Instalación de Canvas</h3>

<p>A partir de la versión 6.5, Canvas se envía con Kibana y ya no hace falta instalarla por separado. Simplemente instala <a href="/es/downloads/elasticsearch">Elasticsearch</a> y <a href="/es/downloads/kibana">Kibana</a> para dar los primeros pasos con Canvas. <i>(Nota: En diciembre de 2018, se actualizó esta sección para reflejar las instrucciones de la versión 6.5 y posteriores)</i>
</p>

<h2>Fuentes de datos</h2>

<p>Para fines de este tutorial, usaremos <a href="/es/beats/metricbeat">Metricbeat</a> como una fuente rápida, fácil y relativamente predecible de datos en vivo.
</p>
<h3>1. Descarga y descomprime Metricbeat.</h3>

<p>Visita la <a href="/es/downloads/beats/metricbeat">página de descarga de Metricbeat</a> para descargar el binario correcto para tu SO. Una vez descargado, deberás desempaquetarlo. Una vez desempaquetado, encontrarás varios archivos en el directorio de Metricbeat.
</p>
<h3>2. Configuración de Metricbeat</h3>

<p>A continuación, necesitamos configurar Metricbeat para enviar datos a tu instancia de Elasticsearch. Abre <code>metricbeat.yml</code> con tu editor de código favorito. Si tu instancia de Elasticsearch es...
</p>
<ol>
	<li><strong>Local:</strong> La configuración predeterminada ya está configurada para enviar datos a Elasticsearch (ejecutándose en <code>http://localhost:9200</code>), por lo que no deberías tener que cambiar nada. Si necesitas cambiar algo, el proceso es el mismo que el del paso siguiente.</li>
	<li><strong>Remota:</strong> Visita la sección <em>Salida de Elasticsearch</em> y modifícala para que se dirija a tu instancia:
	<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. Ejecuta Metricbeat.</h3>

<p>Guarda el archivo metricbeat.yml. Luego, ejecuta metricbeat con la opción <code>"Setup" (Configuración)</code>, que le indicará al sistema que cargue los dashboards de métricas predeterminados en Kibana.
</p>
<pre class="prettyprint">./metricbeat -c metricbeat.yml -setup -e
</pre>
<p><em>SUGERENCIA: Si agregas la opción -e al ejecutar Metricbeat, podrás ver los logs durante la ejecución.</em>
</p>

<h2>Cómo crear tu primer panel de trabajo de Canvas</h2>

<p>Los proyectos de Canvas se denominan "paneles de trabajo". Los paneles de trabajo son similares a las presentaciones y pueden tener varias páginas.
</p>
<ol>
	<li>Una vez que hayas instalado Canvas y configurado Metricbeat, navega a tu instancia de Kibana y selecciona <em>Canvas</em> de la barra lateral (como se muestra a continuación).</li>
	<li>Haz clic en "Create workpad" (Crear panel de trabajo).</li>
	<li>Proporciona un nombre único a tu panel de trabajo.</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>Anatomía de la interface de Canvas</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>Botones</strong>
	<ul>
		<li><strong>Intervalo de actualización de datos</strong>: Establece el intervalo en el cual Canvas revisa si hay actualizaciones de Elasticsearch.</li>
		<li><strong>Activar/desactivar pantalla completa</strong>: Activa o desactiva el "modo de presentación".</li>
		<li><strong>Exportar panel de trabajo</strong>: Exporta el panel de trabajo como archivo PDF.</li>
		<li><strong>Alternar edición de la barra lateral</strong>: Oculta la sección 6 en el diagrama anterior.</li>
	</ul>
	</li>
	<li><strong>Agregar elemento</strong>: Esto muestra el selector de elementos, por lo que puedes agregar tablas, gráficos, imágenes y más a tu panel de trabajo de Canvas.</li>
	<li><strong>Control de capa de elemento</strong>: Elige qué elementos están por encima, lo cual permite componer y ocultar.</li>
	<li><strong>Duplicar un elemento</strong> - Nota: debe seleccionarse un elemento para que esto funcione.</li>
	<li><strong>Panel de trabajo de Canvas</strong>: El área de trabajo principal.</li>
	<li><strong>Controles de edición</strong>: Panel relacionado con el contexto que presenta edición de propiedades para elementos seleccionados, que incluyen fuentes, colores, hojas de estilo personalizadas, etc.</li>
	<li><strong>Abrir menú principal de Canvas</strong>: Navega entre paneles de trabajo, clona, importa, exporta o elimina paneles de trabajo.</li>
	<li><strong>Control de página</strong>: Agrega páginas nuevas o alterna entre las existentes.</li>
	<li><strong>Editor de código de elemento</strong>: Cuando tengas dudas, codifícalo. Flexibilidad total en tus consultas, formatos y pipelines (encontrarás más información sobre esto en un artículo posterior)</li>
</ol>

<h2 id="canvas_elements">Cómo crear tus primeros elementos en Canvas</h2>

<h3>Tipos de elementos</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>Haz clic en "Add element" (Agregar elemento).</li>
	<li>Canvas incluye una variedad de elementos integrados que pueden aprovecharse de forma inmediata. Selecciona el elemento "Horizontal Bar Chart" (Gráfico de barras horizontal).
	<br><em>SUGERENCIA: Cuando un elemento se crea por primera vez, se completa con datos de demostración para que puedas comenzar a reproducirlo de inmediato.</em></li>
	<li>En el panel de la derecha, selecciona la pestaña "Data" (Datos).</li>
	<li>Haz clic en "Change your data source" (Cambiar la fuente de datos).</li>
	<li>Selecciona "Elasticsearch Raw Documents" (Documentos sin procesar de Elasticsearch).
	<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>Explicación de las fuentes de datos:<br></strong><br>
			<ul>
				<li><strong>Datos de demostración:</strong> Este es un pequeño set de datos de muestra que se usa cuando creas por primera vez un nuevo elemento de Canvas. Se usa principalmente para fines de prueba.</li>
				<li><strong>Documentos sin procesar de Elasticsearch:</strong> Esto te permite acceder a tus datos sin procesar en Elasticsearch.</li>
				<li><strong>Timelion:</strong> Timelion proporciona una manera especializada para manejar tus datos temporales en Elasticsearch.</li>
				<li><strong>Elasticsearch SQL:</strong> De manera similar a los documentos sin procesar, esto te permite acceder a tus datos en Elasticsearch al usar la característica de sintaxis SQL.</li>
			</ul>
		</td>
	</tr>
	</tbody>
	</table>
	</li>
	<li>Selecciona el índice <code>metricbeat-*</code> de la lista desplegable.</li>
	<li>Ve al final de la barra lateral y haz clic en "Save" (Guardar).</li>
	<li>Vuelve a la parte superior de la barra lateral y selecciona la pestaña "Display" (Pantalla).</li>
	<li>Graficaremos el tiempo de ida y vuelta contra el nombre del set de métricas, por lo que configuramos los ejes para el gráfico de barras de la siguiente manera:
	<ul>
		<li>Eje X:
		<ul>
			<li>Medición: Valor</li>
			<li>Campo: metricset.rtt</li>
		</ul>
		</li>
		<li>Eje Y:
		<ul>
			<li>Medición: Valor</li>
			<li>Campo: metricset.name</li>
		</ul>
		</li>
		<li>Color
		<ul>
			<li>Medición: Valor</li>
			<li>Campo: 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>Agreguemos un elemento más...
</p>
<ol>
	<li>Haz clic en "Add element" (Agregar elemento).</li>
	<li>Selecciona el elemento "Metric" (Métrica).</li>
	<li>Arrástralo hacia alguna ubicación en la que puedas verlo mejor.</li>
	<li>En el panel de la derecha, selecciona la pestaña "Data" (Datos).</li>
	<li>Esta vez, selecciona "Elasticsearch SQL".</li>
	<li>Escribe lo siguiente en el editor de búsqueda SQL:<br>
	<code>SELECT COUNT(*) FROM metricbeat*</code></li>
	<li>Haz clic en "Save" (Guardar).</li>
	<li>Observa que el elemento ahora muestra una advertencia. Esto se debe a que el elemento ya no extrae ningún dato.</li>
	<li>En la parte superior de la barra lateral, selecciona la pestaña "Display" (Pantalla).</li>
	<li>En la sección "Numbers" (Números), configura lo siguiente:
	<ul>
		<li>Medición: <code>Valor</code></li>
		<li>Campo: <code>COUNT_1</code></li>
	</ul>
	</li>
	<li>Cambia la etiqueta para este elemento a "Entries" (Entradas), dado que muestra la cantidad de entradas en Elasticsearch.</li>
	<li>Siempre que Metricbeat siga ejecutándose, este número se actualizará en vivo. En el lado superior izquierdo de la pantalla, haz clic en "Refresh" (Actualizar).</li>
	<li>Configura la frecuencia de actualización en 5&nbsp;segundos.</li>
	<li>Observa cómo tu presentación se actualiza con datos en vivo.</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>Ya no necesitarás actualizar manualmente tu presentación.</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>Enlaces a otros recursos útiles</h2>

<p>Eso es todo. Acabas de crear tu primer panel de trabajo de Canvas con datos en vivo redireccionados a través de Metricbeat. Intenta agregar otros elementos a tu panel de trabajo y experimentar con las capacidades de Canvas.
</p>
<p>Además, revisa otros tutoriales de Canvas aquí:
</p>
<ul>
	<li><a href="/es/blog/kibana-canvas-metric-and-markdown-elements">Cómo trabajar con métricas y Markdown en Canvas</a></li>
	<li><a href="/es/blog/kibana-canvas-data-table-and-debug-elements">Cómo trabajar con tablas de datos y elementos de depuración en Canvas</a></li>
	<li><a href="/es/blog/elasticon-kibana-canvas-story-elasticoffee">Pero primero, un café... (Una historia sobre Canvas de Elastic{ON})</a></li>
	<li><a href="/es/blog/elasticon-kibana-canvas-story-ama">Estamos aquí para ayudarte... (Una historia sobre Canvas de Elastic{ON})</a></li>
</ul>
<hr>
<p><em>Imagen de banner: "<a href="https://www.flickr.com/photos/ekilby/711547840">By hand</a>" por <a href="https://www.flickr.com/photos/ekilby/">Eric Kilby</a>, usada bajo <a href="https://creativecommons.org/licenses/by/2.0/">CC BY</a> /Recortada del original</em>
</p>

Getting Started with Canvas in Kibana

Primeros pasos con Canvas en Kibana

Start free trial

Blog Footer CTA

Sign up for Elastic Cloud free trial

Ethan_Groves.jpg

Eng Sr, Product Marketing

Ethan Groves

<p>By submitting you acknowledge that you've read and agree to our <a href="/legal/elastic-cloud-account-terms" target="_self">Terms of Service</a>, and you agree to receive the <a href="/legal/privacy-statement#how-we-use-the-information" target="_self">selected communications</a> at the contact details you provided above. See <a href="/legal/privacy-statement/" target="_self">Elastic’s Privacy Statement</a> for more details or to opt-out at any time.</p>

Communication Preferences - ONLY for /communication-preferences

<p>Al enviar, confirma que ha leído y acepta nuestras <a href="/es/legal/elastic-cloud-account-terms" target="_self">Condiciones de servicio</a>, y que acepta recibir las <a href="/es/legal/privacy-statement#how-we-use-the-information" target="_self">comunicaciones seleccionadas</a> en los detalles de contacto que proporcionó anteriormente. Consulte la <a href="/es/legal/privacy-statement/" target="_self">Declaración de privacidad de Elastic</a> para obtener más información o para cancelar su suscripción en cualquier momento.</p>

<p>By submitting you acknowledge that you've read and agree to our <a href="/legal/serverless-preview-terms" target="_blank">Terms of Service</a>, and that Elastic may <a href="/legal/privacy-statement#how-we-use-the-information" target="_blank">contact you</a> about our related products and services, using the details you provide above. See <a href="/legal/privacy-statement/" target="_blank">Elastic’s Privacy Statement</a> for more details or to opt-out at any time.</p>

Serverless GDPR Text

<p>Al enviar, confirma que ha leído y acepta nuestras <a href="/es/legal/serverless-preview-terms" target="_self">Condiciones de servicio</a>, y que Elastic puede <a href="/es/legal/privacy-statement#how-we-use-the-information" target="_self">ponerse en contacto con usted</a> acerca de nuestros productos y servicios relacionados. Consulte la <a href="/es/legal/privacy-statement/" target="_self">Declaración de privacidad de Elastic</a> para obtener más información o para cancelar su suscripción en cualquier momento.</p>

<p>By submitting you agree to <a href="/agreements/global/cloud-services-monthly" rel="nofollow">Elastic Cloud Terms of Service</a>. Your personal data will be processed in accordance with <a href="/legal/privacy-statement">Elastic's Privacy Statement</a>.</p>

Cloud Trial GDPR Text

<p>Al enviar esta información, aceptas los <a href="/es/agreements/global/cloud-services-monthly" rel="nofollow">Términos de servicio de Elastic</a>. Los datos personales se procesarán de conformidad con la <a href="/es/legal/privacy-statement">declaración de privacidad de Elastic</a>.
</p>

<p>By submitting you acknowledge that you've read and agree to our <a href="/legal/terms-of-use" target="_blank">Terms of Service</a>, and that Elastic may <a href="/legal/privacy-statement#how-we-use-the-information" target="_blank">contact you</a> about our related products and services, using the details you provide above. See <a href="/legal/privacy-statement/" target="_blank">Elastic’s Privacy Statement</a> for more details or to opt-out at any time.</p>

Newsletter GDPR Text

<p>Al enviar, confirma que ha leído y acepta nuestras <a href="/es/legal/terms-of-use" target="_self">Condiciones de servicio</a>, y que Elastic puede <a href="/es/legal/privacy-statement#how-we-use-the-information" target="_self">ponerse en contacto con usted</a> acerca de nuestros productos y servicios relacionados. Consulte la <a href="/es/legal/privacy-statement/" target="_self">Declaración de privacidad de Elastic</a> para obtener más información o para cancelar su suscripción en cualquier momento.</p>

Hosted by

All Solutions

Follow us on Youtube

Watch now (no PT)

Articles by

Share by Email

Filters

All (no PT translation)

Contact information

See when this webinar starts in my time zone

Ver cuándo comienza este webinar en mi zona horaria

Thank you for your interest!

Register to Attend

Small image for

Register to Watch

Continue reading

Featured webinar

What to explore next...

Reset all

Load more press releases

Sign In to Attend

Share

Upcoming webinar

Learn more

Search Integrations

Share on Reddit

Share on Twitter

Share on Facebook

Load more news

View more posts

On-demand webinar

Follow us on Facebook

Author

Press Release

You'll also receive an email with related content.

You'll also receive an email with related content

Además, te enviaremos contenidos relevantes

Print

Contact Info

Overview

Video for

Read less

The content on this page is not available in the selected language.

El contenido de esta página no está disponible en el idioma seleccionado. Elastic está trabajando para garantizar que el contenido esté disponible en varios idiomas.Gracias por tu paciencia mientras trabajamos.

Register now

Share this story

See All Posts

See all top stories

View next

Can't make it? Register and we'll send you the recording. You'll also receive an email with related content

¿No puedes asistir? Regístrate y te enviaremos la grabación. También recibirás un correo electrónico con contenido relacionado.

Follow us on LinkedIn

Highlights

Explore similar demos

Follow us on Twitter

Share on LinkedIn

Load More

See more insights

Speakers

Close

Thank you for registering. We will send you a confirmation email soon.

Gracias por registrarte. Te enviaremos un correo electrónico de confirmación pronto.

Author

Articles by Ethan Groves

Eng Sr, Product Marketing, Elastic

Canvas: Elementos de tabla de datos y depuración

Canvas: Elementos de métrica y reducción

Primeros pasos con Canvas en Kibana