Skip to content

Commit 1d3c949

Browse files
lee-treehouselee-treehouse
committed
improve example cases to highlight incongruity
1 parent 59ffe6a commit 1d3c949

File tree

1 file changed

+135
-132
lines changed

1 file changed

+135
-132
lines changed

‎demos/xychart.html‎

Lines changed: 135 additions & 132 deletions
Original file line numberDiff line numberDiff line change
@@ -17,187 +17,184 @@
1717
<h1>XY Charts demos</h1>
1818

1919
<pre class="mermaid">
20-
---
21-
config:
22-
xyChart:
23-
width: 600
24-
height: 450
25-
showDataLabel: true
26-
chartOrientation: horizontal
27-
showDataLabelOutsideBar: true
28-
---
29-
xychart-beta
30-
title "showDataLabelOutsideBar: true"
31-
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
32-
y-axis "Revenue (in $)" 4000 --> 11000
33-
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
34-
</pre>
35-
36-
<pre class="mermaid">
37-
---
38-
config:
39-
xyChart:
40-
width: 600
41-
height: 450
42-
showDataLabel: true
43-
chartOrientation: horizontal
44-
showDataLabelOutsideBar: false
45-
---
46-
xychart-beta
47-
title "showDataLabelOutsideBar: false (current default)"
48-
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
49-
y-axis "Revenue (in $)" 4000 --> 11000
50-
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
20+
xychart
21+
title "Sales Revenue (in $)"
22+
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
23+
y-axis "Revenue (in $)" 4000 --> 11000
24+
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
25+
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
5126
</pre>
5227

28+
<hr />
29+
<h1>XY Charts horizontal</h1>
5330
<pre class="mermaid">
54-
---
55-
config:
56-
xyChart:
57-
width: 600
58-
height: 400
59-
showDataLabel: true
60-
showDataLabelOutsideBar: true
61-
---
62-
63-
xychart
64-
title "showDataLabelOutsideBar: true"
65-
x-axis "this is x axis" [category1, "category 2"]
66-
y-axis yaxisText 0 --> 70
67-
bar "sample bar" [52, 10]
31+
xychart horizontal
32+
title "Basic xychart"
33+
x-axis "this is x axis" [category1, "category 2", category3, category4]
34+
y-axis yaxisText 10 --> 150
35+
bar "sample bat" [52, 96, 35, 10]
36+
line [23, 46, 75, 43]
6837
</pre>
69-
38+
<hr />
39+
<h1>XY Charts only lines and bar</h1>
7040
<pre class="mermaid">
71-
---
72-
config:
73-
xyChart:
74-
width: 600
75-
height: 400
76-
showDataLabel: true
77-
showDataLabelOutsideBar: true
78-
---
79-
80-
xychart
81-
title "showDataLabelOutsideBar: true"
82-
x-axis "this is x axis" [category1, "category 2"]
83-
y-axis yaxisText 0 --> 0.070
84-
bar "sample bar" [0.052, 0.010]
41+
xychart
42+
line [23, 46, 77, 34]
43+
line [45, 32, 33, 12]
44+
line [87, 54, 99, 85]
45+
line [78, 88, 22, 4]
46+
line [22, 29, 75, 33]
47+
bar [52, 96, 35, 10]
8548
</pre>
8649

50+
<hr />
51+
<h1>XY Charts with +ve and -ve numbers</h1>
8752
<pre class="mermaid">
88-
---
89-
config:
90-
xyChart:
91-
width: 600
92-
height: 400
93-
showDataLabel: true
94-
showDataLabelOutsideBar: true
95-
---
96-
97-
xychart
98-
title "showDataLabelOutsideBar: true"
99-
x-axis "this is x axis" [category1, "category 2"]
100-
y-axis yaxisText 0 --> 70000
101-
bar "sample bar" [52000, 10000]
53+
xychart
54+
line [+1.3, .6, 2.4, -.34]
10255
</pre>
10356

