Ideal para comenzar, un Hosting económico también puede ser de calidad.
Ideal para comenzar, un Hosting económico también puede ser de calidad.
Ideal para MYPE y Pymes un rendimiento fluido en su sitio web CMS y correos electrónicos.
Ideal para Paginas creadas en Wordpress para un rendimiento fluido en su sitio web y correos electrónicos.
Optimizado para que su web con Woocommerce o Prestashop entregue el Máximo de rendimiento sin perder ninguna venta.
Servicio de alta disponibilidad para los correos y sitio web de su empresa.
Plan creado para sitios de alto trafico, cuentas de correos y base de datos Ilimitadas.
Las ventajas de un servidor dedicado con el precio de un hosting compartido.
Consiga el rendimiento de un servidor dedicado con la facilidad de un hosting compartido.
Amplié sus Recursos de disco duro, memoria, CPU según tus necesidades en minutos.
Disponga de toda la potencia, privacidad y seguridad que te otorgan nuestros servidores VPS.
Para aquellas empresas que necesitan un servidor físico para sus aplicaciones y sistemas.
Alta disponibilidad, Hardware de vanguardia, Fuentes de alimentación redundantes.
A su disposición sistemas operativos de gran alcance, como Linux o Windows.
Rendimiento de alto nivel gracias al uso de nuestros potentes procesadores Intel Xeon.
Publicado en:
Es interesante representar los datos de forma visual para facilitar una mejor comprensión por parte de los usuarios. Las gráficas son elementos que ayudan a romper la barrera que existe cuando se muestran valores numéricos, lo que hace mucho más sencillo ver tendencias, porcentajes, máximos y mínimos…
Las gráficas en HTML son un elemento que puede implementarse en una web para hacer los datos más accesibles, a la vez que hacen al sitio mucho más atractivo para el usuario.
A continuación, veremos cómo se pueden crear e insertar gráficas en una página web, blog o eCommerce, utilizando para ello el lenguaje de marcado HTML.
Cómo puedes crear gráficas en HTML para tu web
Para insertar gráficos en una web es necesario incluir el código HTML de la misma, bien en una entrada, página o lugar indicado.
Veamos varias formas de incluir gráficas HTML en un sitio web:
Insertar gráficos con Canvas
La etiqueta canvas en HTML permite dibujar gráficas, realizar animaciones y manipular imágenes en una web. Se utiliza normalmente junto a una serie de comandos de JavaScript, y es una de las formas más sencillas de utilizar HTML para crear gráficas.
Canvas fue introducido inicialmente por Apple, y hoy en día es compatible con la mayoría de navegadores web como Safari, Google Chrome, Microsoft Edge o Mozilla Firefox, entre otros.
Con la etiqueta canvas se define un marco donde se introduce la gráfica. Por defecto, el tamaño de este espacio es de 300 x 150 píxeles, y puede personalizarse utilizando los atributos width (para el ancho) y height (para el alto).
Veamos un ejemplo para insertar una gráfica HTML con canvas y JavaScript:
<head>
<meta charset=”utf-8″/>
<title>Prueba de gráfica HTML con Canvas y JavaScript</title>
<script>
function draw() {
var canvas = document.getElementById(‘prueba’);
if (canvas.getContext) {
var ctx = canvas.getContext(‘2d’); } }
</script>
<style>
canvas { border: 1px solid black; }
</style>
</head>
<body onload=”draw();”>
<canvas id=”pruebadegráficaHTML” width=”150″ height=”150″></canvas>
</body>
En este ejemplo podemos apreciar cómo definimos el script de JavaScript en el encabezado o <head> del HTML y cómo posteriormente lo insertamos en el <body> mediante la etiqueta <canvas> para mostrar la gráfica. En el encabezado también aplicamos código CSS para personalizar el aspecto visual del cuadro donde insertamos el gráfico.
Insertar gráficos con Chart.js
Una de las mejores maneras de utilizar gráficas en una web es con la librería de código abierto de JavaScript Chart.js, ya que puede implementarse de forma sencilla con canvas de HTML. Insertando el script de Chart.js en el HTML de una página se podrá utilizar toda la capacidad de esta librería para crear diferentes tipos de gráficas, e incluso implementar gráficas animadas.
Para insertar esta librería en HTML hay que incluir en la cabecera el siguiente código:
<script src=”js/Chart.bundle.js”></script>
Posteriormente, se añade dentro del <body>, el cuadro donde se insertará la gráfica con la etiqueta <canvas>. Finalmente, se añadirá una llamada Chart.js mediante la etiqueta <script> después del cierre de la etiqueta <body> para dibujar la gráfica deseada, seleccionando el tipo de gráfico a mostrar y proporcionando los correspondientes datos numéricos.
Insertar gráficos en WordPress
El procedimiento de insertar gráficos en una web WordPress es más sencillo utilizando un plugin específico ya que no es necesario tener conocimiento de HTML y CSS. Con este tipo de complementos solo hay que seleccionar el tipo de gráfica e introducir los valores numéricos a representar para que el propio plugin se encargue de generar el código necesario HTML para poder insertar el gráfico.
Entre los diferentes plugins de gráficas de WordPress podemos destacar:
Crear gráficas en HTML es una forma de dotar de mayor atractivo e interés a un sitio web, a la vez que se facilita a los usuarios la comprensión de una serie de datos numéricos. Para insertar un gráfico en una web la mejor solución es apostar por un plugin de WordPress en caso de utilizar este CMS, pues no será necesario lidiar con código HTML5 y JavaScript, y se podrán crear diferentes tipos de gráficas en muy poco tiempo.
Combinando código HTML y CSS con librerías de JavaScript como uvCharts o Chart.js se pueden insertar una amplia variedad de gráficas en una web y personalizar su aspecto visual como su colores, tamaños o tipos.