<!doctype html>
<html class="zc-html">
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
<style>
.zc-body {
background: #fff;
}
.chart--container {
height: 100%;
width: 100%;
min-height: 530px;
}
.zc-ref {
display: none;
}
</style>
</head>
<body class="zc-body">
<div id="myChart" class="chart--container">
<a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
</div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
let data = [
[1817, 39.5, 27],
[1818, 39.5, 27.1],
[1819, 41.5, 27.9],
[1820, 39.9, 24.4],
[1821, 40.8, 22.9],
[1822, 39.7, 24.6],
[1823, 38.8, 24.5],
[1824, 38.6, 24.2],
[1825, 39.1, 24.5],
[1826, 38.9, 26.1],
[1827, 36.1, 26.4],
[1828, 36.1, 26.6],
[1829, 35.3, 27.8],
[1830, 35.5, 27.4],
[1831, 35, 30.4],
[1832, 34.1, 28.9],
[1833, 36.7, 28.5],
[1834, 37.6, 29.4],
[1835, 36.4, 26.2],
[1836, 36.7, 25.9],
[1837, 36.3, 29.1],
[1838, 36.3, 26],
[1839, 36.4, 27.2],
[1840, 36.4, 26.5],
[1841, 36.4, 26.2],
[1842, 37.6, 27.1],
[1843, 36, 26.9],
[1844, 35.9, 24.5],
[1845, 37.3, 25.3],
[1846, 36, 27.1],
[1847, 33.3, 28.3],
[1848, 33.3, 29],
[1849, 38.1, 27.1],
[1850, 37.2, 25.6],
[1851, 36.7, 25],
[1852, 35.5, 28.4],
[1853, 34.6, 27.2],
[1854, 34, 27],
[1855, 32.2, 28.1],
[1856, 33.5, 25.2],
[1857, 36, 27.2],
[1858, 36.8, 26.8],
[1859, 37.5, 25.7],
[1860, 36.3, 23.2],
[1861, 35.7, 25.6],
[1862, 35.4, 24.6],
[1863, 37.5, 25.7],
[1864, 37.8, 26.2],
[1865, 37.6, 27.6],
[1866, 37.8, 30.6],
[1867, 36.8, 26.1],
[1868, 36.8, 27.6],
[1869, 37.8, 26.9],
[1870, 38.5, 27.4],
[1871, 34.5, 24.6],
[1872, 39.5, 29],
[1873, 39.7, 28.3],
[1874, 40.1, 26.7],
[1875, 40.6, 27.6],
[1876, 40.9, 26.3],
[1877, 40, 26.4],
[1878, 38.9, 26.2],
[1879, 38.9, 25.6],
[1880, 37.6, 26],
[1881, 37, 25.5],
[1882, 37.2, 25.7],
[1883, 36.6, 25.9],
[1884, 37.2, 26],
[1885, 37, 25.7],
[1886, 37.1, 26.2],
[1887, 36.9, 24.2],
[1888, 36.6, 23.7],
[1889, 36.4, 23.7],
[1890, 35.7, 24.4],
[1891, 37, 23.4],
[1892, 35.7, 24.1],
[1893, 36.8, 24.6],
[1894, 35.9, 22.3],
[1895, 36.1, 22.1],
[1896, 36.3, 20.8],
[1897, 36.1, 21.3],
[1898, 36.1, 20.5],
[1899, 35.9, 21.5],
[1900, 35.6, 22.1],
[1901, 35.7, 20.7],
[1902, 35.1, 19.4],
[1903, 33.8, 20],
[1904, 34, 19.6],
[1905, 33, 19.8],
[1906, 33.1, 18.2],
[1907, 32.3, 18],
[1908, 32.1, 18.1],
[1909, 31, 17.2],
[1910, 29.8, 16.2],
[1911, 28.6, 17.3],
[1912, 28.3, 15.6],
[1913, 27.5, 15],
[1914, 26.8, 19],
[1915, 20.4, 21.4],
[1916, 15.2, 19.2],
[1917, 13.9, 20.6],
[1918, 14.3, 24.8],
[1919, 20, 15.6],
[1920, 25.9, 15.1],
[1921, 25.3, 13.9],
[1922, 23, 14.4],
[1923, 21.1, 13.9],
[1924, 20.5, 12.3],
[1925, 20.7, 11.9],
[1926, 19.5, 11.7],
[1927, 18.4, 12],
[1928, 18.6, 11.6],
[1929, 17.9, 12.6],
[1930, 17.5, 11.1],
[1931, 16, 11.2],
[1932, 15.1, 10.8],
[1933, 14.7, 11.2],
[1934, 18, 10.9],
[1935, 18.9, 11.8],
[1936, 19, 11.8],
[1937, 18.8, 11.7],
[1938, 19.6, 11.6],
[1939, 20.4, 12.3],
[1940, 20, 12.7],
[1941, 18.6, 12],
[1942, 14.9, 12],
[1943, 16, 12.1],
[1946, 16.1, 13],
[1947, 16.4, 12.1],
[1948, 16.5, 10.5],
[1949, 16.8, 10.4],
[1950, 16.3, 10.6],
[1951, 15.7, 10.8],
[1952, 15.7, 10.7],
[1953, 15.5, 11.3],
[1954, 15.7, 10.7],
[1955, 15.7, 11.1],
[1956, 16.1, 11.3],
[1957, 16.6, 11.5],
[1958, 16.7, 11],
[1959, 17.3, 11],
[1960, 17.5, 11.6],
[1961, 18, 11.2],
[1962, 17.9, 11.3],
[1963, 18.4, 11.7],
[1964, 18.4, 11.1],
[1965, 17.8, 11.6],
[1966, 17.8, 11.6],
[1967, 17.2, 11.6],
[1968, 16.3, 12.3],
[1969, 15, 12.4],
[1970, 13.4, 12.1],
[1971, 12.7, 11.9],
[1972, 11.4, 11.9],
[1973, 10.3, 11.8],
[1974, 10.1, 11.7],
[1975, 9.7, 12.1],
[1976, 9.8, 11.9],
[1977, 9.5, 11.5],
[1978, 9.4, 11.8],
[1979, 9.5, 11.6],
[1980, 10.1, 11.6],
[1981, 10.1, 11.7],
[1982, 10.1, 11.6],
[1983, 9.6, 11.7],
[1984, 9.5, 11.3],
[1985, 9.6, 11.5],
[1986, 10.3, 11.5],
[1987, 10.5, 11.3],
[1988, 11.1, 11.3],
[1989, 14.3, 14.7],
[1990, 11.5, 11.7],
[1991, 10.5, 11.5],
[1992, 10.1, 11.1],
[1993, 9.9, 11.1],
[1994, 9.5, 10.9],
[1995, 9.4, 10.9],
[1996, 9.7, 10.8],
[1997, 9.9, 10.5],
[1998, 9.6, 10.4],
[1999, 9.4, 10.3],
[2000, 9.3, 10.2],
[2001, 9, 10.1],
];
let chartConfig = {
type: 'range',
title: {
text: 'Live births and deaths in Germany 1817-2001 (annual values)',
fontSize: '21px',
},
plot: {
alphaArea: 0.5,
aspect: 'spline',
backgroundColor: '#27a826',
hoverState: {
visible: false,
},
lineWidth: '2px',
marker: {
type: 'none',
},
maxLine: {
lineColor: '#27a826',
},
maxNodes: 0,
maxTrackers: 0,
minLine: {
lineColor: '#e3170a',
},
rules: [{
rule: '%node-max-value < %node-min-value',
backgroundColor: '#e3170a',
}, ],
},
plotarea: {
margin: '50 dynamic 40 dynamic',
maskTolerance: [0, 0],
},
scaleX: {
values: '1810:2010:1',
item: {
fontSize: '10px',
},
markers: [{
type: 'area',
range: [1800, 1900],
alpha: 0.2,
backgroundColor: '#FFA400',
valueRange: true,
},
{
type: 'area',
range: [1900, 2000],
alpha: 0.2,
backgroundColor: '#009FFD',
valueRange: true,
},
{
type: 'area',
range: [2000, 2100],
alpha: 0.2,
backgroundColor: '#FFA400',
valueRange: true,
},
],
},
scaleY: {
item: {
fontSize: '11px',
},
label: {
text: 'Number (per 100000 population)',
},
markers: [],
},
crosshairX: {
plotLabel: {
padding: '10 10 10 10',
align: 'center',
fontSize: '13px',
text: '<span style="font-size:33px;font-weight:bold">%scale-key-text</span><br><span style="color:#27a826;font-weight:bold">%node-max-value Live births</span><br>vs<br><span style="color:#e3170a;font-weight:bold">%node-min-value Deaths</span><br><br><span style="font-size:10px;color:#666;">(per 100000 population)</span>',
},
scaleLabel: {
fontSize: '10px',
},
},
source: {
text: 'Original design: http://www.datavisualisation-r.com/areas-between-two-time-series/',
align: 'left',
target: '_blank',
url: 'http://www.datavisualisation-r.com/areas-between-two-time-series/',
},
series: [{
values: [],
}, ],
};
let rMinMin = Number.MAX_VALUE;
let rMaxMax = -Number.MAX_VALUE;
for (let i = 0; i < data.length; i++) {
if (i < 30) {
rMinMin = Math.min(rMinMin, data[i][2]);
rMaxMax = Math.max(rMaxMax, data[i][1]);
}
chartConfig.series[0].values.push([data[i][0],
[data[i][2], data[i][1]]
]);
}
chartConfig.scaleY.markers.push({
type: 'line',
range: [rMaxMax],
lineWidth: '0px',
label: {
offsetX: '50px',
fontSize: '17px',
italic: true,
color: '#27a826',
text: 'Live births',
},
}, {
type: 'line',
range: [rMinMin],
lineWidth: '0px',
label: {
offsetX: '50px',
fontSize: '17px',
italic: true,
color: '#e3170a',
text: 'Deaths',
},
labelAlignment: 'opposite',
});
zingchart.render({
id: 'myChart',
width: '100%',
height: '100%',
data: chartConfig,
});
</script>
</body>
</html>
let data = [
[1817, 39.5, 27],
[1818, 39.5, 27.1],
[1819, 41.5, 27.9],
[1820, 39.9, 24.4],
[1821, 40.8, 22.9],
[1822, 39.7, 24.6],
[1823, 38.8, 24.5],
[1824, 38.6, 24.2],
[1825, 39.1, 24.5],
[1826, 38.9, 26.1],
[1827, 36.1, 26.4],
[1828, 36.1, 26.6],
[1829, 35.3, 27.8],
[1830, 35.5, 27.4],
[1831, 35, 30.4],
[1832, 34.1, 28.9],
[1833, 36.7, 28.5],
[1834, 37.6, 29.4],
[1835, 36.4, 26.2],
[1836, 36.7, 25.9],
[1837, 36.3, 29.1],
[1838, 36.3, 26],
[1839, 36.4, 27.2],
[1840, 36.4, 26.5],
[1841, 36.4, 26.2],
[1842, 37.6, 27.1],
[1843, 36, 26.9],
[1844, 35.9, 24.5],
[1845, 37.3, 25.3],
[1846, 36, 27.1],
[1847, 33.3, 28.3],
[1848, 33.3, 29],
[1849, 38.1, 27.1],
[1850, 37.2, 25.6],
[1851, 36.7, 25],
[1852, 35.5, 28.4],
[1853, 34.6, 27.2],
[1854, 34, 27],
[1855, 32.2, 28.1],
[1856, 33.5, 25.2],
[1857, 36, 27.2],
[1858, 36.8, 26.8],
[1859, 37.5, 25.7],
[1860, 36.3, 23.2],
[1861, 35.7, 25.6],
[1862, 35.4, 24.6],
[1863, 37.5, 25.7],
[1864, 37.8, 26.2],
[1865, 37.6, 27.6],
[1866, 37.8, 30.6],
[1867, 36.8, 26.1],
[1868, 36.8, 27.6],
[1869, 37.8, 26.9],
[1870, 38.5, 27.4],
[1871, 34.5, 24.6],
[1872, 39.5, 29],
[1873, 39.7, 28.3],
[1874, 40.1, 26.7],
[1875, 40.6, 27.6],
[1876, 40.9, 26.3],
[1877, 40, 26.4],
[1878, 38.9, 26.2],
[1879, 38.9, 25.6],
[1880, 37.6, 26],
[1881, 37, 25.5],
[1882, 37.2, 25.7],
[1883, 36.6, 25.9],
[1884, 37.2, 26],
[1885, 37, 25.7],
[1886, 37.1, 26.2],
[1887, 36.9, 24.2],
[1888, 36.6, 23.7],
[1889, 36.4, 23.7],
[1890, 35.7, 24.4],
[1891, 37, 23.4],
[1892, 35.7, 24.1],
[1893, 36.8, 24.6],
[1894, 35.9, 22.3],
[1895, 36.1, 22.1],
[1896, 36.3, 20.8],
[1897, 36.1, 21.3],
[1898, 36.1, 20.5],
[1899, 35.9, 21.5],
[1900, 35.6, 22.1],
[1901, 35.7, 20.7],
[1902, 35.1, 19.4],
[1903, 33.8, 20],
[1904, 34, 19.6],
[1905, 33, 19.8],
[1906, 33.1, 18.2],
[1907, 32.3, 18],
[1908, 32.1, 18.1],
[1909, 31, 17.2],
[1910, 29.8, 16.2],
[1911, 28.6, 17.3],
[1912, 28.3, 15.6],
[1913, 27.5, 15],
[1914, 26.8, 19],
[1915, 20.4, 21.4],
[1916, 15.2, 19.2],
[1917, 13.9, 20.6],
[1918, 14.3, 24.8],
[1919, 20, 15.6],
[1920, 25.9, 15.1],
[1921, 25.3, 13.9],
[1922, 23, 14.4],
[1923, 21.1, 13.9],
[1924, 20.5, 12.3],
[1925, 20.7, 11.9],
[1926, 19.5, 11.7],
[1927, 18.4, 12],
[1928, 18.6, 11.6],
[1929, 17.9, 12.6],
[1930, 17.5, 11.1],
[1931, 16, 11.2],
[1932, 15.1, 10.8],
[1933, 14.7, 11.2],
[1934, 18, 10.9],
[1935, 18.9, 11.8],
[1936, 19, 11.8],
[1937, 18.8, 11.7],
[1938, 19.6, 11.6],
[1939, 20.4, 12.3],
[1940, 20, 12.7],
[1941, 18.6, 12],
[1942, 14.9, 12],
[1943, 16, 12.1],
[1946, 16.1, 13],
[1947, 16.4, 12.1],
[1948, 16.5, 10.5],
[1949, 16.8, 10.4],
[1950, 16.3, 10.6],
[1951, 15.7, 10.8],
[1952, 15.7, 10.7],
[1953, 15.5, 11.3],
[1954, 15.7, 10.7],
[1955, 15.7, 11.1],
[1956, 16.1, 11.3],
[1957, 16.6, 11.5],
[1958, 16.7, 11],
[1959, 17.3, 11],
[1960, 17.5, 11.6],
[1961, 18, 11.2],
[1962, 17.9, 11.3],
[1963, 18.4, 11.7],
[1964, 18.4, 11.1],
[1965, 17.8, 11.6],
[1966, 17.8, 11.6],
[1967, 17.2, 11.6],
[1968, 16.3, 12.3],
[1969, 15, 12.4],
[1970, 13.4, 12.1],
[1971, 12.7, 11.9],
[1972, 11.4, 11.9],
[1973, 10.3, 11.8],
[1974, 10.1, 11.7],
[1975, 9.7, 12.1],
[1976, 9.8, 11.9],
[1977, 9.5, 11.5],
[1978, 9.4, 11.8],
[1979, 9.5, 11.6],
[1980, 10.1, 11.6],
[1981, 10.1, 11.7],
[1982, 10.1, 11.6],
[1983, 9.6, 11.7],
[1984, 9.5, 11.3],
[1985, 9.6, 11.5],
[1986, 10.3, 11.5],
[1987, 10.5, 11.3],
[1988, 11.1, 11.3],
[1989, 14.3, 14.7],
[1990, 11.5, 11.7],
[1991, 10.5, 11.5],
[1992, 10.1, 11.1],
[1993, 9.9, 11.1],
[1994, 9.5, 10.9],
[1995, 9.4, 10.9],
[1996, 9.7, 10.8],
[1997, 9.9, 10.5],
[1998, 9.6, 10.4],
[1999, 9.4, 10.3],
[2000, 9.3, 10.2],
[2001, 9, 10.1],
];
let chartConfig = {
type: 'range',
title: {
text: 'Live births and deaths in Germany 1817-2001 (annual values)',
fontSize: '21px',
},
plot: {
alphaArea: 0.5,
aspect: 'spline',
backgroundColor: '#27a826',
hoverState: {
visible: false,
},
lineWidth: '2px',
marker: {
type: 'none',
},
maxLine: {
lineColor: '#27a826',
},
maxNodes: 0,
maxTrackers: 0,
minLine: {
lineColor: '#e3170a',
},
rules: [
{
rule: '%node-max-value < %node-min-value',
backgroundColor: '#e3170a',
},
],
},
plotarea: {
margin: '50 dynamic 40 dynamic',
maskTolerance: [0, 0],
},
scaleX: {
values: '1810:2010:1',
item: {
fontSize: '10px',
},
markers: [
{
type: 'area',
range: [1800, 1900],
alpha: 0.2,
backgroundColor: '#FFA400',
valueRange: true,
},
{
type: 'area',
range: [1900, 2000],
alpha: 0.2,
backgroundColor: '#009FFD',
valueRange: true,
},
{
type: 'area',
range: [2000, 2100],
alpha: 0.2,
backgroundColor: '#FFA400',
valueRange: true,
},
],
},
scaleY: {
item: {
fontSize: '11px',
},
label: {
text: 'Number (per 100000 population)',
},
markers: [],
},
crosshairX: {
plotLabel: {
padding: '10 10 10 10',
align: 'center',
fontSize: '13px',
text: '<span style="font-size:33px;font-weight:bold">%scale-key-text</span><br><span style="color:#27a826;font-weight:bold">%node-max-value Live births</span><br>vs<br><span style="color:#e3170a;font-weight:bold">%node-min-value Deaths</span><br><br><span style="font-size:10px;color:#666;">(per 100000 population)</span>',
},
scaleLabel: {
fontSize: '10px',
},
},
source: {
text: 'Original design: http://www.datavisualisation-r.com/areas-between-two-time-series/',
align: 'left',
target: '_blank',
url: 'http://www.datavisualisation-r.com/areas-between-two-time-series/',
},
series: [
{
values: [],
},
],
};
let rMinMin = Number.MAX_VALUE;
let rMaxMax = -Number.MAX_VALUE;
for (let i = 0; i < data.length; i++) {
if (i < 30) {
rMinMin = Math.min(rMinMin, data[i][2]);
rMaxMax = Math.max(rMaxMax, data[i][1]);
}
chartConfig.series[0].values.push([data[i][0], [data[i][2], data[i][1]]]);
}
chartConfig.scaleY.markers.push(
{
type: 'line',
range: [rMaxMax],
lineWidth: '0px',
label: {
offsetX: '50px',
fontSize: '17px',
italic: true,
color: '#27a826',
text: 'Live births',
},
},
{
type: 'line',
range: [rMinMin],
lineWidth: '0px',
label: {
offsetX: '50px',
fontSize: '17px',
italic: true,
color: '#e3170a',
text: 'Deaths',
},
labelAlignment: 'opposite',
}
);
zingchart.render({
id: 'myChart',
width: '100%',
height: '100%',
data: chartConfig,
});