57+
<hr />
58+
<h1>XY Charts Bar with multiple category</h1>
10459
<pre class="mermaid">
105-
---
106-
config:
107-
xyChart:
108-
width: 600
109-
height: 400
110-
showDataLabel: true
111-
showDataLabelOutsideBar: true
112-
---
113-
114-
xychart
115-
title "showDataLabelOutsideBar: true"
116-
x-axis "this is x axis" [category1, "category 2"]
117-
bar "sample bar" [52000, 10000]
60+
xychart
61+
title "Basic xychart with many categories"
62+
x-axis "this is x axis" [category1, "category 2", category3, category4, category5, category6, category7]
63+
y-axis yaxisText 10 --> 150
64+
bar "sample bar" [52, 96, 35, 10, 87, 34, 67, 99]
11865
</pre>
11966

67+
<hr />
68+
<h1>XY Charts Bar with showDataLabel</h1>
12069
<pre class="mermaid">
121-
---
122-
config:
123-
xyChart:
124-
width: 600
125-
height: 400
126-
showDataLabel: true
127-
showDataLabelOutsideBar: true
128-
---
129-
130-
xychart
131-
title "showDataLabelOutsideBar: true"
70+
---
71+
config:
72+
xyChart:
73+
showDataLabel: true
74+
---
75+
xychart
76+
title "Basic xychart with showDataLabel"
13277
x-axis "this is x axis" [category1, "category 2", category3, category4, category5, category6, category7]
13378
y-axis yaxisText 10 --> 150
13479
bar "sample bar" [52, 96, 35, 10, 87, 34, 67, 99]
13580
</pre>
13681

82+
<hr />
83+
<h1>XY Charts Bar with showDataLabel and showDataLabelOutsideBar</h1>
13784
<pre class="mermaid">
138-
---
139-
config:
140-
xyChart:
141-
width: 600
142-
height: 400
143-
showDataLabel: true
144-
showDataLabelOutsideBar: false
145-
---
146-
147-
xychart
148-
title "showDataLabelOutsideBar: false (current default)"
85+
---
86+
config:
87+
xyChart:
88+
showDataLabel: true
89+
showDataLabelOutsideBar: true
90+
---
91+
xychart
92+
title "Basic xychart showDataLabel and showDataLabelOutsideBar"
14993
x-axis "this is x axis" [category1, "category 2", category3, category4, category5, category6, category7]
15094
y-axis yaxisText 10 --> 150
15195
bar "sample bar" [52, 96, 35, 10, 87, 34, 67, 99]
15296
</pre>
15397

98+
<hr />
99+
<h1>XY Charts Bar with showDataLabel (alternate data)</h1>
154100
<pre class="mermaid">
101+
---
102+
config:
103+
xyChart:
104+
showDataLabel: true
105+
---
155106
xychart
156-
title "Sales Revenue (in $)"
157-
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
107+
title "Basic xychart showDataLabel and showDataLabelOutsideBar (alternate data)"
108+
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
158109
y-axis "Revenue (in $)" 4000 --> 11000
159110
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
160-
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
161111
</pre>
162112

163113
<hr />
164-
<h1>XY Charts horizontal</h1>
114+
<h1>XY Charts Bar with showDataLabel and showDataLabelOutsideBar (alternate data)</h1>
165115
<pre class="mermaid">
166-
xychart horizontal
167-
title "Basic xychart"
168-
x-axis "this is x axis" [category1, "category 2", category3, category4]
116+
---
117+
config:
118+
xyChart:
119+
showDataLabel: true
120+
showDataLabelOutsideBar: true
121+
---
122+
xychart
123+
title "Basic xychart showDataLabel and showDataLabelOutsideBar (alternate data)"
124+
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
125+
y-axis "Revenue (in $)" 4000 --> 11000
126+
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
127+
</pre>
128+
129+
<hr />
130+
<h1>XY Charts Bar Horizontal with showDataLabel</h1>
131+
<pre class="mermaid">
132+
---
133+
config:
134+
xyChart:
135+
showDataLabel: true
136+
chartOrientation: horizontal
137+
---
138+
xychart
139+
title "Basic xychart Horizontal with showDataLabel"
140+
x-axis "this is x axis" [category1, "category 2", category3, category4, category5, category6, category7]
169141
y-axis yaxisText 10 --> 150
170-
bar "sample bat" [52, 96, 35, 10]
171-
line [23, 46, 75, 43]
142+
bar "sample bar" [52, 96, 35, 10, 87, 34, 67, 99]
172143
</pre>
144+
173145
<hr />
174-
<h1>XY Charts only lines and bar</h1>
146+
<h1>XY Charts Bar Horizontal with showDataLabel and showDataLabelOutsideBar</h1>
175147
<pre class="mermaid">
148+
---
149+
config:
150+
xyChart:
151+
showDataLabel: true
152+
showDataLabelOutsideBar: true
153+
chartOrientation: horizontal
154+
---
176155
xychart
177-
line [23, 46, 77, 34]
178-
line [45, 32, 33, 12]
179-
line [87, 54, 99, 85]
180-
line [78, 88, 22, 4]
181-
line [22, 29, 75, 33]
182-
bar [52, 96, 35, 10]
156+
title "Basic xychart Horizontal showDataLabel and showDataLabelOutsideBar"
157+
x-axis "this is x axis" [category1, "category 2", category3, category4, category5, category6, category7]
158+
y-axis yaxisText 10 --> 150
159+
bar "sample bar" [52, 96, 35, 10, 87, 34, 67, 99]
183160
</pre>
184161

