Cómo crear un panel (parte 2)

★★☆ Intermedio - Tiempo: 1 hora

Con este tutorial aprenderá a pasar de un panel sencillo con 3 visualizaciones a un panel con un formato adecuado y organizado, ¡con widgets interactivos vinculados entre sí!

../_images/dashboard2_final.png

En este tutorial, aprenderá:

  • Cómo vincular widgets entre sí mediante un contexto

  • Cómo añadir otros widgets de Opendatasoft

  • Cómo utilizar las clases CSS para dar formato al panel y organizarlo

REQUISITOS PREVIOS

  • Para crear un panel, debe tener acceso al back office de un portal Opendatasoft y el permiso “Editar todas las páginas”.

  • Recomendamos vivamente que siga la primera parte de este tutorial sobre paneles, “Cómo crear un panel (parte 1)”, dado que la segunda parte es una continuación de la primera. Los requisitos previos de la primera parte también contienen toda la información necesaria sobre el conjunto de datos de ejemplo seleccionado.

Mostrar todas las imágenes

Ocultar todas las imágenes

Vincular los widgets entre sí

Al final de la primera parte de este tutorial para crear un panel, teníamos un panel sencillo con 1 título y 3 widgets (una vista de tabla, una vista de mapa y un gráfico de un mismo conjunto de datos) uno sobre otro. En la parte anterior, hemos visto que la gran ventaja de los widgets es que pueden interactuar entre sí. No obstante, si dibujamos una forma en el mapa, se filtran los elementos visualizados del mapa, pero solo reacciona el mapa. La tabla y el gráfico pasan por alto nuestro filtro.

Esto se debe a que nuestros widgets aún no están vinculados entre sí. Para ello, el secreto reside en usar el mismo contexto para todos los widgets. Dado que el contexto es el pivote clave que existe entre cada uno de los elementos de las páginas, todos los widgets que tienen que interactuar deben usar el mismo contexto. Además, el contexto es el vínculo entre los widgets y el conjunto de datos que los sustenta: define qué conjunto de datos deben utilizar los widgets como base para trabajar, o los datos de qué conjunto de datos deben utilizar los widgets.

1 + ¡Vamos a buscar este contexto! Examine el código HTML de la página. Para cada uno de los widgets añadidos, el código contiene 2 elementos principales: primero ods-dataset-context y después ods-map u ods-table u ods-chart según el widget. En el código siguiente, hemos añadido comentarios simplemente a modo de ayuda para que vea los distintos elementos que tenemos.

<div class="container-fluid">
  <div class="ods-box">

    <!-- TITLE OF THE PAGE -->
    <h1>UNESCO World Heritage</h1>

    <!-- TABLE WIDGET -->
    <!-- Context of the table -->
    <ods-dataset-context context="worldheritagelistpublicus" worldheritagelistpublicus-dataset="world-heritage-list@public-us">
      <!-- Table widget tag -->
      <ods-table context="worldheritagelistpublicus"></ods-table>
    </ods-dataset-context>

    <!-- MAP WIDGET -->
    <!-- Context of the map -->
    <ods-dataset-context context="worldheritagelistpublicus" worldheritagelistpublicus-dataset="world-heritage-list@public-us">
      <!-- Map widget tag -->
      <ods-map context="worldheritagelistpublicus" scroll-wheel-zoom="false" location="2,18.46273,-0.44037" basemap="mapbox.streets"></ods-map>
    </ods-dataset-context>

    <!-- CHART WIDGET -->
    <!-- Context of the chart -->
    <ods-dataset-context context="worldheritagelistpublicus" worldheritagelistpublicus-dataset="world-heritage-list@public-us" worldheritagelistpublicus-parameters="{'disjunctive.states':true,'sort':'date_inscribed'}">
      <!-- Chart widget tags -->
      <ods-chart align-month="true">
        <ods-chart-query context="worldheritagelistpublicus" field-x="region" maxpoints="50" stacked="normal" series-breakdown="category">
          <ods-chart-serie expression-y="area_hectares" chart-type="column" function-y="COUNT" color="range-Accent" scientific-display="true">
          </ods-chart-serie>
        </ods-chart-query>
      </ods-chart>
    </ods-dataset-context>

  </div>
</div>
../_images/step110.png

