Saul  Alaniz

Saul Alaniz

1660426200

Crear Un Gráfico De Indicadores Lineales En JavaScript

Le mostraremos cómo crear rápidamente un gráfico de indicador lineal atractivo e interactivo que destaque los datos de vacunación contra el Covid-19 en todo el mundo. Nuestro gráfico nos permitirá visualizar el estado de la vacunación contra el covid-19 en el momento de escribir este artículo y mostrará dos tipos de datos, que mostrarán lo lejos que estamos del objetivo medio de vacunar parcial y totalmente a la población mundial.

imagen de portada de calibre lineal

¿Qué es un gráfico de calibre lineal?

La visualización de datos es una herramienta invaluable, dada la gran cantidad de datos que se crean y las numerosas posibilidades para obtener información de los datos. La visualización de datos es particularmente útil para identificar tendencias, interpretar patrones y comunicar ideas complejas al público objetivo.

Un gráfico de indicadores lineales representa una escala lineal vertical u horizontal que muestra los valores requeridos, con una escala de colores junto con punteros únicos o múltiples. Los valores mínimo y máximo del rango de datos se pueden establecer sobre los ejes de acuerdo con los datos que se representan. La posición del puntero indica el valor actual de la métrica.

Un gráfico de indicadores puede mostrar un solo valor o varios valores utilizando un puntero individual o una combinación de marcadores. El puntero puede ser una aguja o una línea con un marcador de cualquier forma, como un círculo, un cuadrado, un rectángulo o un triángulo.

El tipo de gráfico de indicador lineal es una representación visual eficaz para mostrar qué tan cerca o lejos están los valores del punto de datos deseado.

Tipos de calibres lineales

Los diversos tipos de medidores lineales son el gráfico de termómetro, el gráfico de viñetas, el gráfico de tanque y el gráfico de LED. El termómetro de mercurio, que consiste en marcas menores que muestran la temperatura con el valor del puntero, es un ejemplo clásico de un gráfico de calibre lineal.

La visualización de calibre lineal que construiremos

Aquí hay un adelanto del gráfico de calibre lineal final. Siga este tutorial para aprender cómo creamos este interesante e informativo gráfico de indicadores lineales con JavaScript.

versión final del gráfico de calibre lineal

Los cuatro pasos para construir un indicador lineal de JavaScript

Siempre es útil tener algunas habilidades con tecnologías como HTML y JavaScript. Pero en este tutorial, estamos usando una biblioteca de gráficos JS que facilita la creación de gráficos atractivos como el indicador lineal, incluso con conocimientos técnicos mínimos.

Hay varias bibliotecas de gráficos de JavaScript para visualizar datos con facilidad, y aquí estamos creando el gráfico de indicadores lineales con AnyChart . Esta biblioteca es flexible, con una extensa documentación , y consta de algunos excelentes ejemplos . Además, tiene un área de juegos para experimentar con el código y es gratuito para uso no comercial. Si desea comprar una versión con licencia, puede consultar las opciones disponibles , y si es una organización educativa o sin fines de lucro, puede ponerse en contacto para obtener una licencia gratuita aquí .

Los pasos para hacer un indicador lineal de JavaScript

Estos son los pasos básicos para crear un gráfico de indicadores lineales:

  1. Crea una página HTML básica.
  2. Incluya los archivos JavaScript necesarios.
  3. Agrega los datos.
  4. Escriba el código JavaScript para el gráfico.

Veamos cada uno de estos pasos en detalle a continuación.

1. Crea una página HTML básica

Lo primero que debemos hacer es crear una página HTML que contenga nuestra visualización. Agregamos un <div>elemento de bloque y le damos una ID para que podamos hacer referencia a él más tarde:

<html lang="en">
  <head>
    <title>JavaScript Linear Gauge</title>
    <style type="text/css">      
      html, body, #container { 
        width: 100%; height: 100%; margin: 0; padding: 0; 
      } 
    </style>
  </head>
  <body>
    <div id="container"></div>
  </body>
</html>

Los atributos de ancho y alto de <div>están configurados al 100% para que el gráfico se represente en toda la pantalla. Estos atributos se pueden modificar según los requisitos.

2. Incluya los archivos JavaScript necesarios

El siguiente paso es hacer referencia a los enlaces JS en la página HTML. Usaremos la biblioteca AnyChart para este tutorial, así que incluyamos los archivos correspondientes de su CDN .

