Como hacer graficas con javascript (ApexCharts)

Código Javascript

Librería javascript para crear gráficos (ApexCharts)


Las gráficas son una herramienta importante para visualizar datos de manera clara y concisa. En la actualidad, existen diversas librerías en JavaScript que permiten crear gráficas de manera rápida y sencilla. Una de estas librerías es ApexCharts, que permite crear gráficas interactivas y personalizables.

El código proporcionado es un ejemplo de cómo utilizar ApexCharts para crear un gráfico lineal. En el código, se definen los datos de las series y las opciones de visualización del gráfico. Luego, se crea el objeto de gráfico con la función ApexCharts y se renderiza en el documento HTML con la función render(). El resultado es un gráfico lineal con tres series de datos y opciones de visualización personalizadas como título, ejes, leyendas y herramientas de interacción. Este ejemplo utiliza también Bootstrap 4 para la estructura y estilo del HTML.


Ejemplo de gráficos creados con ApexCharts



<!DOCTYPE html>
<html>
<head>
    <title>Ejemplo de Gráfico Lineal con Bootstrap y Highcharts</title>
    <!-- CSS de Bootstrap 4 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" crossorigin="anonymous">

<!-- Biblioteca de ApexCharts -->
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

  
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div id="chart"></div>

            </div>
        </div>
    </div>

    <script>
// Datos de las series
var series = [{
name: "Series 1",
data: [30, 40, 35, 50, 49, 60, 70, 91, 125]
},
{
name: "Series 2",
data: [20, 35, 45, 55, 70, 75, 90, 100, 110]
},
{
name: "Series 3",
data: [10, 20, 30, 40, 50, 60, 70, 80, 90]
}];

// Opciones de visualización
var options = {
chart: {
height: 350,
type: 'line',
zoom: {
enabled: false
}
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'straight'
},
series: series,
title: {
text: 'Ejemplo de Gráfico Lineal con Bootstrap 4 y ApexCharts',
align: 'center'
},
xaxis: {
categories: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep'],
},
yaxis: {
title: {
text: 'Valores'
},
},
tooltip: {
enabled: true,
y: {
formatter: function(val) {
return val
}
}
}
}

// Crear el gráfico
var chart = new ApexCharts(document.querySelector("#chart"), options);

// Renderizar el gráfico
chart.render();;

    </script>
</body>
</html>


tags: apexcharts, graficas javascript. libreria graficas apexcharts, apexcharts.js

En esta sección encontrarás una mezcla de códigos recopilados de fuentes públicas de Internet y otros creados por CoreASP. Estos recursos se comparten de buena fe con el único objetivo de servir como base de conocimiento en el desarrollo de aplicaciones en ASP Clásico. CoreASP no garantiza la precisión, vigencia ni funcionamiento de los artículos o fragmentos de código publicados, y no se hace responsable por el uso que se les dé. Se recomienda siempre revisar, adaptar y probar el código antes de implementarlo en entornos de producción.