Como puede ver, tenemos un contexto para cada uno de los widgets. En primer lugar, no es algo demasiado útil en nuestro caso, ya que todos nuestros widgets emplean los mismos datos del mismo conjunto de datos. En segundo lugar, nos impide vincular los widgets entre sí. Debemos tener un contexto único.

2 + Al principio del todo de su código, sobre la etiqueta div con la clase container-fluid, declare el contexto único de la página. Como con los widgets, utilice la etiqueta ods-dataset-context (¡y no olvide la etiqueta final!). Eche una ojeada al código siguiente para entender cómo funciona esta etiqueta (como antes, los comentarios añaden explicaciones al código).

<ods-dataset-context context="worldheritagelistpublicus"
                     worldheritagelistpublicus-dataset="world-heritage-list@public-us">

    <!--
        worldheritagelistpublicus: name of your context
        world-heritage-list@public-us: technical identifier of your dataset
    -->

</ods-dataset-context>
../_images/step24.png

3 + Suprima el contexto de cada uno de los widgets. No olvide que las etiquetas van de dos en dos: debe suprimir la etiqueta inicial y la etiqueta final de cada uno de los widgets. Ahora el código debería mostrar esta apariencia, con un contexto único seguido de las etiquetas de los 3 widgets:

<ods-dataset-context context="worldheritagelistpublicus"
worldheritagelistpublicus-dataset="world-heritage-list@public-us">

<div class="container-fluid">
  <div class="ods-box">

    <h1>UNESCO World Heritage</h1>

    <ods-table context="worldheritagelistpublicus"></ods-table>

    <ods-map context="worldheritagelistpublicus" scroll-wheel-zoom="false" location="2,18.46273,-0.44037" basemap="mapbox.streets"></ods-map>

    <ods-chart align-month="true">
      <ods-chart-query context="worldheritagelistpublicus" field-x="region" maxpoints="50" stacked="normal" series-breakdown="category">
        <ods-chart-serie expression-y="area_hectares" chart-type="column" function-y="COUNT" color="range-Accent" scientific-display="true">
        </ods-chart-serie>
      </ods-chart-query>
    </ods-chart>

  </div>
</div>

</ods-dataset-context>
../_images/step31.png

4 + Guarde la página y haga clic en el botón Abrir página. Ahora, si dibuja una forma en el mapa, el mapa se filtrará según esa forma, pero tanto la tabla como el gráfico se filtrarán también conforme a ese mismo criterio. ¡Nuestros widgets están vinculados entre sí!

../_images/step41.png

Añadir más widgets de Opendatasoft

5 + Ahora que nuestros widgets están vinculados, ¿por qué no añadir más widgets para mejorar aún más la apariencia del panel? Vamos a empezar añadiendo una barra de búsqueda. Nos permitirá hacer una búsqueda textual en todas las visualizaciones de forma simultánea. Vaya a la documentación de los widgets de Opendatasoft para obtener más información sobre el widget que vamos a usar, denominado odsTextSearch.

En la documentación del widget odsTextSearch puede encontrar diversa información:

  • La descripción, para saber para qué sirve el widget

  • El código del widget, para copiarlo y pegarlo en el código de la página

  • Una tabla con los atributos del widget, y los valores que debe especificar para que el widget funcione

  • Un ejemplo del código final y el resultado

../_images/step51.png

6 + Copie el código del widget odsTextSearch.

<ods-text-search
      placeholder="{string}"
      button="{string}"
      field="{string}"
      suffix="{string}"
      context="{CatalogContext|DatasetContext|CatalogContext[]|DatasetContext[]}"
      autofocus="{string}">
</ods-text-search>
../_images/step61.png

7 + Pegue el código del widget en el código de la página, donde desea que se muestre. Vamos a colocarlo bajo el título, sobre el primer widget de visualización.

Precaución

¡No guarde la página todavía! Como los atributos del widget aún no se han completado, la plataforma considerará que el widget no es válido y generará un error.

<ods-dataset-context context="worldheritagelistpublicus"
worldheritagelistpublicus-dataset="world-heritage-list@public-us">