Para crear un gráfico de indicador lineal, necesitaremos agregar tres scripts: el módulo principal , el módulo de indicador lineal y el módulo de tabla :

<html lang="en">
  <head>
    <title>JavaScript Linear Gauge</title>
    <style type="text/css">
      html, body, #container { 
        width: 100%; height: 100%; margin: 0; padding: 0; 
      } 
    </style>
  </head>
  <body>  
    <div id="container"></div>
    <script>
      // All the code for the JS linear gauge will come here
    </script>
    <script src="https://cdn.anychart.com/releases/8.10.0/js/anychart-core.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.10.0/js/anychart-linear-gauge.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.10.0/js/anychart-table.min.js"></script>
  </body>
</html>

3. Agregue los valores de los datos

Los datos para el gráfico de indicadores lineales se recopilan de Our World in Data y se incluyen en el código. En ese sitio, podemos ver el porcentaje de personas que han recibido una y dos dosis de la vacuna Covid para cada continente en todo el mundo.

Debido a que (en el momento de escribir este artículo) ninguno de los números supera el 50 %, hemos mantenido el límite máximo del eje de todos los indicadores lineales en el 50 % y comparamos qué tan lejos de esa marca está cada continente, así como la cifra global. Indicamos las cifras al menos parcialmente vacunadas con representación LED y los números completamente vacunados con un puntero de barra. Veremos cómo se agregan los datos en el último paso.

Entonces, todos nuestros pasos iniciales están listos, ¡y ahora agreguemos el código para hacer un gráfico de indicador lineal con JavaScript!

4. Escriba el código JavaScript para el gráfico

Antes de agregar cualquier código, encerramos todo en una función que se asegura de que todo el código dentro se ejecute solo una vez que se carga la página.

Crear un gráfico de indicadores lineales implica un par de pasos y es un poco más complejo que los otros tipos de gráficos básicos. Pero eso no significa que sea muy difícil, y repasaremos cada paso para entender cómo se hace el gráfico.

Definición de la escala lineal y el eje para el gráfico de indicadores

Tenemos varios punteros en nuestro gráfico. Entonces, comencemos creando una función que acepte dos valores: uno para el puntero de barra y otro para el indicador LED. Luego crearemos un indicador, estableceremos los datos y especificaremos el diseño como horizontal. A continuación, estableceremos el rango de las escalas y los ejes. Haremos una escala lineal con los rangos mínimo y máximo. Para el eje, definiremos los atributos y estableceremos la orientación:

function drawGauge(value, settings) {
  // Create gauge with settings
  const gauge = anychart.gauges.linear();
  gauge.data([value, settings.value]);
  gauge.layout('horizontal');

  // Set scale for gauge
  const scale = anychart.scales.linear();
  scale.minimum(0).maximum(settings.maximum).ticks({ interval: 2 });

  // Set axis for gauge
  const axis = gauge.axis(0);
  axis.width('1%').offset('43%').scale(scale).orientation('bottom');
}

Configuración del puntero de barra y la etiqueta

Ahora, crearemos el puntero de la barra y la etiqueta para la serie de barras. La etiqueta recibe un desplazamiento para evitar la superposición con el puntero:

// Create and set bar point
const barSeries = gauge.bar(0);

barSeries
  .scale(scale)
  .width('4%');

// Create and set label with actual data
const labelBar = barSeries.labels();
labelBar
  .enabled(true)
  .offsetY('-15px');

Creación del puntero LED y configuración del atributo de color

En los puntos LED, especificaremos el espacio entre los puntos y usaremos la propiedad del atenuador para establecer el color de los puntos LED residuales para indicar un efecto no iluminado. También declararemos la escala de colores de los puntos LED encendidos:

// Create and set LED point
const ledPointer = gauge.led(1);

ledPointer
  .offset('10%')
  .width('30%')
  .count(settings.maximum)
  .scale(scale)
  .gap(0.55)
  .dimmer(function () {
    return '#eee';
  });

ledPointer.colorScale().colors(['#63b39b', '#63b39b']);

Declaración de los indicadores con el valor objetivo de cada punto de datos

Para hacer el indicador lineal para cada continente, llamaremos a la función definida anteriormente para cada región con sus datos. El primer número indica los datos del valor objetivo y la segunda variable es un objeto con los datos del LED. maximumpermanece constante en 50, mientras que es el valuevalor porcentual de la población completamente vacunada para cada punto de datos. Este valor será mostrado por el puntero:

// Create gauges
const world = drawGauge(13.68, { maximum: 50, value: 27.13 });
const europe = drawGauge(36.98, { maximum: 50, value: 47.28 });
const nAmerica = drawGauge(36.77, { maximum: 50, value: 46.53 });
const sAmerica = drawGauge(22.8, { maximum: 50, value: 40.54 });
const asia = drawGauge(10.14, { maximum: 50, value: 27.16 });
const oceania = drawGauge(9.75, { maximum: 50, value: 22.12 });
const africa = drawGauge(1.56, { maximum: 50, value: 3.04 });

Configuración del diseño de los indicadores lineales

Para mostrar cada uno de los indicadores lineales uno debajo del otro, definiremos una tabla y agregaremos el título junto con cada punto de datos como una fila separada. Agregaremos las diversas propiedades del diseño, como la alineación y el tamaño de fuente. También definiremos parámetros para la primera fila, ya que es el título, y estableceremos el atributo de ancho de la primera columna al 100 %, ya que no necesitamos más columnas:

// Create table to place gauges
const layoutTable = anychart.standalones.table();
layoutTable
  .hAlign('right')
  .vAlign('middle')
  .fontSize(14)
  .cellBorder(null);

// Put gauges into the layout table
layoutTable.contents([
  [null, 'Covid-19 Vaccination - How far are we from the halfway mark?'],
  ['World', world],
  ['Europe', europe],
  ['North America', nAmerica],
  ['South America', sAmerica],
  ['Asia', asia],
  ['Oceania', oceania],
  ['Africa', africa]
]);

// Set height for first row in layout table
layoutTable
  .getRow(0)
  .height(50)
  .fontSize(22)
  .hAlign('center');

// Set the first column to 100% width
layoutTable.getCol(0).width(100);

Dibujar el gráfico

El último paso es hacer referencia al <div>contenedor que agregamos en el paso anterior y dibujar el gráfico:

// Set container id and initiate drawing
layoutTable.container('container');
layoutTable.draw();

Y eso es. ¡Ahora tenemos un gráfico de calibre lineal de JavaScript completamente funcional y hermoso! El código de esta versión inicial del indicador lineal se puede ver en CodePen .

Versión inicial de calibre lineal

Hacer que el gráfico sea accesible

Siempre es una buena práctica asegurarse de que los gráficos sean accesibles para la mayor cantidad de personas posible. Entonces, teniendo todo en cuenta, creamos una versión básica del gráfico de indicadores lineales que se adapta mejor a los lectores de pantalla. Puede consultar esto aquí y también leer más sobre este aspecto en la documentación de la biblioteca AnyChart JavaScript.

Personalización del indicador lineal

El gráfico de indicador lineal predeterminado que hemos creado se ve increíble en este momento, pero hacer algunas modificaciones mejorará la legibilidad y hará que el gráfico sea aún más impresionante. Las bibliotecas de JavaScript son perfectas no solo para crear gráficos rápidamente, sino también para personalizar las visualizaciones según sea necesario. Las bibliotecas de gráficos ofrecen muchas opciones de configuración para controlar el comportamiento y la estética de los gráficos. Hagamos algunos ajustes pequeños pero efectivos a nuestro gráfico de indicadores lineales actual.

Modificación de color

Para hacer que el indicador lineal se vea más cohesivo, hagamos que el atributo de color del puntero de barra sea una versión más oscura de los puntos LED. Lo haremos especificando los atributos de relleno y trazo de la barra:

// Create and set bar point
const barSeries = gauge.bar(0);
barSeries
  .scale(scale)
  .width('4%')
  .fill('#296953')
  .stroke('#296953');

Agregar una leyenda a nuestro gráfico de indicadores lineales

Dado que hemos usado diferentes colores para la barra, los punteros LED iluminados y no iluminados, es una buena práctica proporcionar una leyenda para explicar los colores. Haremos una leyenda y la agregaremos debajo del título del gráfico:

// Create stand alone legend
const legend = anychart.standalones.legend();
legend
.position('center')
.items([
    { text: 'Fully vaccinated', iconFill: '#296953' },
    { text: 'Partially vaccinated', iconFill: '#63b39b' },
    { text: 'Not vaccinated', iconFill: '#eee' }
]);

Formato de información sobre herramientas

Para facilitar una mejor comunicación de datos, formateemos la información sobre herramientas para que sea más informativa mostrando los valores en forma de porcentaje e indicando que el valor máximo para el indicador es 50%:

