Skip to content

Commit 0ca763b

Browse files
rakannimerrakannimer
committed
chore(docs): timeline quick example
1 parent 2901333 commit 0ca763b

File tree

1 file changed

+100
-57
lines changed

1 file changed

+100
-57
lines changed

‎website/docs/examples/timeline.mdx‎

Lines changed: 100 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -4,27 +4,70 @@ tags:
44
- Timeline
55
---
66

7-
import ContextProvider from '../../src/components/ContextProvider';
7+
import ContextProvider from "../../src/components/ContextProvider";
88

99
# Timeline
1010

11+
A timeline is a chart that depicts how a set of resources are used over time. If you're managing a software project and want to illustrate who is doing what and when, or if you're organizing a conference and need to schedule meeting rooms, a timeline is often a reasonable visualization choice. One popular type of timeline is the Gantt chart.
12+
13+
## Usage
14+
15+
### Install the package
16+
17+
```sh
18+
npm i react-google-charts
19+
```
20+
21+
### Create your chart
22+
23+
```jsx
24+
return (
25+
<Chart
26+
chartType="Timeline"
27+
data={[
28+
[
29+
"President",
30+
"George Washington",
31+
new Date(1789, 3, 30),
32+
new Date(1797, 2, 4),
33+
],
34+
["President", "John Adams", new Date(1797, 2, 4), new Date(1801, 2, 4)],
35+
[
36+
"President",
37+
"Thomas Jefferson",
38+
new Date(1801, 2, 4),
39+
new Date(1809, 2, 4),
40+
],
41+
[
42+
"Vice President",
43+
"John Adams",
44+
new Date(1789, 3, 21),
45+
new Date(1797, 2, 4),
46+
],
47+
]}
48+
width="100%"
49+
height="400px"
50+
/>
51+
);
52+
```
53+
1154
## Simple Example
1255

