Como hacer graficas con javascript (Fusioncharts)

Código Javascript

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>

tags: highcharts, graficas javascript. libreria graficas fusioncharts

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.