185162
<hr />
186-
<h1>XY Charts with +ve and -ve numbers</h1>
163+
<h1>XY Charts Bar Horizontal with showDataLabel (alternate data)</h1>
187164
<pre class="mermaid">
165+
---
166+
config:
167+
xyChart:
168+
showDataLabel: true
169+
chartOrientation: horizontal
170+
---
188171
xychart
189-
line [+1.3, .6, 2.4, -.34]
172+
title "Basic xychart Horizontal showDataLabel (alternate data)"
173+
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
174+
y-axis "Revenue (in $)" 4000 --> 11000
175+
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
190176
</pre>
191177

192-
<h1>XY Charts Bar with multiple category</h1>
178+
<hr />
179+
<h1>
180+
XY Charts Bar Horizontal with showDataLabel and showDataLabelOutsideBar (alternate data)
181+
</h1>
193182
<pre class="mermaid">
183+
---
184+
config:
185+
xyChart:
186+
showDataLabel: true
187+
showDataLabelOutsideBar: true
188+
chartOrientation: horizontal
189+
---
194190
xychart
195-
title "Basic xychart with many categories"
196-
x-axis "this is x axis" [category1, "category 2", category3, category4, category5, category6, category7]
197-
y-axis yaxisText 10 --> 150
198-
bar "sample bar" [52, 96, 35, 10, 87, 34, 67, 99]
191+
title "Basic xychart Horizontal showDataLabel and showDataLabelOutsideBar (alternate data)"
192+
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
193+
y-axis "Revenue (in $)" 4000 --> 11000
194+
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
199195
</pre>
200196

197+
<hr />
201198
<h1>XY Charts line with multiple category</h1>
202199
<pre class="mermaid">
203200
xychart
@@ -207,6 +204,7 @@ <h1>XY Charts line with multiple category</h1>
207204
line "sample line" [52, 96, 35, 10, 87, 34, 67, 99]
208205
</pre>
209206

207+
<hr />
210208
<h1>XY Charts category with large text</h1>
211209
<pre class="mermaid">
212210
xychart
@@ -216,6 +214,7 @@ <h1>XY Charts category with large text</h1>
216214
bar "sample bar" [52, 96, 35, 10, 87, 34, 67, 99]
217215
</pre>
218216

217+
<hr />
219218
<h1>sparkline demo</h1>
220219
<pre class="mermaid">
221220
---
@@ -230,6 +229,7 @@ <h1>sparkline demo</h1>
230229
line [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
231230
</pre>
232231

232+
<hr />
233233
<h1>sparkBar demo</h1>
234234
<pre class="mermaid">
235235
---
@@ -244,6 +244,7 @@ <h1>sparkBar demo</h1>
244244
bar [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
245245
</pre>
246246

247+
<hr />
247248
<h1>XY Charts demos with all configs</h1>
248249
<pre class="mermaid">
249250
---
@@ -281,6 +282,8 @@ <h1>XY Charts demos with all configs</h1>
281282
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
282283

283284
</pre>
285+
286+
<hr />
284287
<h1>XY Charts demos with all theme config</h1>
285288
<pre class="mermaid">
286289
---

0 commit comments

Comments
 (0)