1356
<ContextProvider>
1457
{({ branch, theme }) => (
1558
<iframe
1659
src={`https://codesandbox.io/embed/github/RakanNimer/react-google-charts/tree/${branch}/sandboxes/timeline/default?fontsize=14&hidenavigation=1&module=%2FApp.tsx&theme=${theme}`}
1760
style={{
18-
width: '100%',
19-
height: '500px',
61+
width: "100%",
62+
height: "500px",
2063
border: 0,
21-
borderRadius: '4px',
22-
overflow: 'hidden',
64+
borderRadius: "4px",
65+
overflow: "hidden",
2366
}}
24-
title='RakanNimer/react-google-charts: Timeline Simple Example'
25-
allow='accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking'
26-
sandbox='allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts'
27-
loading='lazy'
67+
title="RakanNimer/react-google-charts: Timeline Simple Example"
68+
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
69+
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
70+
loading="lazy"
2871
></iframe>
2972
)}
3073
</ContextProvider>
@@ -36,16 +79,16 @@ import ContextProvider from '../../src/components/ContextProvider';
3679
<iframe
3780
src={`https://codesandbox.io/embed/github/RakanNimer/react-google-charts/tree/${branch}/sandboxes/timeline/advanced?fontsize=14&hidenavigation=1&module=%2FApp.tsx&theme=${theme}`}
3881
style={{
39-
width: '100%',
40-
height: '500px',
82+
width: "100%",
83+
height: "500px",
4184
border: 0,
42-
borderRadius: '4px',
43-
overflow: 'hidden',
85+
borderRadius: "4px",
86+
overflow: "hidden",
4487
}}
45-
title='RakanNimer/react-google-charts: Timeline An Advanced Example'
46-
allow='accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking'
47-
sandbox='allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts'
48-
loading='lazy'
88+
title="RakanNimer/react-google-charts: Timeline An Advanced Example"
89+
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
90+
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
91+
loading="lazy"
4992
></iframe>
5093
)}
5194
</ContextProvider>
@@ -57,16 +100,16 @@ import ContextProvider from '../../src/components/ContextProvider';
57100
<iframe
58101
src={`https://codesandbox.io/embed/github/RakanNimer/react-google-charts/tree/${branch}/sandboxes/timeline/colors?fontsize=14&hidenavigation=1&module=%2FApp.tsx&theme=${theme}`}
59102
style={{
60-
width: '100%',
61-
height: '500px',
103+
width: "100%",
104+
height: "500px",
62105
border: 0,
63-
borderRadius: '4px',
64-
overflow: 'hidden',
106+
borderRadius: "4px",
107+
overflow: "hidden",
65108
}}
66-
title='RakanNimer/react-google-charts: Timeline Controlling The Colors'
67-
allow='accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking'
68-
sandbox='allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts'
69-
loading='lazy'
109+
title="RakanNimer/react-google-charts: Timeline Controlling The Colors"
110+
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
111+
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
112+
loading="lazy"
70113
></iframe>
71114
)}
72115
</ContextProvider>
@@ -78,16 +121,16 @@ import ContextProvider from '../../src/components/ContextProvider';
78121
<iframe
79122
src={`https://codesandbox.io/embed/github/RakanNimer/react-google-charts/tree/${branch}/sandboxes/timeline/gridlines?fontsize=14&hidenavigation=1&module=%2FApp.tsx&theme=${theme}`}
80123
style={{
81-
width: '100%',
82-
height: '500px',
124+
width: "100%",
125+
height: "500px",
83126
border: 0,
84-
borderRadius: '4px',
85-
overflow: 'hidden',
127+
borderRadius: "4px",
128+
overflow: "hidden",
86129
}}
87-
title='RakanNimer/react-google-charts: Timeline Overlapping GridLines'
88-
allow='accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking'
89-
sandbox='allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts'
90-
loading='lazy'
130+
title="RakanNimer/react-google-charts: Timeline Overlapping GridLines"
131+
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
132+
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
133+
loading="lazy"
91134
></iframe>
92135
)}
93136
</ContextProvider>
@@ -99,16 +142,16 @@ import ContextProvider from '../../src/components/ContextProvider';
99142
<iframe
100143
src={`https://codesandbox.io/embed/github/RakanNimer/react-google-charts/tree/${branch}/sandboxes/timeline/labels?fontsize=14&hidenavigation=1&module=%2FApp.tsx&theme=${theme}`}
101144
style={{
102-
width: '100%',
103-
height: '500px',
145+
width: "100%",
146+
height: "500px",
104147
border: 0,
105-
borderRadius: '4px',
106-
overflow: 'hidden',
148+
borderRadius: "4px",
149+
overflow: "hidden",
107150
}}
108-
title='RakanNimer/react-google-charts: Timeline Labeling the bars'
109-
allow='accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking'
110-
sandbox='allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts'
111-
loading='lazy'
151+
title="RakanNimer/react-google-charts: Timeline Labeling the bars"
152+
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
153+
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
154+
loading="lazy"
112155
></iframe>
113156
)}
114157
</ContextProvider>
@@ -120,16 +163,16 @@ import ContextProvider from '../../src/components/ContextProvider';
120163
<iframe
121164
src={`https://codesandbox.io/embed/github/RakanNimer/react-google-charts/tree/${branch}/sandboxes/timeline/row?fontsize=14&hidenavigation=1&module=%2FApp.tsx&theme=${theme}`}
122165
style={{
123-
width: '100%',
124-
height: '500px',
166+
width: "100%",
167+
height: "500px",
125168
border: 0,
126-
borderRadius: '4px',
127-
overflow: 'hidden',
169+
borderRadius: "4px",
170+
overflow: "hidden",
128171
}}
129-
title='RakanNimer/react-google-charts: Timeline Putting bars on one row'
130-
allow='accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking'
131-
sandbox='allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts'
132-
loading='lazy'
172+
title="RakanNimer/react-google-charts: Timeline Putting bars on one row"
173+
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
174+
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
175+
loading="lazy"
133176
></iframe>
134177
)}
135178
</ContextProvider>
@@ -141,16 +184,16 @@ import ContextProvider from '../../src/components/ContextProvider';
141184
<iframe
142185
src={`https://codesandbox.io/embed/github/RakanNimer/react-google-charts/tree/${branch}/sandboxes/timeline/tooltips?fontsize=14&hidenavigation=1&module=%2FApp.tsx&theme=${theme}`}
143186
style={{
144-
width: '100%',
145-
height: '500px',
187+
width: "100%",
188+
height: "500px",
146189
border: 0,
147-
borderRadius: '4px',
148-
overflow: 'hidden',
190+
borderRadius: "4px",
191+
overflow: "hidden",
149192
}}
150-
title='RakanNimer/react-google-charts: Timeline Customizing Tooltips'
151-
allow='accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking'
152-
sandbox='allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts'
153-
loading='lazy'
193+
title="RakanNimer/react-google-charts: Timeline Customizing Tooltips"
194+
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
195+
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
196+
loading="lazy"
154197
></iframe>
155198
)}
156199
</ContextProvider>

0 commit comments

Comments
 (0)