// Set gauge tooltip
gauge
    .tooltip()
    .useHtml(true)
    .titleFormat('{%Value} %')
        .format(
        'Maximum on scale: ' +
        settings.maximum +
        ' %'
    );

Consulte el código completo de esta versión en CodePen .

Formato de ejes y etiquetas

Lo último que haremos será mostrar todos los valores de los datos como valores porcentuales para evitar confusiones. También agregaremos un subtítulo como fila en la tabla debajo del título para indicar que los valores son porcentajes. Una última cosa será embellecer las etiquetas de la barra con fuentes más audaces.

Versión final de calibre lineal

El código final completo para este gráfico de indicadores lineales de JavaScript se puede encontrar en CodePen .

Conclusión

En este tutorial paso a paso, hemos visto cómo crear gráficos de JavaScript funcionales y visualmente atractivos no es demasiado difícil con una buena biblioteca de JavaScript. Consulte la documentación y los ejemplos para comprender mejor las características y propiedades del indicador lineal. Haga cualquier pregunta si tiene dudas sobre este gráfico u otras visualizaciones.

Hay múltiples opciones de gráficos proporcionadas por AnyChart , y también hay muchas otras bibliotecas de gráficos de JavaScript para crear hermosas visualizaciones.

¡Vacunémonos todos y mantengámonos saludables para seguir creando más visualizaciones!

 Fuente: https://www.sitepoint.com/create-linear-gauge-chart-javascript/

#javascript 

What is GEEK

Buddha Community

Crear Un Gráfico De Indicadores Lineales En JavaScript
Saul  Alaniz

Saul Alaniz

1660426200

Crear Un Gráfico De Indicadores Lineales En JavaScript

Le mostraremos cómo crear rápidamente un gráfico de indicador lineal atractivo e interactivo que destaque los datos de vacunación contra el Covid-19 en todo el mundo. Nuestro gráfico nos permitirá visualizar el estado de la vacunación contra el covid-19 en el momento de escribir este artículo y mostrará dos tipos de datos, que mostrarán lo lejos que estamos del objetivo medio de vacunar parcial y totalmente a la población mundial.

imagen de portada de calibre lineal

¿Qué es un gráfico de calibre lineal?

La visualización de datos es una herramienta invaluable, dada la gran cantidad de datos que se crean y las numerosas posibilidades para obtener información de los datos. La visualización de datos es particularmente útil para identificar tendencias, interpretar patrones y comunicar ideas complejas al público objetivo.

Un gráfico de indicadores lineales representa una escala lineal vertical u horizontal que muestra los valores requeridos, con una escala de colores junto con punteros únicos o múltiples. Los valores mínimo y máximo del rango de datos se pueden establecer sobre los ejes de acuerdo con los datos que se representan. La posición del puntero indica el valor actual de la métrica.

Un gráfico de indicadores puede mostrar un solo valor o varios valores utilizando un puntero individual o una combinación de marcadores. El puntero puede ser una aguja o una línea con un marcador de cualquier forma, como un círculo, un cuadrado, un rectángulo o un triángulo.

El tipo de gráfico de indicador lineal es una representación visual eficaz para mostrar qué tan cerca o lejos están los valores del punto de datos deseado.

Tipos de calibres lineales

Los diversos tipos de medidores lineales son el gráfico de termómetro, el gráfico de viñetas, el gráfico de tanque y el gráfico de LED. El termómetro de mercurio, que consiste en marcas menores que muestran la temperatura con el valor del puntero, es un ejemplo clásico de un gráfico de calibre lineal.

La visualización de calibre lineal que construiremos

Aquí hay un adelanto del gráfico de calibre lineal final. Siga este tutorial para aprender cómo creamos este interesante e informativo gráfico de indicadores lineales con JavaScript.

versión final del gráfico de calibre lineal

Los cuatro pasos para construir un indicador lineal de JavaScript

Siempre es útil tener algunas habilidades con tecnologías como HTML y JavaScript. Pero en este tutorial, estamos usando una biblioteca de gráficos JS que facilita la creación de gráficos atractivos como el indicador lineal, incluso con conocimientos técnicos mínimos.

Hay varias bibliotecas de gráficos de JavaScript para visualizar datos con facilidad, y aquí estamos creando el gráfico de indicadores lineales con AnyChart . Esta biblioteca es flexible, con una extensa documentación , y consta de algunos excelentes ejemplos . Además, tiene un área de juegos para experimentar con el código y es gratuito para uso no comercial. Si desea comprar una versión con licencia, puede consultar las opciones disponibles , y si es una organización educativa o sin fines de lucro, puede ponerse en contacto para obtener una licencia gratuita aquí .

