Data compression
The data
option of a series supports three basic ways of providing data. However, Highcharts requires x
values on a datetime axis to be given in JavaScript timestamps, which are milliseconds since 1970-01-01.
For a large time based dataset, passing individual x
values over the network may represent a substantial amount of traffic. For example, a dataset with hourly values over a year (24 * 365 = 8760 x/y pairs), weighs 158 kB on the file system. It should be noted though that gzipping would chip off most of the repetitive parts of the timestamp in a typical web setup.
data: [[1577836800000,1],[1577840400000,1],[1577844000000,1],[1577847600000,1],[1577851200000,1],[1577854800000,1],...]
Regular data
For regularly spaced data points, we don't need the X values at all. All we need to provide is the pointStart and pointInterval options, and the X values will be computed from there. Supplemented with a pointIntervalUnit, the X data will also handle the irregular time intervals that emerge in a local timezone when crossing over the Daylight Saving Time boundaries. Our data set is now down to 18 kB.
data: [1, 1, 1, 1, 1, 1, ...]pointStart: 1577836800000, // Date.UTC(2020, 0, 1)pointInterval: 36e5, // one hour
Irregular data
But those simplified settings won't work when the X values are irregular. Since v9.1.2, the relativeXValue option is available. This allows us to redefine what the x
value means, so that it is first multiplied by pointInterval
(and respecting pointIntervalUnit
), then pointStart
is added to it. As a result, we can compress any X values by the f(x) = ax + b
formula where a
= pointInterval
and b
= pointStart
. Non-datetime X values can also be compressed this way. Our data set is now 78 kB, but can express irregularly spaced X values.
data: [[0,1],[1,1],[2,1],[3,1],[4,1],[5,1],...],pointStart: 1577836800000, // Date.UTC(2020, 0, 1)pointInterval: 36e5, // one hourrelativeXValue: true