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 ASP TEAM. Compartimos recursos útiles de buena fe para formar una base de conocimiento en el desarrollo de aplicaciones en ASP Clásico.