Los pasos para hacer un indicador lineal de JavaScript

Estos son los pasos básicos para crear un gráfico de indicadores lineales:

  1. Crea una página HTML básica.
  2. Incluya los archivos JavaScript necesarios.
  3. Agrega los datos.
  4. Escriba el código JavaScript para el gráfico.

Veamos cada uno de estos pasos en detalle a continuación.

1. Crea una página HTML básica

Lo primero que debemos hacer es crear una página HTML que contenga nuestra visualización. Agregamos un <div>elemento de bloque y le damos una ID para que podamos hacer referencia a él más tarde:

<html lang="en">
  <head>
    <title>JavaScript Linear Gauge</title>
    <style type="text/css">      
      html, body, #container { 
        width: 100%; height: 100%; margin: 0; padding: 0; 
      } 
    </style>
  </head>
  <body>
    <div id="container"></div>
  </body>
</html>

Los atributos de ancho y alto de <div>están configurados al 100% para que el gráfico se represente en toda la pantalla. Estos atributos se pueden modificar según los requisitos.

2. Incluya los archivos JavaScript necesarios

El siguiente paso es hacer referencia a los enlaces JS en la página HTML. Usaremos la biblioteca AnyChart para este tutorial, así que incluyamos los archivos correspondientes de su CDN .

Para crear un gráfico de indicador lineal, necesitaremos agregar tres scripts: el módulo principal , el módulo de indicador lineal y el módulo de tabla :

<html lang="en">
  <head>
    <title>JavaScript Linear Gauge</title>
    <style type="text/css">
      html, body, #container { 
        width: 100%; height: 100%; margin: 0; padding: 0; 
      } 
    </style>
  </head>
  <body>  
    <div id="container"></div>
    <script>
      // All the code for the JS linear gauge will come here
    </script>
    <script src="https://cdn.anychart.com/releases/8.10.0/js/anychart-core.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.10.0/js/anychart-linear-gauge.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.10.0/js/anychart-table.min.js"></script>
  </body>
</html>

3. Agregue los valores de los datos

Los datos para el gráfico de indicadores lineales se recopilan de Our World in Data y se incluyen en el código. En ese sitio, podemos ver el porcentaje de personas que han recibido una y dos dosis de la vacuna Covid para cada continente en todo el mundo.

Debido a que (en el momento de escribir este artículo) ninguno de los números supera el 50 %, hemos mantenido el límite máximo del eje de todos los indicadores lineales en el 50 % y comparamos qué tan lejos de esa marca está cada continente, así como la cifra global. Indicamos las cifras al menos parcialmente vacunadas con representación LED y los números completamente vacunados con un puntero de barra. Veremos cómo se agregan los datos en el último paso.

Entonces, todos nuestros pasos iniciales están listos, ¡y ahora agreguemos el código para hacer un gráfico de indicador lineal con JavaScript!

4. Escriba el código JavaScript para el gráfico

Antes de agregar cualquier código, encerramos todo en una función que se asegura de que todo el código dentro se ejecute solo una vez que se carga la página.

Crear un gráfico de indicadores lineales implica un par de pasos y es un poco más complejo que los otros tipos de gráficos básicos. Pero eso no significa que sea muy difícil, y repasaremos cada paso para entender cómo se hace el gráfico.

Definición de la escala lineal y el eje para el gráfico de indicadores

Tenemos varios punteros en nuestro gráfico. Entonces, comencemos creando una función que acepte dos valores: uno para el puntero de barra y otro para el indicador LED. Luego crearemos un indicador, estableceremos los datos y especificaremos el diseño como horizontal. A continuación, estableceremos el rango de las escalas y los ejes. Haremos una escala lineal con los rangos mínimo y máximo. Para el eje, definiremos los atributos y estableceremos la orientación:

function drawGauge(value, settings) {
  // Create gauge with settings
  const gauge = anychart.gauges.linear();
  gauge.data([value, settings.value]);
  gauge.layout('horizontal');

  // Set scale for gauge
  const scale = anychart.scales.linear();
  scale.minimum(0).maximum(settings.maximum).ticks({ interval: 2 });

  // Set axis for gauge
  const axis = gauge.axis(0);
  axis.width('1%').offset('43%').scale(scale).orientation('bottom');
}

