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>
コメント