Skip to main content

Command Palette

Search for a command to run...

Análisis del precio de las criptomonedas en tiempo real con Microsoft Fabric – Parte 3: Visualización de datos

Updated
9 min read
Análisis del precio de las criptomonedas en tiempo real con Microsoft Fabric – Parte 3: Visualización de datos

En esta sección abordaremos la fase de análisis y visualización de nuestro proyecto en tiempo real.
El objetivo es transformar los datos procesados en la arquitectura Medallion en insights visuales que faciliten la toma de decisiones rápidas y basadas en datos.


Objetivo

Crear un dashboard en tiempo real que muestre métricas clave del mercado de criptomonedas, aprovechando las consultas KQL y las capacidades de visualización de Microsoft Fabric.


Estructura del Dashboard en Tiempo Real

Nuestro dashboard en Microsoft Fabric estará compuesto por dos páginas principales, cada una con un propósito bien definido:

PáginaDescripciónTipo de análisis
🏠 PrincipalMuestra las métricas globales del mercado de criptomonedasAgregaciones generales y KPIs
💡 DetallesProfundiza en una criptomoneda específicaAnálisis individual, histórico y variaciones

Creando un Dashboard en Tiempo Real

Crear el dashboard

  1. En el workspace de Microsoft Fabric, selecciona New > Real-Time Dashboard.

  2. Asigna un nombre y crea el dashboard.

  3. Ábrelo: verás que aparece con una única página y la opción de añadir un tile para comenzar a visualizar datos.


Configuración inicial de la página

  • Renombra la página como Principal.

  • Haz clic en Add tile para añadir la primera visualización.

Al no tener todavía orígenes de datos conectados, aparecerá un aviso. Procedemos entonces a configurarlo.


Conectar el origen de datos

  1. Haz clic en Data source y selecciona Eventhouse / KQL Database.

  2. Selecciona la base de datos KQL creada previamente (por ejemplo: eh_Crypto).

  3. Deja los valores por defecto y confirma para añadir el origen de datos.

Ahora ya podemos escribir consultas KQL para construir visuales.


Crear el primer visual: última fecha de actualización

  1. En el editor, escribe la siguiente consulta para obtener la última fecha registrada:

     vwCrypto
     | top 1 by serverTime
     | project serverTime
    
  2. Ejecuta la consulta para obtener el resultado.

  3. Haz clic en Add visual para darle formato al resultado en lugar de mostrarlo como tabla.


Configurar el visual

En el panel de configuración a la derecha, aplica los siguientes ajustes:

  • Tile name: Última actualización

  • Visual type: Stat

  • Value column: serverTime

Haz clic en Apply changes para confirmar.

Ya tenemos el primer visual en nuestro dashboard en tiempo real.


Visual 2: Número total de criptomonedas

Para mostrar cuántas criptomonedas distintas tenemos registradas:

  1. Para añadir un nuevo visual, se necesita añadir un nuevo tile

  2. En el editor del tile, escribe la siguiente consulta:

     materialized_view('mvCryptoGoldLatest')
     | summarize Cryptocurrencies = count_distinct(symbol)
    
  3. Haz clic en Add visual.

  4. Configura el visual:

    • Tile name: Nº de criptomonedas

    • Visual type: Stat

    • Value column: Cryptocurrencies

Resultado: un contador en tiempo real del número de criptomonedas disponibles.


Visual 3: Top 5 criptomonedas por precio (EUR)

Este visual permite identificar rápidamente las criptomonedas más valiosas en euros.

  1. Añade una nueva consulta en el dashboard:

      materialized_view('mvCryptoGoldLatest')
      | where symbol endswith "EUR"
      | top 5 by price
    
  2. Haz clic en Add visual.

  3. Configura el visual con estos parámetros:

    • Tile name: Top 5 criptomonedas por precio (EUR)

    • Visual type: Column chart

    • X axis: symbol

    • Y axis: price

Con esto obtendremos un gráfico de barras que muestra las 5 criptomonedas con mayor precio en EUR.


Visual 4: Distribución por rango de precios

Para analizar cómo se distribuyen las criptomonedas en función de su precio, agrupamos en rangos.

  1. Escribe la consulta:

      materialized_view('mvCryptoGoldLatest')
      | extend priceRange = case(
          price < 1, "< 1€",
          price < 100, "1€ - 100€",
          price < 1000, "100€ - 1000€",
          "> 1000€"
      )
      | summarize count() by priceRange
    
  2. Haz clic en Add visual.

  3. Configura el visual con estos parámetros:

    • Tile name: Distribución por rango de precios

    • Visual type: Pie chart

    • Category column: priceRange

    • Numeric column: count_

    • Tooltip: value

