How to use Timelines-chart
First, go to Github and download repository/source codes.
https://github.com/vasturiano/timelines-chart
Second, you will see sample codes in the downloaded files. Choose one of the sample programs you want to try. I chose “show-time-marker”.
Then, it is time to modify the code.
In the sample source, you will see “getRandomData(true) which is a function to generate random data to be shown in the timelines-chart just because this is a sample data.
In order to show your original data, you will have to modify this portion.
const myData = getRandomData(true);
I created timechart with data of very famous physicians’ and chemists’ birthday and data of pass-away as sample.
I somehow figured out how to call out the birthday & death in the code by referring Data Syntax shown in Github.
Here is a whole code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Responsive history timeline</title>
<script src='https://unpkg.com/timelines-chart'></script>
<!--https://github.com/vasturiano/timelines-chart-->
</head>
<body>
<script>
// const myData = getRandomData(true); //this is the original code in sample file
const myData = ([
{
group: "Germany",
data: [
{
label: "1",
data: [
{
timeRange: ["1879-3-14", "1955-4-18"],
val: "Albert Einstein"
}
]
},
{
label: "2",
data: [
{
timeRange: ["1845-3-27", "1923-2-10"],
val: "Wilhelm Conrad Röntgen"
}
]
},
{
label: "3",
data: [
{
timeRange: ["1868-9-9", "1934-1-29"],
val: "Fritz Haber"
}
]
},
{
label: "4",
data: [
{
timeRange: ["1862-6-7", "1947-5-20"],
val: "Philipp Eduard Anton von Lenard"
}
]
},
{
label: "5",
data: [
{
timeRange: ["1874-4-15", "1957-6-21"],
val: "Johannes Stark"
}
]
},
{
label: "6",
data: [
{
timeRange: ["1879-3-8", "1968-7-28"],
val: "Otto Hahn"
}
]
},
{
label: "7",
data: [
{
timeRange: ["1901-12-5", "1976-2-1"],
val: "Werner Karl Heisenberg"
}
]
},
{
label: "8",
data: [
{
timeRange: ["1879-10-9", "1960-4-24"],
val: "Max Theodor Felix von Laue"
}
]
},
{
label: "9",
data: [
{
timeRange: ["1887-8-12", "1961-1-4"],
val: "Erwin Rudolf Josef Alexander Schrödinger"
}
]
},
],
},
{
group: "Japan",
data: [
{
label: "1",
data:[
{
timeRange: ["1907-1-23", "1981-9-8"],
val: "Hideki Yukawa"
}
]
},
{
label: "2",
data:[
{
timeRange: ["1925-3-12", "2024-12-17"],
val: "Leo Esaki"
}
]
},
{
label: "3",
data:[
{
timeRange: ["1906-3-31", "1979-7-8"],
val: "Shinichiro Tomonaga"
}
]
},
{
label: "4",
data:[
{
timeRange: ["1918-10-4", "1998-1-9"],
val: "Keninichi Fukui",
}
]
},
]
},
{
group: "Denmark",
data: [
{
label: "1",
data:[
{
timeRange: ["1885-10-7", "1962-11-18"],
val: "Niels Bohr"
}
]
},
],
},
{
group: "England",
data: [
{
label: "1",
data:[
{
timeRange: ["1902-8-8", "1984-10-20"],
val: "Paul Adrien Maurice Dirac"
}
]
},
]
},
]
)
new TimelinesChart(document.body)
.zScaleLabel('')
.zQualitative(true)
.dateMarker(new Date() - 365 * 24 * 60 * 60 * 1000) // Add a marker 1y ago
.data(myData);
</script>
</body>
</html>
コメント