JavaScript

Tema 7 · Gràfiques amb Chart.js per a l'enginyeria

Introducció

Chart.js és una biblioteca JavaScript que permet crear gràfics interactius (línies, barres, sectors, etc.) de manera senzilla. En enginyeria, podem visualitzar tendències de temperatura, consum elèctric, dades d'assaigs o qualsevol sèrie temporal de valors tècnics directament al navegador.

Objectius

  • Incloure Chart.js des d'un CDN
  • Crear un gràfic de línies, barres i sectors
  • Personalitzar colors, etiquetes i llegendes
  • Actualitzar dades d'un gràfic dinàmicament amb JavaScript

Gràfic de línies: evolució de temperatura

Crear un gràfic de línies a partir de dades d'un sensor:

// HTML: <canvas id="grafic-temp"></canvas>
const ctx = document.getElementById('grafic-temp').getContext('2d');
new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['10:00','10:30','11:00','11:30','12:00'],
    datasets: [{
      label: 'Temperatura (°C)',
      data: [22.5, 23.1, 24.8, 25.2, 26.0],
      borderColor: '#7c3aed',
      backgroundColor: 'rgba(124,58,237,0.1)',
      fill: true,
      tension: 0.3
    }]
  },
  options: {
    responsive: true,
    plugins: {
      title: { display: true, text: 'Evolució de temperatura' }
    }
  }
});

Gràfic de barres i sectors

Comparació de consum elèctric per sectors i distribució:

// Barres: consum mensual
new Chart(document.getElementById('barres'), {
  type: 'bar',
  data: {
    labels: ['Gen','Feb','Mar','Abr'],
    datasets: [{
      label: 'Consum (kWh)',
      data: [320, 290, 310, 280],
      backgroundColor: ['#a78bfa','#8b5cf6','#7c3aed','#6d28d9']
    }]
  }
});

// Sectors: repartició de consum
new Chart(document.getElementById('sectors'), {
  type: 'pie',
  data: {
    labels: ['Maquinària','Il·luminació','Climatització','Oficina'],
    datasets: [{
      data: [45, 20, 25, 10],
      backgroundColor: ['#7c3aed','#a78bfa','#c4b5fd','#e0e7ff']
    }]
  }
});

Exercicis

  1. Crea un gràfic de línies amb les temperatures màximes i mínimes d'una setmana (dues línies al mateix gràfic).
  2. Dissenya un gràfic de barres que compari la producció diària de 3 màquines durant 5 dies.
  3. Fes un gràfic de sectors amb la distribució del cost energètic d'una planta industrial.

Mini Projecte – Dashboard de monitoratge energètic

Construeix una pàgina web amb Chart.js que simuli un panell de control d'energia:

  • Un gràfic de línies amb el consum horari (valors simulats o carregats des d'un fitxer JSON).
  • Un gràfic de barres amb el consum diari dels últims 7 dies.
  • Un gràfic de sectors amb el percentatge de consum per seccions.
  • Un botó "Actualitzar dades" que generi valors aleatoris nous i refresqui els gràfics sense recarregar la pàgina.
  • Utilitza colors de la paleta porpra per mantenir la coherència visual.

Pista: per actualitzar un gràfic, modifica chart.data.datasets[0].data i crida chart.update().

Tema 6 Índex Tema 8