Como hacer graficas con javascript (Highcharts)
Por ASP clásico / 18/01/2022 @ 11:37:28 / 1453 visitas
Las gráficas con JavaScript son herramientas que permiten la visualización de datos de manera gráfica en una página web. Highcharts es una librería de JavaScript que ofrece una gran cantidad de opciones para crear diferentes tipos de gráficos, como gráficos de líneas, barras, áreas, entre otros.
En el código presentado se puede observar un ejemplo de un gráfico lineal creado con Highcharts. En la sección de head del documento HTML se hace referencia a los archivos de Highcharts y Bootstrap que se van a utilizar para crear el gráfico. Luego se encuentra un contenedor div con el id "grafico" donde se insertará el gráfico.
En la sección de script se encuentra el código que permite crear el gráfico. En este ejemplo se establece el título del gráfico y se definen los valores para el eje x y eje y. Además, se definen dos series de datos que se representarán en el gráfico. Finalmente, se establecen opciones de estilo para la representación de la línea que une los puntos en el gráfico.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de Gráfico Lineal con Bootstrap y Highcharts</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="grafico"></div>
</div>
</div>
</div>
<script>
Highcharts.chart('grafico', { title: {text: 'Ejemplo de Gráfico Lineal'
},
xAxis: {categories: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio']
},
yAxis: { title: {text: 'Valor'
}
},
series: [{name: 'Serie 1',
data: [10, 20, 30, 40, 50, 60, 70]
}, {name: 'Serie 2',
data: [5, 10, 15, 20, 25, 30, 35]
}],
plotOptions: { line: { dataLabels: {enabled: true
},
enableMouseTracking: false
}
}
});
</script>
</body>
</html>
Descubre más sobre cómo simplificar y optimizar tu trabajo empresarial en el Blog de CoreASP.
highcharts, graficas javascript. libreria graficas highcharts
Descargo de Responsabilidad:
El contenido y los recursos que ofrecemos en CoreASP están destinados únicamente a proporcionar herramientas y ejemplos prácticos para el desarrollo en ASP Clásico. Esta información es de carácter general y no debe considerarse asesoramiento profesional o técnico específico para tu proyecto. Aunque hacemos todo lo posible por asegurar la calidad y precisión de los recursos compartidos, no garantizamos que sean completamente libres de errores o que se ajusten perfectamente a todas las situaciones. CoreASP no se responsabiliza por cualquier pérdida, daño o inconveniente derivado del uso directo o indirecto de los recursos o información proporcionada. Además, CoreASP no respalda ni asume responsabilidad por enlaces o contenido de terceros que puedan estar referenciados en nuestra plataforma. Todos los derechos de propiedad intelectual sobre el contenido y recursos publicados en CoreASP pertenecen a CoreASP o a sus respectivos propietarios, y su uso está sujeto a las condiciones de la licencia especificada para cada recurso. Nos reservamos el derecho de modificar este descargo de responsabilidad en cualquier momento sin previo aviso. Para más detalles, consulta el documento completo de términos y condiciones.
13/07/2025 @ 10:56:59
23/05/2025 @ 14:09:59
07/04/2025 @ 07:54:51
29/03/2025 @ 16:49:42
12/02/2025 @ 10:15:42
21/01/2025 @ 16:21:11
Recursos inteligentes para desarrollos con ASP Clásico.