Como hacer graficas con javascript (Highcharts)

Código Javascript

Gráficas con javascript librería Highcharts


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.

Ejemplo de gráfica lineal con Highcharts


<!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>


tags: highcharts, graficas javascript. libreria graficas highcharts

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.