<div class="container-fluid">
  <div class="ods-box">

    <h1>UNESCO World Heritage</h1>

    <ods-text-search
    placeholder="{string}"
    button="{string}"
    field="{string}"
    suffix="{string}"
    context="{CatalogContext|DatasetContext|CatalogContext[]|DatasetContext[]}"
    autofocus="{string}">
  </ods-text-search>

  <ods-table context="worldheritagelistpublicus"></ods-table>

  <ods-map context="worldheritagelistpublicus" scroll-wheel-zoom="false" location="2,18.46273,-0.44037" basemap="mapbox.streets"></ods-map>

  <ods-chart align-month="true">
    <ods-chart-query context="worldheritagelistpublicus" field-x="region" maxpoints="50" stacked="normal" series-breakdown="category">
      <ods-chart-serie expression-y="area_hectares" chart-type="column" function-y="COUNT" color="range-Accent" scientific-display="true">
      </ods-chart-serie>
    </ods-chart-query>
  </ods-chart>

</div>
</div>

</ods-dataset-context>
../_images/step71.png

8 + Tal como está ahora, la barra de búsqueda no puede funcionar. En primer lugar, tenemos que determinar qué atributos necesitamos y especificar sus valores. Para este widget, solo es obligatorio el atributo context. Para hacerlo sencillo en este tutorial, vamos a suprimir todos los demás atributos.

<ods-text-search context="{CatalogContext|DatasetContext|CatalogContext[]|DatasetContext[]}">
</ods-text-search>
../_images/step81.png

9 + Al principio de este tutorial (vea el paso 2), hemos creado un contexto único que se puede utilizar en toda la página. El nombre del contexto es “worldheritagelistpublicus”. Ese mismo nombre de contexto es el que debemos emplear para especificar el atributo de contexto de nuestro widget odsTextSearch.

<ods-text-search context="worldheritagelistpublicus">
</ods-text-search>

<ods-dataset-context context="worldheritagelistpublicus"
worldheritagelistpublicus-dataset="world-heritage-list@public-us">

<div class="container-fluid">
  <div class="ods-box">

    <h1>UNESCO World Heritage</h1>

    <ods-text-search context="worldheritagelistpublicus">
    </ods-text-search>

    <ods-table context="worldheritagelistpublicus"></ods-table>

    <ods-map context="worldheritagelistpublicus" scroll-wheel-zoom="false" location="2,18.46273,-0.44037" basemap="mapbox.streets"></ods-map>

    <ods-chart align-month="true">
      <ods-chart-query context="worldheritagelistpublicus" field-x="region" maxpoints="50" stacked="normal" series-breakdown="category">
        <ods-chart-serie expression-y="area_hectares" chart-type="column" function-y="COUNT" color="range-Accent" scientific-display="true">
        </ods-chart-serie>
      </ods-chart-query>
    </ods-chart>

  </div>
</div>

</ods-dataset-context>
../_images/step91.png

10 + Guarde la página y haga clic en Vista previa. ¡Ahora tenemos una barra de búsqueda en nuestro panel!

../_images/step101.png

11 + Vamos a añadir otro elemento muy útil a nuestro panel: ¡los filtros! Nos permitirán aplicar filtros a nuestras visualizaciones, igual que cuando navegamos por un conjunto de datos. Vaya a la documentación de los widgets de Opendatasoft para obtener más información del widget que vamos a utilizar, denominado odsFacets.

Importante

El widget odsFacets permite recuperar los filtros ya establecidos para el conjunto de datos. Esto significa que si utiliza este widget para un panel, pero el conjunto de datos asociado aún no tiene definido ningún filtro, el widget no podrá visualizar nada.

../_images/step111.png

12 + Copie el código del widget odsFacets.

<ods-facets context="{DatasetContext}">
</ods-facets>
../_images/step121.png

13 + Pegue el código de widget en el código de la página, donde desea que aparezca. Vamos a colocarlo bajo la barra de búsqueda.

<ods-dataset-context context="worldheritagelistpublicus"
worldheritagelistpublicus-dataset="world-heritage-list@public-us">

<div class="container-fluid">
  <div class="ods-box">

    <h1>UNESCO World Heritage</h1>

    <ods-text-search context="worldheritagelistpublicus">
    </ods-text-search>

    <ods-facets context="{DatasetContext}">
    </ods-facets>

    <ods-table context="worldheritagelistpublicus"></ods-table>

    <ods-map context="worldheritagelistpublicus" scroll-wheel-zoom="false" location="2,18.46273,-0.44037" basemap="mapbox.streets"></ods-map>

    <ods-chart align-month="true">
      <ods-chart-query context="worldheritagelistpublicus" field-x="region" maxpoints="50" stacked="normal" series-breakdown="category">
        <ods-chart-serie expression-y="area_hectares" chart-type="column" function-y="COUNT" color="range-Accent" scientific-display="true">
        </ods-chart-serie>
      </ods-chart-query>
    </ods-chart>

  </div>