Configuración del puntero de barra y la etiqueta

Ahora, crearemos el puntero de la barra y la etiqueta para la serie de barras. La etiqueta recibe un desplazamiento para evitar la superposición con el puntero:

// Create and set bar point
const barSeries = gauge.bar(0);

barSeries
  .scale(scale)
  .width('4%');

// Create and set label with actual data
const labelBar = barSeries.labels();
labelBar
  .enabled(true)
  .offsetY('-15px');

Creación del puntero LED y configuración del atributo de color

En los puntos LED, especificaremos el espacio entre los puntos y usaremos la propiedad del atenuador para establecer el color de los puntos LED residuales para indicar un efecto no iluminado. También declararemos la escala de colores de los puntos LED encendidos:

// Create and set LED point
const ledPointer = gauge.led(1);

ledPointer
  .offset('10%')
  .width('30%')
  .count(settings.maximum)
  .scale(scale)
  .gap(0.55)
  .dimmer(function () {
    return '#eee';
  });

ledPointer.colorScale().colors(['#63b39b', '#63b39b']);

Declaración de los indicadores con el valor objetivo de cada punto de datos

Para hacer el indicador lineal para cada continente, llamaremos a la función definida anteriormente para cada región con sus datos. El primer número indica los datos del valor objetivo y la segunda variable es un objeto con los datos del LED. maximumpermanece constante en 50, mientras que es el valuevalor porcentual de la población completamente vacunada para cada punto de datos. Este valor será mostrado por el puntero:

// Create gauges
const world = drawGauge(13.68, { maximum: 50, value: 27.13 });
const europe = drawGauge(36.98, { maximum: 50, value: 47.28 });
const nAmerica = drawGauge(36.77, { maximum: 50, value: 46.53 });
const sAmerica = drawGauge(22.8, { maximum: 50, value: 40.54 });
const asia = drawGauge(10.14, { maximum: 50, value: 27.16 });
const oceania = drawGauge(9.75, { maximum: 50, value: 22.12 });
const africa = drawGauge(1.56, { maximum: 50, value: 3.04 });

Configuración del diseño de los indicadores lineales

Para mostrar cada uno de los indicadores lineales uno debajo del otro, definiremos una tabla y agregaremos el título junto con cada punto de datos como una fila separada. Agregaremos las diversas propiedades del diseño, como la alineación y el tamaño de fuente. También definiremos parámetros para la primera fila, ya que es el título, y estableceremos el atributo de ancho de la primera columna al 100 %, ya que no necesitamos más columnas:

// Create table to place gauges
const layoutTable = anychart.standalones.table();
layoutTable
  .hAlign('right')
  .vAlign('middle')
  .fontSize(14)
  .cellBorder(null);

// Put gauges into the layout table
layoutTable.contents([
  [null, 'Covid-19 Vaccination - How far are we from the halfway mark?'],
  ['World', world],
  ['Europe', europe],
  ['North America', nAmerica],
  ['South America', sAmerica],
  ['Asia', asia],
  ['Oceania', oceania],
  ['Africa', africa]
]);

// Set height for first row in layout table
layoutTable
  .getRow(0)
  .height(50)
  .fontSize(22)
  .hAlign('center');

// Set the first column to 100% width
layoutTable.getCol(0).width(100);

Dibujar el gráfico

El último paso es hacer referencia al <div>contenedor que agregamos en el paso anterior y dibujar el gráfico:

// Set container id and initiate drawing
layoutTable.container('container');
layoutTable.draw();

Y eso es. ¡Ahora tenemos un gráfico de calibre lineal de JavaScript completamente funcional y hermoso! El código de esta versión inicial del indicador lineal se puede ver en CodePen .

Versión inicial de calibre lineal

Hacer que el gráfico sea accesible

Siempre es una buena práctica asegurarse de que los gráficos sean accesibles para la mayor cantidad de personas posible. Entonces, teniendo todo en cuenta, creamos una versión básica del gráfico de indicadores lineales que se adapta mejor a los lectores de pantalla. Puede consultar esto aquí y también leer más sobre este aspecto en la documentación de la biblioteca AnyChart JavaScript.

Personalización del indicador lineal

El gráfico de indicador lineal predeterminado que hemos creado se ve increíble en este momento, pero hacer algunas modificaciones mejorará la legibilidad y hará que el gráfico sea aún más impresionante. Las bibliotecas de JavaScript son perfectas no solo para crear gráficos rápidamente, sino también para personalizar las visualizaciones según sea necesario. Las bibliotecas de gráficos ofrecen muchas opciones de configuración para controlar el comportamiento y la estética de los gráficos. Hagamos algunos ajustes pequeños pero efectivos a nuestro gráfico de indicadores lineales actual.

