HTML Charts
HTML Charts / Time Series Trio
Free Chart.js chart for HTML containers

Time Series Trio

Three metrics, each on its own row: a scorecard for the latest 7/28/90 days or months against the period before, next to a chart of all the data over time.

v1.1.0Live demo · random data1–3 metrics0 dimensionsneeds a dateOver timeKPIs
Live demo – the chart is reading the random grid underneath, exactly as it reads a real one
Demo grid · … rows of random valuesIn use this is your grid, tucked behind the chart

When to use it

Use it when a few metrics each deserve their own row: a scorecard for the latest 7, 28 or 90 days next to the full history.

Questions it answers

How to use it

  1. On your dashboard page, add a grid with the columns below (or map your own header names – see below). Keep it on the same page – tuck it behind the chart rather than hiding it, and make it tall.
  2. Add an HTML container (one that runs JavaScript) and paste the snippet.
  3. View the page. The chart finds the grid, reads every row and draws itself; it updates when filters change the grid.
Default headerKeyWhat it's for
DatedateRequiredA daily date (2026-10-23, 23/10/2026, 23 Oct 2026) or a month key (202610). Several rows on a date are added together.
Metric 1v1RequiredAny metric – $, % or a count, read from the grid's formatting.
Metric 2v2OptionalSecond row.
Metric 3v3OptionalThird row.
Snippet for the HTML container
<div data-chart-embed="time-series-trio" style="height:100%"></div>
<script>
(function () {
  var s = document.createElement("script");
  s.src = "https://viz.kaijxnes.com/charts/time-series-trio-1.1.0.js";
  s.integrity = "sha384-F2pDVH7opAMJfPa3jfIzMuP8jLXHCiAQONDIo4mvAXK6GnmXvJypmeGdOX0Hhofb";
  s.crossOrigin = "anonymous";
  document.head.appendChild(s);
})();
</script>
Script URL
https://viz.kaijxnes.com/charts/time-series-trio-1.1.0.js
Integrity (SRI)
sha384-F2pDVH7opAMJfPa3jfIzMuP8jLXHCiAQONDIo4mvAXK6GnmXvJypmeGdOX0Hhofb
Chart.js
https://viz.kaijxnes.com/chart.umd-4.4.1.js · sha384-dug+JxfBvklEQdJ4AYuBBAIScUz0bVN73xpy273gcAwHjb3qI0fXmuYNaNfdyYJG
The integrity value pins this exact version: the browser refuses to run the script if a single byte changes. New versions get a new file name and a new snippet, so a dashboard only changes when you paste the new snippet.

Your own column names

The chart looks for the default headers above. If your grid's headers are different, map them by key with data-columns on the placeholder – the chart then shows your names too. data-labels (same keys) changes just the on-screen names, and data-title changes the heading. For grids that draw rows in batches, data-grid-class and data-scroll-class name the grid's container and its scroll box so every row is read.

Example
<div data-chart-embed="time-series-trio" data-columns='{"month":"Your Month Header","v3":"Your Metric Header"}' data-title="Your title" style="height:100%"></div>
<script>
(function () {
  var s = document.createElement("script");
  s.src = "https://viz.kaijxnes.com/charts/time-series-trio-1.1.0.js";
  s.integrity = "sha384-F2pDVH7opAMJfPa3jfIzMuP8jLXHCiAQONDIo4mvAXK6GnmXvJypmeGdOX0Hhofb";
  s.crossOrigin = "anonymous";
  document.head.appendChild(s);
})();
</script>

What it does

Data & security

Other versions

Time Series Trio1–3 metrics · 0 dimensions · dateTime Series – 1 metric1 metric · 0 dimensions · dateTime Series – 2 metrics2 metrics · 0 dimensions · dateTime Series Stack1–6 metrics · 0 dimensions · date

More charts

Monthly BarsBar + line, Metric toggle, AveragesStacked SegmentsStacked bars, Segments, Filters, Large gridsSegment BreakdownStacked bars, Segments, Large gridsCost vs ReturnKPIs, ROI, Cost per unitMonth HeatmapHeatmap, Curves, Large gridsKPI ScorecardKPI cards, Sparklines, ComparisonsFunnelFunnel, Conversion, SegmentsChange BridgeWaterfall, Variance, DriversParetoRanking, 80/20, CumulativeTarget PacingTargets, Projection, DailyQuadrant ScatterScatter, Bubbles, QuadrantsMix ShiftShare, 100% stacked, TrendsCalendar HeatmapCalendar, Daily, Weekday patternsYear over YearYoY, Year to date, SeasonalityLeaderboardRanking, Table, SparklinesDistributionHistogram, Percentiles, GroupsTarget AttainmentTargets, Bullet bars, RankingAnomaly WatchAnomalies, Rolling average, AlertsTreemapTreemap, Hierarchy, ShareSmall MultiplesSmall multiples, Trends, SegmentsVariance TableTable, Variance, Month vs monthGaugesGauges, Targets, KPIsCombo ChartBar + line, Dual axis, Time seriesFlow (Sankey)Sankey, Flows, Two dimensionsBox PlotBox plot, Spread, GroupsRadar CompareRadar, Profiles, Many metricsBump ChartRanks, Over time, MoversIndexed GrowthGrowth, Index, Over timeDumbbellBefore / after, Change, RankingCorrelation MatrixCorrelation, Many metrics, ScatterTime Series StackTime series, Scorecards, Up to 6 metricsTime Series – 1 metricTime series, Scorecard, 1 metricTime Series – 2 metricsTime series, Scorecards, 2 metricsKPI Scorecard – 3 metricsKPI cards, Sparklines, 3 metricsCombo Chart – bar + lineBar + line, Dual axis, 2 metricsVariance Table – 1 metricTable, Variance, 1 metricFunnel – no segmentsFunnel, Conversion, 0 dimensionsTreemap – one levelTreemap, Share, 1 dimensionQuadrant Scatter – 2 metricsScatter, Quadrants, 2 metricsRadar Compare – 4 metricsRadar, Profiles, 4 metrics
Made by – data analyst building custom visuals for reporting. See my CV