</div>

</ods-dataset-context>
../_images/step131.png

14 + Igual que hicimos con el widget odsTextSearch, tenemos que especificar los atributos del widget odsFacets. Este último solo tiene uno: ¡el atributo context! Vamos a especificarlo con el nombre del contexto de nuestra página, ¡exactamente igual que hicimos para el widget odsTextSearch!

<ods-facets context="worldheritagelistpublicus">
</ods-facets>

<ods-dataset-context context="worldheritagelistpublicus"
worldheritagelistpublicus-dataset="world-heritage-list@public-us">

<div class="container-fluid">
  <div class="ods-box">

    <h1>UNESCO World Heritage</h1>

    <ods-text-search context="worldheritagelistpublicus">
    </ods-text-search>

    <ods-facets context="worldheritagelistpublicus">
    </ods-facets>

    <ods-table context="worldheritagelistpublicus"></ods-table>

    <ods-map context="worldheritagelistpublicus" scroll-wheel-zoom="false" location="2,18.46273,-0.44037" basemap="mapbox.streets"></ods-map>

    <ods-chart align-month="true">
      <ods-chart-query context="worldheritagelistpublicus" field-x="region" maxpoints="50" stacked="normal" series-breakdown="category">
        <ods-chart-serie expression-y="area_hectares" chart-type="column" function-y="COUNT" color="range-Accent" scientific-display="true">
        </ods-chart-serie>
      </ods-chart-query>
    </ods-chart>

  </div>
</div>

</ods-dataset-context>
../_images/step141.png

15 + Guarde la página y haga clic en Vista previa. ¡Los filtros de nuestro conjunto de datos ahora se visualizan en el panel!

../_images/step151.png

16 + Ahora, pongamos que no deseamos mostrar todos los filtros de nuestro conjunto de datos. En nuestro ejemplo de la Lista del Patrimonio de la UNESCO, imaginemos que solo queremos poder filtrar por categoría y país. Copie el fragmento de código siguiente (disponible también en la documentación del widget odsFacets):

<ods-facets context="mycontext">
   <h3>First field</h3>
   <ods-facet name="myfield"></ods-facet>

   <h3>Second field</h3>
   <ods-facet name="mysecondfield"></ods-facet>
</ods-facets>
../_images/step161.png

17 + Péguelo en sustitución del anterior código del widget odsFacets sencillo que hemos utilizado previamente.

<ods-dataset-context context="worldheritagelistpublicus"
worldheritagelistpublicus-dataset="world-heritage-list@public-us">

<div class="container-fluid">
  <div class="ods-box">

    <h1>UNESCO World Heritage</h1>

    <ods-text-search context="worldheritagelistpublicus">
    </ods-text-search>

    <ods-facets context="mycontext">
      <h3>First field</h3>
      <ods-facet name="myfield"></ods-facet>

      <h3>Second field</h3>
      <ods-facet name="mysecondfield"></ods-facet>
    </ods-facets>

    <ods-table context="worldheritagelistpublicus"></ods-table>

    <ods-map context="worldheritagelistpublicus" scroll-wheel-zoom="false" location="2,18.46273,-0.44037" basemap="mapbox.streets"></ods-map>

    <ods-chart align-month="true">
      <ods-chart-query context="worldheritagelistpublicus" field-x="region" maxpoints="50" stacked="normal" series-breakdown="category">
        <ods-chart-serie expression-y="area_hectares" chart-type="column" function-y="COUNT" color="range-Accent" scientific-display="true">
        </ods-chart-serie>
      </ods-chart-query>
    </ods-chart>

  </div>
</div>

</ods-dataset-context>
../_images/step171.png

18 + Especifique el atributo de contexto correctamente, con el nombre del contexto de la página.

<ods-facets context="worldheritagelistpublicus">
  <h3>First field</h3>
  <ods-facet name="myfield"></ods-facet>

  <h3>Second field</h3>
  <ods-facet name="mysecondfield"></ods-facet>
</ods-facets>
../_images/step181.png

19 + Ahora vamos a examinar el resto del código avanzado del widget odsFacets. Las 2 etiquetas h3 indican que hemos añadido títulos: estos se utilizarán para escribir el nombre de los filtros que queremos visualizar, que significan “categoría” y “país”. ods-nombre de faceta es el atributo que indicará el identificador técnico del campo en que se basa el filtro.

