Add the CSS/JS assets from the dygraphs library:
litedown::vest(css = '@npm/dygraphs/dist/dygraph', js = '@npm/dygraphs/dist/dygraph')
Show the yearly sunspots data (with a range selector):
sunspot = cbind(Year = time(sunspot.year), Sunspots = sunspot.year)
const g = new Dygraph(
document.getElementById('graph-sunspot'),
[
[1700, 5],
[1701, 11],
[1702, 16],
[1703, 23],
[1704, 36],
[1705, 58],
[1706, 29],
[1707, 20],
[1708, 10],
[1709, 8],
[1710, 3],
[1711, 0],
[1712, 0],
[1713, 2],
[1714, 11],
[1715, 27],
[1716, 47],
[1717, 63],
[1718, 60],
[1719, 39],
[1720, 28],
[1721, 26],
[1722, 22],
[1723, 11],
[1724, 21],
[1725, 40],
[1726, 78],
[1727, 122],
[1728, 103],
[1729, 73],
[1730, 47],
[1731, 35],
[1732, 11],
[1733, 5],
[1734, 16],
[1735, 34],
[1736, 70],
[1737, 81],
[1738, 111],
[1739, 101],
[1740, 73],
[1741, 40],
[1742, 20],
[1743, 16],
[1744, 5],
[1745, 11],
[1746, 22],
[1747, 40],
[1748, 60],
[1749, 80.9],
[1750, 83.4],
[1751, 47.7],
[1752, 47.8],
[1753, 30.7],
[1754, 12.2],
[1755, 9.6],
[1756, 10.2],
[1757, 32.4],
[1758, 47.6],
[1759, 54],
[1760, 62.9],
[1761, 85.9],
[1762, 61.2],
[1763, 45.1],
[1764, 36.4],
[1765, 20.9],
[1766, 11.4],
[1767, 37.8],
[1768, 69.8],
[1769, 106.1],
[1770, 100.8],
[1771, 81.6],
[1772, 66.5],
[1773, 34.8],
[1774, 30.6],
[1775, 7],
[1776, 19.8],
[1777, 92.5],
[1778, 154.4],
[1779, 125.9],
[1780, 84.8],
[1781, 68.1],
[1782, 38.5],
[1783, 22.8],
[1784, 10.2],
[1785, 24.1],
[1786, 82.9],
[1787, 132],
[1788, 130.9],
[1789, 118.1],
[1790, 89.9],
[1791, 66.6],
[1792, 60],
[1793, 46.9],
[1794, 41],
[1795, 21.3],
[1796, 16],
[1797, 6.4],
[1798, 4.1],
[1799, 6.8],
[1800, 14.5],
[1801, 34],
[1802, 45],
[1803, 43.1],
[1804, 47.5],
[1805, 42.2],
[1806, 28.1],
[1807, 10.1],
[1808, 8.1],
[1809, 2.5],
[1810, 0],
[1811, 1.4],
[1812, 5],
[1813, 12.2],
[1814, 13.9],
[1815, 35.4],
[1816, 45.8],
[1817, 41.1],
[1818, 30.1],
[1819, 23.9],
[1820, 15.6],
[1821, 6.6],
[1822, 4],
[1823, 1.8],
[1824, 8.5],
[1825, 16.6],
[1826, 36.3],
[1827, 49.6],
[1828, 64.2],
[1829, 67],
[1830, 70.9],
[1831, 47.8],
[1832, 27.5],
[1833, 8.5],
[1834, 13.2],
[1835, 56.9],
[1836, 121.5],
[1837, 138.3],
[1838, 103.2],
[1839, 85.7],
[1840, 64.6],
[1841, 36.7],
[1842, 24.2],
[1843, 10.7],
[1844, 15],
[1845, 40.1],
[1846, 61.5],
[1847, 98.5],
[1848, 124.7],
[1849, 96.3],
[1850, 66.6],
[1851, 64.5],
[1852, 54.1],
[1853, 39],
[1854, 20.6],
[1855, 6.7],
[1856, 4.3],
[1857, 22.7],
[1858, 54.8],
[1859, 93.8],
[1860, 95.8],
[1861, 77.2],
[1862, 59.1],
[1863, 44],
[1864, 47],
[1865, 30.5],
[1866, 16.3],
[1867, 7.3],
[1868, 37.6],
[1869, 74],
[1870, 139],
[1871, 111.2],
[1872, 101.6],
[1873, 66.2],
[1874, 44.7],
[1875, 17],
[1876, 11.3],
[1877, 12.4],
[1878, 3.4],
[1879, 6],
[1880, 32.3],
[1881, 54.3],
[1882, 59.7],
[1883, 63.7],
[1884, 63.5],
[1885, 52.2],
[1886, 25.4],
[1887, 13.1],
[1888, 6.8],
[1889, 6.3],
[1890, 7.1],
[1891, 35.6],
[1892, 73],
[1893, 85.1],
[1894, 78],
[1895, 64],
[1896, 41.8],
[1897, 26.2],
[1898, 26.7],
[1899, 12.1],
[1900, 9.5],
[1901, 2.7],
[1902, 5],
[1903, 24.4],
[1904, 42],
[1905, 63.5],
[1906, 53.8],
[1907, 62],
[1908, 48.5],
[1909, 43.9],
[1910, 18.6],
[1911, 5.7],
[1912, 3.6],
[1913, 1.4],
[1914, 9.6],
[1915, 47.4],
[1916, 57.1],
[1917, 103.9],
[1918, 80.6],
[1919, 63.6],
[1920, 37.6],
[1921, 26.1],
[1922, 14.2],
[1923, 5.8],
[1924, 16.7],
[1925, 44.3],
[1926, 63.9],
[1927, 69],
[1928, 77.8],
[1929, 64.9],
[1930, 35.7],
[1931, 21.2],
[1932, 11.1],
[1933, 5.7],
[1934, 8.7],
[1935, 36.1],
[1936, 79.7],
[1937, 114.4],
[1938, 109.6],
[1939, 88.8],
[1940, 67.8],
[1941, 47.5],
[1942, 30.6],
[1943, 16.3],
[1944, 9.6],
[1945, 33.2],
[1946, 92.6],
[1947, 151.6],
[1948, 136.3],
[1949, 134.7],
[1950, 83.9],
[1951, 69.4],
[1952, 31.5],
[1953, 13.9],
[1954, 4.4],
[1955, 38],
[1956, 141.7],
[1957, 190.2],
[1958, 184.8],
[1959, 159],
[1960, 112.3],
[1961, 53.9],
[1962, 37.5],
[1963, 27.9],
[1964, 10.2],
[1965, 15.1],
[1966, 47],
[1967, 93.8],
[1968, 105.9],
[1969, 105.5],
[1970, 104.5],
[1971, 66.6],
[1972, 68.9],
[1973, 38],
[1974, 34.5],
[1975, 15.5],
[1976, 12.6],
[1977, 27.5],
[1978, 92.5],
[1979, 155.4],
[1980, 154.7],
[1981, 140.5],
[1982, 115.9],
[1983, 66.6],
[1984, 45.9],
[1985, 17.9],
[1986, 13.4],
[1987, 29.2],
[1988, 100.2]
],
{
labels: ["Year", "Sunspots"],
showRangeSelector: true
}
);
// annotate the maximum
g.ready(() => g.setAnnotations([
{
series: "Sunspots",
x: 1957,
shortText: "M",
text: "Maximum number"
}
]));
Show two time series:
deaths = cbind(Time = round(time(mdeaths), 2), Male = mdeaths, Female = fdeaths)
new Dygraph(
document.getElementById('graph-deaths'),
[
[1974, 2134, 901],
[1974.08, 1863, 689],
[1974.17, 1877, 827],
[1974.25, 1877, 677],
[1974.33, 1492, 522],
[1974.42, 1249, 406],
[1974.5, 1280, 441],
[1974.58, 1131, 393],
[1974.67, 1209, 387],
[1974.75, 1492, 582],
[1974.83, 1621, 578],
[1974.92, 1846, 666],
[1975, 2103, 830],
[1975.08, 2137, 752],
[1975.17, 2153, 785],
[1975.25, 1833, 664],
[1975.33, 1403, 467],
[1975.42, 1288, 438],
[1975.5, 1186, 421],
[1975.58, 1133, 412],
[1975.67, 1053, 343],
[1975.75, 1347, 440],
[1975.83, 1545, 531],
[1975.92, 2066, 771],
[1976, 2020, 767],
[1976.08, 2750, 1141],
[1976.17, 2283, 896],
[1976.25, 1479, 532],
[1976.33, 1189, 447],
[1976.42, 1160, 420],
[1976.5, 1113, 376],
[1976.58, 970, 330],
[1976.67, 999, 357],
[1976.75, 1208, 445],
[1976.83, 1467, 546],
[1976.92, 2059, 764],
[1977, 2240, 862],
[1977.08, 1634, 660],
[1977.17, 1722, 663],
[1977.25, 1801, 643],
[1977.33, 1246, 502],
[1977.42, 1162, 392],
[1977.5, 1087, 411],
[1977.58, 1013, 348],
[1977.67, 959, 387],
[1977.75, 1179, 385],
[1977.83, 1229, 411],
[1977.92, 1655, 638],
[1978, 2019, 796],
[1978.08, 2284, 853],
[1978.17, 1942, 737],
[1978.25, 1423, 546],
[1978.33, 1340, 530],
[1978.42, 1187, 446],
[1978.5, 1098, 431],
[1978.58, 1004, 362],
[1978.67, 970, 387],
[1978.75, 1140, 430],
[1978.83, 1110, 425],
[1978.92, 1812, 679],
[1979, 2263, 821],
[1979.08, 1820, 785],
[1979.17, 1846, 727],
[1979.25, 1531, 612],
[1979.33, 1215, 478],
[1979.42, 1075, 429],
[1979.5, 1056, 405],
[1979.58, 975, 379],
[1979.67, 940, 393],
[1979.75, 1081, 411],
[1979.83, 1294, 487],
[1979.92, 1341, 574]
],
{
labels: ["Time", "Male", "Female"]
}
);