Como hacer graficas con javascript (Fusioncharts)

Por ASP clásico / 19/01/2022 @ 12:07:03 / 1468 visitas

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

Las gráficas con JavaScript ofrecen una amplia variedad de ventajas para los desarrolladores y los usuarios. Entre las ventajas se incluyen una amplia gama de opciones de visualización de datos, una mayor interactividad, una experiencia de usuario mejorada y una mayor flexibilidad. Uno de los frameworks de gráficos más populares en JavaScript es FusionCharts.

FusionCharts es una herramienta para crear gráficos interactivos en línea que se puede integrar fácilmente en aplicaciones web y móviles. El framework cuenta con más de 100 tipos de gráficos, mapas y medidores, y se puede personalizar según las necesidades del usuario.

El código proporcionado es un ejemplo de cómo crear un gráfico lineal utilizando FusionCharts en conjunto con Bootstrap. El código incluye la importación de los archivos necesarios, la creación del contenedor de la gráfica, y la definición de las opciones y los datos del gráfico en formato JSON. La gráfica muestra los valores de ventas de un negocio en los meses del año. Una vez creada la instancia de la gráfica, se utiliza el método "render" para mostrarla en la página.

Ejemplo de gráficos creados con Fusioncharts

<!DOCTYPE html>
<html>
<head>
    <title>Ejemplo de Gráfico Lineal con Bootstrap y FusionCharts</title>
    <script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
    <script src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fint.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div id="grafico"></div>
            </div>
        </div>
    </div>

    <script>
        FusionCharts.ready(function () {
            var revenueChart = new FusionCharts({
                type: 'line',
                renderAt: 'grafico',
                width: '100%',
                height: '400',
                dataFormat: 'json',
                dataSource: {
                    "chart": {
                        "caption": "Ejemplo de Gráfico Lineal",
                        "xAxisName": "Mes",
                        "yAxisName": "Valor",
                        "theme": "fint",
                        "showValues": "1",
                        "showLegend": "1"
                    },
                    "data": [{
                        "label": "Enero",
                        "value": "10"
                    }, {
                        "label": "Febrero",
                        "value": "20"
                    }, {
                        "label": "Marzo",
                        "value": "30"
                    }, {
                        "label": "Abril",
                        "value": "40"
                    }, {
                        "label": "Mayo",
                        "value": "50"
                    }, {
                        "label": "Junio",
                        "value": "60"
                    }, {
                        "label": "Julio",
                        "value": "70"
                    }]
                }
            }).render();
        });
    </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 fusioncharts

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.

Como hacer graficas con javascript (Fusioncharts)