De esta manera obtenemos un gráfico circular que refleja qué proporción de criptomonedas se encuentra en cada rango de precios y si nos posicionamos en el gráfico, nos muestra el conteo de criptomonedas que hay en cada rango de precios.


Visual 5: Logo Binance

Para personalizar el dashboard y hacerlo más identificable con la temática del proyecto, añadiremos el logo de Binance en la parte superior.

  1. En el dashboard en tiempo real, haz clic en "New text tile".

  2. En el editor del texto, inserta el siguiente código Markdown:

     ![Binance](https://th.bing.com/th/id/R.92d4f7ef666ddb42051d90f0333df1cf?rik=Rw5e3HhVIbBAng&riu=http%3a%2f%2ffreelogopng.com%2fimages%2fall_img%2f1681906406binance-icon-png.png&ehk=zKWRuKmvAqHAESxhJN0LnJWOczq0vpRcKTKxNrZMaZQ%3d&risl=&pid=ImgRaw&r=0 "Binance")
    
  3. Ajusta el alineamiento y el tamaño del tile para que el logo se vea correctamente.


📑 Página de Detalles por criptomoneda

Hasta ahora hemos construido la página principal con métricas globales del mercado.
El siguiente paso es crear una página de Detalles, donde podremos profundizar en la información de una criptomoneda específica.


🔧 Creando la página de Detalles

  1. Dentro del Real-Time Dashboard, haz clic en Add page.

  2. Asigna el nombre Detalles.

  3. En esta nueva página, los visuales estarán filtrados por una única criptomoneda.


Creando un parámetro de filtrado

Para permitir seleccionar qué criptomoneda analizar (y también habilitar el drillthrough desde la página principal):

  1. En el menú superior del dashboard, selecciona Manage > Parameters.

  2. En el menú lateral del dashboard, selecciona Add.

  3. Configura el parámetro con las siguientes opciones:

    • Label: Criptomoneda

    • Parameter type: Single selection

    • Variable name: Criptomoneda

    • Data type: string

    • Show on page: Detalles

    • Source: Query

      • Data source: Selecciona el eventhouse eh_Crypto

      • Query: kql materialized_view('mvCryptoGoldLatest') distinct symbol

      • Value column: symbol

    • Default value: BTCEUR


Creando los visuales

🪙 Logo Binance

Al igual que en la página principal, comenzamos añadiendo un encabezado visual para mantener la coherencia del dashboard y reforzar la identidad del proyecto.


Visual: Nombre de la criptomoneda seleccionada

El objetivo de este visual es mostrar dinámicamente el nombre de la criptomoneda seleccionada en la página de detalles.

  1. Crea un nuevo tile en el dashboard.

  2. Escribe la siguiente consulta KQL para mostrar el símbolo de la criptomoneda seleccionada:

     materialized_view('mvCryptoGoldLatest')
     | where symbol == Criptomoneda
     | project symbol
    

    🔧 Criptomoneda es el parámetro dinámico del dashboard que hemos configurado anteriormente.

  3. Haz clic en Add visual y configura el visual con estos parámetros:

    • Hide Tile name

    • Visual type: Stat

Haz clic en Apply changes para guardar el visual.


Visual: Valor máximo del rango de tiempo

Este visual muestra el precio máximo alcanzado por la criptomoneda seleccionada dentro del rango de tiempo actual.

  1. Escribe la consulta:

     vwCrypto
     | where symbol == Criptomoneda
     | where serverTime between (_startTime .. _endTime)
     | summarize max(price)
    

    🔧 Criptomoneda corresponde a la criptomoneda seleccionada. _startTime y _endTime son los parámetros automáticos del dashboard para el rango de tiempo.

  2. Haz clic en Add visual.

  3. Configura el visual con estos parámetros:

    • Tile name: Precio máximo

    • Visual type: Stat


Visual: Valor mínimo del rango de tiempo

Este visual muestra el precio mínimo alcanzado por la criptomoneda seleccionada dentro del rango de tiempo actual.

  1. Escribe la consulta:

     vwCrypto
     | where symbol == Criptomoneda
     | where serverTime between (_startTime .. _endTime)
     | summarize min(price)
    

    🔧 Criptomoneda corresponde a la criptomoneda seleccionada. _startTime y _endTime son los parámetros automáticos del dashboard para el rango de tiempo.

  2. Haz clic en Add visual.

  3. Configura el visual con estos parámetros:

    • Tile name: Precio mínimo

    • Visual type: Stat


Visual: Precio actual

Este visual muestra el precio más reciente (actual) de la criptomoneda seleccionada.

  1. Escribe la consulta:

     mvCryptoGoldLatest
     | where symbol == Criptomoneda
     | top 1 by serverTime desc
     | project current_price = price
    
  2. Haz clic en Add visual.

  3. Configura el visual con estos parámetros:

    • Tile name: Precio actual

    • Visual type: Stat


Visual: Variación porcentual entre valor máximo y mínimo

Este visual muestra la variación porcentual entre el valor máximo y el valor mínimo de la criptomoneda en el rango de tiempo seleccionado.

  1. Escribe la consulta:

     vwCrypto
     | where symbol == Criptomoneda
     | where serverTime between (_startTime.._endTime)
     | summarize 
        max_price = max(price),
        min_price = min(price)
     | extend variation_pct = ((max_price - min_price) / min_price) * 100
     | project variation_pct
    
  2. Haz clic en Add visual.

  3. Configura el visual con estos parámetros:

    • Tile name: Variación % (Máx vs Mín)

    • Visual type: Stat

    • Text size: Small


Visual: Variación porcentual entre el valor actual y el último valor del rango de tiempo

Este visual calcula la variación porcentual entre el precio actual (obtenido desde la vista materializada) y el último valor registrado dentro del rango de tiempo seleccionado.

Esto permite ver si la criptomoneda ha subido o bajado recientemente.

  1. Escribe la consulta:

     let current_price = 
        mvCryptoGoldLatest
        | where symbol == Criptomoneda;
     let last_historical = 
        vwCrypto
        | where symbol == Criptomoneda
        | where serverTime between (_startTime .. _endTime)
        | top 1 by serverTime asc
        | project lh_symbol = symbol, lh_serverTime = serverTime, lh_price = price;
     current_price
     | join kind=inner last_historical on $left.symbol == $right.lh_symbol
     | extend variation_pct = ((price - lh_price) / price) * 100
     | project variation_pct
    
  2. Haz clic en Add visual.

  3. Configura el visual con estos parámetros:

    • Tile name: Variación % (Actual vs Último)

    • Visual type: Stat

    • Text size: Small


🎨 Aplicando Formato Condicional a los Visuales

El formato condicional permite destacar visualmente los cambios en las métricas clave, ayudando a identificar tendencias positivas o negativas de un vistazo.

En el caso de los precios o variaciones porcentuales de criptomonedas, aplicar color en función del resultado mejora la interpretación inmediata del dashboard.


Formato condicional en el visual “Variación % (Actual vs Último)

  1. Selecciona el visual “Variación % (Actual vs Último)”.

  2. Desplázate hasta la sección Conditional formatting (Formato condicional) y asegúrate que está habilitada.

  3. Añade una regla:

    • Color style: Light

    • Column: variation_pct

    • Operator: >

    • Value: 0

    • Color: Green

    • Icon: ⬆️

  1. Haz clic en guardar.

  2. Crea dos reglas más:

    • Valor == 0: Con color Azul sin icono.

    • Valor < 0: Con color Rojo y con el icono de la felcha hacia abajo.

Realiza el mismo ejercicio para el visual Variación % (Actual vs Último).

El dashboard debería de quedar así:


🔄 Configurar el Auto Refresh

Una de las grandes ventajas de los dashboards en tiempo real de Microsoft Fabric es su capacidad para actualizar automáticamente los datos sin intervención manual. Esto garantiza que las métricas y visuales reflejen siempre la información más reciente procedente de las vistas materializadas o tablas KQL.

⚙️ Pasos para configurar el Auto Refresh

  1. En la barra superior, haz clic en Manage y selecciona Auto refresh.

  1. Activa la opción Enable y define:
  • Minimun time interval: Allow all refresh intervals

  • Default refresh rate: Continuous^

  1. Haz clic en Apply para aplicar los cambios.

Una vez configurado el auto refresh, todos los visuales del dashboard se actualizarán automáticamente con los últimos datos disponibles.

More from this blog

D

DataGym | Microsoft Fabric

36 posts