Video summary

Crea gráficas interactivas con ChartJS

Main summary

Key takeaways

Technology

Video topic

Tutorial on creating an interactive dashboard with Chart.js (mentioned as version 3.70) using roller coaster data loaded from an external API. The example builds three charts inside a single panel and includes dataset/property switching via a dropdown.

What the project builds (3 charts)

1) Donut / “dough” chart (models count)

  • Shows the number of roller coaster models.
  • Data preparation:
    • Extract unique model values (uses a Set to remove duplicates).
    • For each model, filter roller coasters and compute counts via array length.

2) Radar chart (national roller coasters attribute “height” initially)

  • Plots national-only roller coasters (example: Spain).
  • Uses type: 'radar'.
  • Data mapping:
    • Chart labels are derived from each roller coaster’s name.
    • Dataset data is mapped from a chosen numeric property (initially height / “altura” in the transcript).
  • Aesthetic customization:
    • Hide legend.
    • Hide ticks via scales.r.ticks.display = false.
    • Use lighter border color so the radar remains visible on the dark UI.

3) Line chart (constructions by year ranges)

  • Shows how many roller coasters were built across year intervals (e.g., "1998-2000", "2001-2003", …).
  • Data preparation:
    • Build a years array containing ranges like "from-to".
    • Split each range by - to get bounds.
    • For each range, filter roller coasters where yearBuilt >= from and yearBuilt <= to, then count them.
  • Styling:
    • Hide legend.
    • Configure line smoothness using tension (set around 0.5) to avoid sharp angles.
    • Set border/background colors.
    • Enable area fill (fill: true implied by the explanation that area isn’t filled by default).

Chart.js concepts emphasized

  • Chart creation structure
    • Use new Chart(canvasId, { type, data, options }).
  • Data format
    • data contains labels and datasets (datasets is an array to support multiple datasets).
  • Options
    • Global defaults via defaults (shared UI text color across charts).
    • Per-chart options for legend position and scale/tick visibility.
  • Dataset-level styling
    • Visual differences configured inside each dataset (e.g., radar line color, point visibility, line tension, fill, etc.).

External data loading

  • Data is fetched from the roller coaster API (called via AJAX).
  • A helper like datesCoasters(...):
    • Accepts multiple URLs,
    • Performs multiple requests using promises,
    • Returns a combined result (e.g., [allCoasters, nationalCoasters]).

Interactivity: switching the radar dataset property via dropdown

  • The HTML includes a dropdown list with options that map to properties (the transcript mentions values like length, height, speed).
  • Event handling:
    • An event handler detects the dropdown selection and retrieves:
      • the selected value (property key)
      • the selected text/label
  • When selection changes:
    1. Build newData by mapping national roller coasters to the newly selected numeric property:
      • newData = nationalCoasters.map(c => c[propertyKey])
    2. Update the radar chart in-place using a helper function (e.g., updateChart(...)):
      • Locate the chart by its id/leader.
      • Replace chart.data.datasets[0].data and update chart.data.datasets[0].label.
      • Call chart.update() to redraw.

Result: the radar chart transitions between properties (e.g., from “height” to “length” or “speed”) without recreating the whole chart.

Key “guide/tutorial” takeaways

  • Start from empty chart instances to understand Chart.js basics.
  • Emphasize that data shaping usually takes more effort than chart rendering.
  • Use global defaults to keep styling consistent across multiple charts.
  • Reuse helper functions for:
    • colors/palettes (data colors(...) with opacity support),
    • API fetching (promise-based multi-URL loader),
    • chart updating (in-place update + redraw).
  • Implement interactivity by updating dataset values and labels, then calling chart.update().

Main speakers / sources

  • Speaker: Germán Álvarez
  • Source library: Chart.js (version 3.70 mentioned)
  • Data source: Roller coaster API / external roller coaster data endpoints (loaded via AJAX/promises)

Original video