Modificación de color

Para hacer que el indicador lineal se vea más cohesivo, hagamos que el atributo de color del puntero de barra sea una versión más oscura de los puntos LED. Lo haremos especificando los atributos de relleno y trazo de la barra:

// Create and set bar point
const barSeries = gauge.bar(0);
barSeries
  .scale(scale)
  .width('4%')
  .fill('#296953')
  .stroke('#296953');

Agregar una leyenda a nuestro gráfico de indicadores lineales

Dado que hemos usado diferentes colores para la barra, los punteros LED iluminados y no iluminados, es una buena práctica proporcionar una leyenda para explicar los colores. Haremos una leyenda y la agregaremos debajo del título del gráfico:

// Create stand alone legend
const legend = anychart.standalones.legend();
legend
.position('center')
.items([
    { text: 'Fully vaccinated', iconFill: '#296953' },
    { text: 'Partially vaccinated', iconFill: '#63b39b' },
    { text: 'Not vaccinated', iconFill: '#eee' }
]);

Formato de información sobre herramientas

Para facilitar una mejor comunicación de datos, formateemos la información sobre herramientas para que sea más informativa mostrando los valores en forma de porcentaje e indicando que el valor máximo para el indicador es 50%:

// Set gauge tooltip
gauge
    .tooltip()
    .useHtml(true)
    .titleFormat('{%Value} %')
        .format(
        'Maximum on scale: ' +
        settings.maximum +
        ' %'
    );

Consulte el código completo de esta versión en CodePen .

Formato de ejes y etiquetas

Lo último que haremos será mostrar todos los valores de los datos como valores porcentuales para evitar confusiones. También agregaremos un subtítulo como fila en la tabla debajo del título para indicar que los valores son porcentajes. Una última cosa será embellecer las etiquetas de la barra con fuentes más audaces.

Versión final de calibre lineal

El código final completo para este gráfico de indicadores lineales de JavaScript se puede encontrar en CodePen .

Conclusión

En este tutorial paso a paso, hemos visto cómo crear gráficos de JavaScript funcionales y visualmente atractivos no es demasiado difícil con una buena biblioteca de JavaScript. Consulte la documentación y los ejemplos para comprender mejor las características y propiedades del indicador lineal. Haga cualquier pregunta si tiene dudas sobre este gráfico u otras visualizaciones.

Hay múltiples opciones de gráficos proporcionadas por AnyChart , y también hay muchas otras bibliotecas de gráficos de JavaScript para crear hermosas visualizaciones.

¡Vacunémonos todos y mantengámonos saludables para seguir creando más visualizaciones!

 Fuente: https://www.sitepoint.com/create-linear-gauge-chart-javascript/

#javascript 

Rahul Jangid

1622207074

What is JavaScript - Stackfindover - Blog

Who invented JavaScript, how it works, as we have given information about Programming language in our previous article ( What is PHP ), but today we will talk about what is JavaScript, why JavaScript is used The Answers to all such questions and much other information about JavaScript, you are going to get here today. Hope this information will work for you.

Who invented JavaScript?

JavaScript language was invented by Brendan Eich in 1995. JavaScript is inspired by Java Programming Language. The first name of JavaScript was Mocha which was named by Marc Andreessen, Marc Andreessen is the founder of Netscape and in the same year Mocha was renamed LiveScript, and later in December 1995, it was renamed JavaScript which is still in trend.

What is JavaScript?

JavaScript is a client-side scripting language used with HTML (Hypertext Markup Language). JavaScript is an Interpreted / Oriented language called JS in programming language JavaScript code can be run on any normal web browser. To run the code of JavaScript, we have to enable JavaScript of Web Browser. But some web browsers already have JavaScript enabled.

Today almost all websites are using it as web technology, mind is that there is maximum scope in JavaScript in the coming time, so if you want to become a programmer, then you can be very beneficial to learn JavaScript.

JavaScript Hello World Program

In JavaScript, ‘document.write‘ is used to represent a string on a browser.

<script type="text/javascript">
	document.write("Hello World!");
</script>

How to comment JavaScript code?

  • For single line comment in JavaScript we have to use // (double slashes)
  • For multiple line comments we have to use / * – – * /
