Cómo insertar un gráfico dinámico en una web

Los gráficos y los mapas sirven para explicar mejor los datos. También hacen más atractivas las webs. Y si además son dinámicos e interactivos, estos elementos se convierten en un valor seguro en cualquier estrategia de marketing. Pero cómo insertar un gráfico dinámico en una web. Es una pregunta que te habrás hecho en muchas ocasiones y que vamos a tratar de responder.

Mostrar un gráfico en una web es un recurso muy interesante. En primer lugar nos ayuda a visualizar datos de una información y hacerla más accesible para un mayor número de personas. Por otro lado, nuestra web será mucho más atractiva y vistosa.  Es decir, que seguramente tendremos más visitantes (una web atractiva) y nuestras visitas se mostrarán más satisfechos (una información mejor explicada) con lo que les ofrecemos.

Por ejemplo, si quieres publicar una información sobre el precio de la vivienda, es mucho mejor que pongas un gráfico como este de aquí abajo a que trates de explicar los datos solo con texto o con una tabla Excel.

Gracias al gráfico sabemos que estamos hablando de una evolución temporal y que en el último periodo analizado ha habido un descenso. Un gráfico ayuda a descodificar la información de manera más sencilla. Además, si pulsamos en el botón de recarga podremos ver un pequeño movimiento del gráfico, y si pasamos el ratón por encima de cualquier barra veremos más información.

Si habitualmente publicas en internet sabes que necesitas contenido atractivo. Muchas veces este tipo de contenido puede afectar al rendimiento de la página, así que lo que ganamos por un sitio, lo perdemos por otro.

Cuando ya tienes un gráfico con datos y quieres que aparezca dentro de la web, te encuentras con varias opciones. Puedes incluirlo como una imagen fija, con lo cual vas a perder la parte dinámica e interactiva del gráfico, de forma que si cambias los datos tienes que volver a repetir todo el proceso. Además, el gráfico no se verá igual puesto que perderá calidad.

La mejor forma de insertar un gráfico dinámico en una web es mediante un código html que se pegará directamente el editor de textos de tu CMS o en cualquier otro interfaz que te permita escribir código HTML. Lo podemos encontrar bajo varias etiquetas: <iframe> o <script> son las más habituales. En otros casos basta con introducir la URL donde esté alojado el gráfico para que directamente aparezca insertado en la web.

En la mayoría de los casos estos códigos se adaptan a la web de forma que mantendrá el responsive y serán visibles en cualquier tipo de dispositivo móvil.

Ejemplo práctico

Para mostrar cómo insertar un gráfico dinámica en una web, lo mejor es poner un ejemplo real. En Porcentual.es utilizamos desde hace varios años este sistema para insertar gráficos en páginas web. Se trata de un código «iframe» que permite incluir el gráfico en cualquier tipo de web. Además, el gráfico se verá bien a cualquier tamaño y en cualquier dispositivo.

Por ejemplo, nosotros hacemos un gráfico sobre el precio de la vivienda en España, con la evolución que ha tenido este indicador en los últimos trimestres. Este gráfico es dinámico porque tiene un pequeño movimiento y, además, es interactivo, porque puedes pasar el ratón por encima y ver los datos detallados. Podríamos incluirlo como una imagen, pero entonces la interactividad y el dinamismo se perdería.

Puedes obtener un código de prueba rellenando el formulario que hay más abajo. Te enviaremos por mail un código HTML que podrás probar en tu web sin ningún tipo de compromiso.

Lo único que tienes que hacer es copiar el código y pegarlo en la pestaña de HTML del editor de texto que vienen en nuestro gestor de contenidos. En la imagen puedes ver cómo es el editor de WordPress. La mayoría son similares a este.

Funciona de forma similar en cualquier otro CMS. Una vez que lo hemos insertado tan solo tenemos que guardar los cambios y comprobar cómo queda en los diferentes soportes en los que lo vamos a publicar.

De esta forma, cada vez que nosotros actualicemos los datos en nuestra herramienta, el gráfico que has insertado cambiará también, lo que permite tener entradas totalmente actualizadas en todo momento.

Diferentes herramientas

Existen una multitud de herramientas que nos van a permitir elaborar gráficos dinámicos e interactivos, aportando nuestros propios datos y diseñando la forma en la que queremos las visualizaciones y los mapas.

Algunas como Datawraper o Infogram están absolutamente generalizadas. Personalmente en Porcentual nos gusta mucho Flourish, con la que puedes hacer multitud de mapas y de gráficos de forma muy sencilla.

En algunas herramientas podemos encontrar códigos específicos para dispositivos móviles, lo que nos puede ayudar mucho a la hora de editar nuestro contenido.

Si quieres más información sobre esta cuestión solo tienes que ponerte en contacto con nosotros y trataremos de ayudarte.