¿Cómo crear gráficos y diagramas interactivos con JavaScript?

Crear gráficos y diagramas interactivos con JavaScript implica algunos pasos. Puedes usar diferentes bibliotecas de JavaScript como Chart.js, Google Charts, D3.js y más. En esta guía, usaré las tres bibliotecas mencionadas anteriormente para demostrar cómo se pueden crear gráficos y diagramas interactivos.

El primer paso es elegir la biblioteca que te gustaría usar para generar tus gráficos o diagramas, descargarla e incluirla en tu documento HTML.

Aquí hay un ejemplo usando Chart.js:

Paso 1. Incluye la biblioteca Chart.js en tu archivo HTML usando el CDN:

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

Paso 2. Crea un elemento canvas en tu HTML donde se dibujará tu gráfico.

<canvas id="myChart" width="400" height="400"></canvas>

Paso 3. Escribe una función JavaScript que cree un nuevo objeto Chart. La función tomará dos argumentos: el tipo de gráfico (por ejemplo, line, bar, etc.) y los datos para el gráfico. Los gráficos en Chart.js son altamente personalizables. Puedes leer más en su documentación, pero para este ejemplo, crearemos un simple gráfico de líneas:

<script>
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
            datasets: [{
                label: '# of Votes',
                data: [12, 19, 3, 5, 2, 3],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false
        }
    });
</script>

Para usar Google Charts, sigue estos pasos:

Paso 1. Carga la biblioteca de Google Charts en tu archivo HTML:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

Paso 2. En tu código JavaScript, primero debes cargar la biblioteca del gráfico:

<script type="text/javascript">
    google.charts.load('current', {'packages':['corechart']});
</script>

Paso 3. Crea una función de devolución de llamada que creará y rellenará una tabla de datos, instanciará el gráfico de tarta, pasará los datos y lo dibujará.

<script type="text/javascript">
 google.charts.load('current', {'packages':['corechart']});

google.charts.setOnLoadCallback(drawChart);

function drawChart() {

   var data = google.visualization.arrayToDataTable([
      ['Task', 'Hours per Day'],
      ['Work',     11],
      ['Eat',      2],
      ['Commute',  2],
      ['Watch TV', 2],
      ['Sleep',    7]
    ]);

    var options = {
      title: 'My Daily Activities'
    };

    var chart = new google.visualization.PieChart(document.getElementById('piechart'));

    chart.draw(data, options);
  }
</script>

Paso 4. También necesitarás crear una etiqueta div correspondiente en el cuerpo de tu documento HTML, que servirá como el contenedor para el gráfico de tarta:

<div id="piechart" style="width: 900px; height: 500px;"></div>

Finalmente, si quieres usar D3.js:

Paso 1. Incluye la biblioteca D3.js al igual que antes.

<script src="https://d3js.org/d3.v5.min.js"></script>

Paso 2. Crea una área svg donde se dibujará tu gráfico.

<svg id="myCanvas" width="720" height="120"></svg>

Paso 3. Usa los métodos de D3.js para dibujar tu gráfico.

<script>
   var svg = d3.select("#myCanvas"),
    margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom;

   var data = [{date: 1, value: 34},{date: 2, value: 45}, {date: 3, value: 78}, {date: 4, value: 23}];
  
   var x = d3.scaleLinear().range([0, width]);
   var y = d3.scaleLinear().range([height, 0]);

   var line = d3.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.value); });
    
   x.domain(d3.extent(data, function(d) { return d.date; }));
   y.domain(d3.extent(data, function(d) { return d.value; }));

   svg.append("path")
    .data([data])
    .attr("class", "line")
    .attr("d", line);
</script>

Asegúrate de entender a fondo la biblioteca que estás utilizando y lo que hace cada uno de estos pasos. Tanto Chart.js, como Google Charts y D3.js permiten casos de uso más avanzados y son altamente personalizables.