<script type="text/javascript">

//single line comment

/* document.write("Hello"); */

</script>

Advantages and Disadvantages of JavaScript

#javascript #javascript code #javascript hello world #what is javascript #who invented javascript

Hire Dedicated JavaScript Developers -Hire JavaScript Developers

It is said that a digital resource a business has must be interactive in nature, so the website or the business app should be interactive. How do you make the app interactive? With the use of JavaScript.

Does your business need an interactive website or app?

Hire Dedicated JavaScript Developer from WebClues Infotech as the developer we offer is highly skilled and expert in what they do. Our developers are collaborative in nature and work with complete transparency with the customers.

The technology used to develop the overall app by the developers from WebClues Infotech is at par with the latest available technology.

Get your business app with JavaScript

For more inquiry click here https://bit.ly/31eZyDZ

Book Free Interview: https://bit.ly/3dDShFg

#hire dedicated javascript developers #hire javascript developers #top javascript developers for hire #hire javascript developer #hire a freelancer for javascript developer #hire the best javascript developers

joe biden

1617257581

Software de restauración de Exchange para restaurar sin problemas PST en Exchange Server

¿Quiere restaurar los buzones de correo de PST a Exchange Server? Entonces, estás en la página correcta. Aquí, lo guiaremos sobre cómo puede restaurar fácilmente mensajes y otros elementos de PST a MS Exchange Server.

Muchas veces, los usuarios necesitan restaurar los elementos de datos de PST en Exchange Server, pero debido a la falta de disponibilidad de una solución confiable, los usuarios no pueden obtener la solución. Háganos saber primero sobre el archivo PST y MS Exchange Server.

Conozca PST y Exchange Server

PST es un formato de archivo utilizado por MS Outlook, un cliente de correo electrónico de Windows y muy popular entre los usuarios domésticos y comerciales.

Por otro lado, Exchange Server es un poderoso servidor de correo electrónico donde todos los datos se almacenan en un archivo EDB. Los usuarios generalmente guardan la copia de seguridad de los buzones de correo de Exchange en el archivo PST, pero muchas veces, los usuarios deben restaurar los datos del archivo PST en Exchange. Para resolver este problema, estamos aquí con una solución profesional que discutiremos en la siguiente sección de esta publicación.

Un método profesional para restaurar PST a Exchange Server

No le recomendamos que elija una solución al azar para restaurar los datos de PST en Exchange Server. Por lo tanto, al realizar varias investigaciones, estamos aquí con una solución inteligente y conveniente, es decir, Exchange Restore Software. Es demasiado fácil de manejar por todos los usuarios y restaurar cómodamente todos los datos del archivo PST a Exchange Server.

Funciones principales ofrecidas por Exchange Restore Software

El software es demasiado simple de usar y se puede instalar fácilmente en todas las versiones de Windows. Con unos pocos clics, la herramienta puede restaurar los elementos del buzón de Exchange.

No es necesario que MS Outlook restaure los datos PST en Exchange. Todos los correos electrónicos, contactos, notas, calendarios, etc. se restauran desde el archivo PST a Exchange Server.

Todas las versiones de Outlook son compatibles con la herramienta, como Outlook 2019, 2016, 2013, 2010, 2007, etc. La herramienta proporciona varios filtros mediante los cuales se pueden restaurar los datos deseados desde un archivo PST a Exchange Server. El programa se puede instalar en todas las versiones de Windows como Windows 10, 8.1, 8, 7, XP, Vista, etc.

Descargue la versión de demostración del software de restauración de Exchange y analice el funcionamiento del software restaurando los primeros 50 elementos por carpeta.

Líneas finales

No existe una solución manual para restaurar los buzones de correo de Exchange desde el archivo PST. Por lo tanto, hemos explicado una solución fácil e inteligente para restaurar datos de archivos PST en Exchange Server. Simplemente puede usar este software y restaurar todos los datos de PST a Exchange Server.

Más información:- https://www.datavare.com/software/exchange-restore.html

#intercambio de software de restauración #intercambio de restauración #buzón del servidor de intercambio #herramienta de restauración de intercambio

Niraj Kafle

1589255577

The essential JavaScript concepts that you should understand

As a JavaScript developer of any level, you need to understand its foundational concepts and some of the new ideas that help us developing code. In this article, we are going to review 16 basic concepts. So without further ado, let’s get to it.

#javascript-interview #javascript-development #javascript-fundamental #javascript #javascript-tips