Nota

Para obtener el identificador técnico de campo, tiene que conocer el esquema del conjunto de datos. Está disponible en la ficha de información del conjunto de datos. El esquema del conjunto de datos muestra toda la información de cada uno de los campos: nombre (etiqueta), descripción, identificador, tipo y un ejemplo de valor. Suele ser útil conocer el tipo y el identificador de cada uno de los campos al usar parámetros de widgets avanzados.

En el código siguiente, hemos añadido comentarios simplemente a modo de ayuda para que vea los distintos elementos que tenemos.

<!-- CONTEXT NAME -->
<ods-facets context="worldheritagelistpublicus">
   <!-- Name of filter #1 -->
   <h3>First field</h3>
   <!-- Technical identifier of related field -->
   <ods-facet name="myfield"></ods-facet>

   <!-- Name of filter #2 -->
   <h3>Second field</h3>
   <!-- Technical identifier of related field -->
   <ods-facet name="mysecondfield"></ods-facet>
 </ods-facets>
../_images/step191.png

20 + Vaya a la sección Esquema de conjunto de datos de la ficha Información del conjunto de datos.

../_images/step201.png

21 + Busque los identificadores técnicos de los campos en que se basan los filtros que desea añadir al panel. En nuestro conjunto de datos de la Lista del Patrimonio de la UNESCO de ejemplo, hemos querido filtrar por categoría y país. Respectivamente, los identificadores técnicos de los campos que queremos usar como filtros son category y states.

../_images/step211.png

22 + Vuelva al código de su panel, especifique los títulos y los atributos ods-nombre de faceta.

<ods-facets context="worldheritagelistpublicus">
  <h3>Category</h3>
  <ods-facet name="category"></ods-facet>

  <h3>Country</h3>
  <ods-facet name="states"></ods-facet>
</ods-facets>

<ods-dataset-context context="worldheritagelistpublicus"
worldheritagelistpublicus-dataset="world-heritage-list@public-us">

<div class="container-fluid">
  <div class="ods-box">

    <h1>UNESCO World Heritage</h1>

    <ods-text-search context="worldheritagelistpublicus">
    </ods-text-search>

    <ods-facets context="worldheritagelistpublicus">
      <h3>Category</h3>
      <ods-facet name="category"></ods-facet>

      <h3>Country</h3>
      <ods-facet name="states"></ods-facet>
    </ods-facets>

    <ods-table context="worldheritagelistpublicus"></ods-table>

    <ods-map context="worldheritagelistpublicus" scroll-wheel-zoom="false" location="2,18.46273,-0.44037" basemap="mapbox.streets"></ods-map>

    <ods-chart align-month="true">
      <ods-chart-query context="worldheritagelistpublicus" field-x="region" maxpoints="50" stacked="normal" series-breakdown="category">
        <ods-chart-serie expression-y="area_hectares" chart-type="column" function-y="COUNT" color="range-Accent" scientific-display="true">
        </ods-chart-serie>
      </ods-chart-query>
    </ods-chart>

  </div>
</div>

</ods-dataset-context>
../_images/step221.png

23 + Guarde la página y haga clic en Vista previa. ¡Los 2 filtros seleccionados se visualizan en el panel!

../_images/step231.png

Dar formato al panel: organizar los widgets en filas y columnas

Nuestro panel tiene un aspecto bastante bueno, pero para que sea aún mejor ahora deberíamos darle estilo y organizarlo de otro modo. De momento, simplemente tenemos apilados todos los elementos (títulos y widgets). ¡Eso va a cambiar!

Organizaremos nuestro panel en 2 partes:

  • A la izquierda, colocaremos los elementos de navegación (la barra de búsqueda y los filtros debajo).

  • A la derecha, colocaremos las visualizaciones de datos (la tabla y debajo el mapa y el gráfico uno junto al otro).

../_images/dashboard__css-responsive-layout-1.png

¿Pero cómo podemos conseguir ese estilo para nuestro panel? Imagine la página como si fuera un contenedor. Dentro del contenedor, puede tener tantas filas como desee. Cada una de estas filas se divide en 12 columnas del mismo tamaño.

Esta es la apariencia en código HTML:

<div class="container">
   <div class="row">
       <div class="col-xs-1">col-1</div>
       <div class="col-xs-1">col-1</div>
       <div class="col-xs-1">col-1</div>
       <div class="col-xs-1">col-1</div>
       <div class="col-xs-1">col-1</div>
       <div class="col-xs-1">col-1</div>
       <div class="col-xs-1">col-1</div>
       <div class="col-xs-1">col-1</div>
       <div class="col-xs-1">col-1</div>
       <div class="col-xs-1">col-1</div>
       <div class="col-xs-1">col-1</div>
       <div class="col-xs-1">col-1</div>
   </div>
</div>

Si crea una página y desea organizar los elementos que la componen, debe ponerlos en filas. Debe decidir cuántas columnas desea asignar a cada uno de los elementos.

24 + Vamos a reorganizar nuestro panel en filas y columnas. En este ejemplo, colocaremos la parte de navegación y la parte de visualización de datos en la misma fila. Utilizaremos 3 columnas para los elementos de navegación y las 9 columnas restantes para los elementos de visualización. Como hemos decidido colocar las visualizaciones de mapa y gráfico una junto a la otra, crearemos una fila para estas 2: cada una con 6 columnas.

../_images/dashboard__css-responsive-layout-2.png

Esta será la apariencia del panel en código HTML:

<ods-dataset-context context="worldheritagelistpublicus"
worldheritagelistpublicus-dataset="world-heritage-list@public-us">

<div class="container-fluid">
  <div class="ods-box">

    <h1>

      <div class="row">

        <!-- NAVIGATION PART -->
        <div class="col-xs-3">

          <!-- Search bar here -->
          <!-- Filters here -->

        </div>

        <!-- VISUALIZATIONS PART -->
        <div class="col-xs-9">

          <!-- Table widget here -->

          <div class="row">

            <div class="col-xs-6"> <!-- Map widget on the left --> </div>

            <div class="col-xs-6"> <!-- Chart widget on the right --> </div>

          </div>

        </div>

      </div>

  </div>
</div>

</ods-dataset-context>
../_images/step241.png

25 + Guarde la página y haga clic en Vista previa. ¡Hemos creado un panel magnífico!

../_images/step25.png

26 + Aunque quizás sería mejor añadir algo más de espacio entre la tabla y las 2 visualizaciones restantes. Vamos a añadir una etiqueta br bajo el widget de tabla, justo antes de la fila que contiene el widget de mapa y el widget de gráfico. Esta etiqueta significa que queremos añadir una línea vacía adicional en el lugar de la etiqueta. ¡También es una de las etiquetas HTML que no necesitan acompañante!

<ods-dataset-context context="worldheritagelistpublicus"
worldheritagelistpublicus-dataset="world-heritage-list@public-us">

<div class="container-fluid">
  <div class="ods-box">

    <h1>UNESCO World Heritage</h1>

    <div class="row">

      <div class="col-xs-3">

        <ods-text-search context="worldheritagelistpublicus">
        </ods-text-search>

        <ods-facets context="worldheritagelistpublicus">
          <h3>Category</h3>
          <ods-facet name="category"></ods-facet>

          <h3>Country</h3>
          <ods-facet name="states"></ods-facet>
        </ods-facets>

      </div>

      <div class="col-xs-9">

        <ods-table context="worldheritagelistpublicus"></ods-table>

        <br>

        <div class="row">

          <div class="col-xs-6">
            <ods-map context="worldheritagelistpublicus" scroll-wheel-zoom="false" location="2,18.46273,-0.44037" basemap="mapbox.streets"></ods-map>
          </div>

          <div class="col-xs-6">
            <ods-chart align-month="true">
              <ods-chart-query context="worldheritagelistpublicus" field-x="region" maxpoints="50" stacked="normal" series-breakdown="category">
                <ods-chart-serie expression-y="area_hectares" chart-type="column" function-y="COUNT" color="range-Accent" scientific-display="true">
                </ods-chart-serie>
              </ods-chart-query>
            </ods-chart>
          </div>

        </div>

      </div>

    </div>

  </div>
</div>

</ods-dataset-context>
../_images/step26.png

27 + ¡Vuelva a guardar y haga clic en el botón Abrir página para ver el resultado!


¡ENHORABUENA!

¡Ha completado este tutorial, y ahora ya sabe cómo crear un panel completo con widgets vinculados y cómo darle formato con clases CSS! Si quiere continuar avanzando con estas clases CSS y obtener más información sobre la capacidad de respuesta, no dude en consultar nuestra documentación en torno a estos temas!