Skip to content

Commit 76a2465

Browse files
choper725choper725
authored
chartjs more charts demo 147 (#91)
1 parent fa79194 commit 76a2465

File tree

1 file changed

+231
-13
lines changed

1 file changed

+231
-13
lines changed

‎src/z2ui5_cl_demo_app_147.clas.abap

Lines changed: 231 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,15 @@ CLASS z2ui5_cl_demo_app_147 DEFINITION
88
INTERFACES z2ui5_if_app .
99

1010
DATA check_initialized TYPE abap_bool .
11-
DATA ms_chartjs_config TYPE z2ui5_cl_cc_chartjs=>ty_chart .
11+
DATA ms_chartjs_config_bar TYPE z2ui5_cl_cc_chartjs=>ty_chart .
12+
DATA ms_chartjs_config_bar2 TYPE z2ui5_cl_cc_chartjs=>ty_chart .
13+
DATA ms_chartjs_config_hbar TYPE z2ui5_cl_cc_chartjs=>ty_chart .
14+
DATA ms_chartjs_config_line TYPE z2ui5_cl_cc_chartjs=>ty_chart .
15+
DATA ms_chartjs_config_area TYPE z2ui5_cl_cc_chartjs=>ty_chart .
16+
DATA ms_chartjs_config_pie TYPE z2ui5_cl_cc_chartjs=>ty_chart .
17+
DATA ms_chartjs_config_bubble TYPE z2ui5_cl_cc_chartjs=>ty_chart .
18+
DATA ms_chartjs_config_polar TYPE z2ui5_cl_cc_chartjs=>ty_chart .
19+
DATA ms_chartjs_config_doughnut TYPE z2ui5_cl_cc_chartjs=>ty_chart.
1220
PROTECTED SECTION.
1321

1422
METHODS z2ui5_on_rendering.
@@ -63,18 +71,192 @@ CLASS Z2UI5_CL_DEMO_APP_147 IMPLEMENTATION.
6371

6472
DATA ls_dataset TYPE z2ui5_cl_cc_chartjs=>ty_dataset.
6573

66-
ms_chartjs_config-type = 'bar'.
67-
ms_chartjs_config-data-labels = VALUE #( ( `Red` ) ( `Blue` ) ( `Yellow` ) ( `Green` ) ( `Purple` ) ( `Orange` ) ).
74+
ms_chartjs_config_bar-type = 'bar'.
75+
ms_chartjs_config_bar-data-labels = VALUE #( ( `Red` ) ( `Blue` ) ( `Yellow` ) ( `Green` ) ( `Purple` ) ( `Orange` ) ).
6876

6977
ls_dataset-border_width = 1.
7078
ls_dataset-label = `# of Votes`.
7179
ls_dataset-rtl = abap_true.
7280
ls_dataset-data = VALUE #( ( `1` ) ( `12` ) ( `19` ) ( `3` ) ( `5` ) ( `2` ) ( `3` ) ).
73-
APPEND ls_dataset TO ms_chartjs_config-data-datasets.
74-
75-
ms_chartjs_config-options-plugins-autocolors-mode = 'data'.
76-
77-
ms_chartjs_config-options-scales-y-begin_at_zero = abap_true.
81+
APPEND ls_dataset TO ms_chartjs_config_bar-data-datasets.
82+
83+
ms_chartjs_config_bar-options-plugins-autocolors-mode = 'data'.
84+
ms_chartjs_config_bar-options-plugins-datalabels-text_align = `center`.
85+
ms_chartjs_config_bar-options-scales-y-begin_at_zero = abap_true.
86+
87+
ms_chartjs_config_bar2-type = 'bar'.
88+
ms_chartjs_config_bar2-data-labels = VALUE #( ( `Jan` ) ( `Feb` ) ( `Mar` ) ( `Apr` ) ( `May` ) ( `Jun` ) ).
89+
90+
CLEAR ls_dataset.
91+
ls_dataset-label = 'Fully Rounded'.
92+
ls_dataset-border_width = 2.
93+
ls_dataset-border_radius = 200.
94+
ls_dataset-border_skipped = abap_false.
95+
ls_dataset-data = VALUE #( ( `1` ) ( `-12` ) ( `19` ) ( `3` ) ( `5` ) ( `-2` ) ( `3` ) ).
96+
APPEND ls_dataset TO ms_chartjs_config_bar2-data-datasets.
97+
98+
CLEAR ls_dataset.
99+
ls_dataset-label = 'Small Radius'.
100+
ls_dataset-border_width = 2.
101+
ls_dataset-border_radius = 5.
102+
ls_dataset-border_skipped = abap_false.
103+
ls_dataset-data = VALUE #( ( `11` ) ( `2` ) ( `-3` ) ( `13` ) ( `-9` ) ( `7` ) ( `-4` ) ).
104+
APPEND ls_dataset TO ms_chartjs_config_bar2-data-datasets.
105+
106+
ms_chartjs_config_bar2-options-responsive = abap_true.
107+
ms_chartjs_config_bar2-options-plugins-legend-position = `top`.
108+
ms_chartjs_config_bar2-options-plugins-title-display = abap_true.
109+
ms_chartjs_config_bar2-options-plugins-title-text = `Bar Chart`.
110+
111+
ms_chartjs_config_bar2-options-plugins-autocolors-offset = 11.
112+
ms_chartjs_config_bar2-options-plugins-autocolors-mode = 'dataset'.
113+
ms_chartjs_config_bar2-options-plugins-datalabels-text_align = `center`.
114+
ms_chartjs_config_bar2-options-plugins-datalabels-color = `white`.
115+
116+
117+
118+
ms_chartjs_config_hbar-type = 'bar'.
119+
ms_chartjs_config_hbar-data-labels = VALUE #( ( `Jan` ) ( `Feb` ) ( `Mar` ) ( `Apr` ) ( `May` ) ( `Jun` ) ).
120+
121+
CLEAR ls_dataset.
122+
ls_dataset-label = 'Dataset 1'.
123+
ls_dataset-background_color = `#ffb1c1`.
124+
ls_dataset-border_color = `#ff7894`.
125+
ls_dataset-data = VALUE #( ( `5` ) ( `-12` ) ( `19` ) ( `3` ) ( `5` ) ( `-2` ) ( `3` ) ).
126+
APPEND ls_dataset TO ms_chartjs_config_hbar-data-datasets.
127+
128+
CLEAR ls_dataset.
129+
ls_dataset-label = 'Dataset 2'.
130+
ls_dataset-background_color = `#9ad0f5`.
131+
ls_dataset-border_color = `#40a6ec`.
132+
ls_dataset-data = VALUE #( ( `11` ) ( `2` ) ( `-3` ) ( `13` ) ( `-9` ) ( `7` ) ( `-4` ) ).
133+
APPEND ls_dataset TO ms_chartjs_config_hbar-data-datasets.
134+
135+
ms_chartjs_config_hbar-options-responsive = abap_true.
136+
ms_chartjs_config_hbar-options-index_axis = `y`.
137+
ms_chartjs_config_hbar-options-elements-bar-border_width = 2.
138+
ms_chartjs_config_hbar-options-plugins-legend-position = `right`.
139+
ms_chartjs_config_hbar-options-plugins-title-display = abap_true.
140+
ms_chartjs_config_hbar-options-plugins-title-text = `Horizontal Bar Chart`.
141+
142+
143+
ms_chartjs_config_hbar-options-plugins-datalabels-text_align = `center`.
144+
ms_chartjs_config_hbar-options-plugins-datalabels-color = `white`.
145+
146+
147+
ms_chartjs_config_line-type = 'line'.
148+
ms_chartjs_config_line-data-labels = VALUE #( ( `Jan` ) ( `Feb` ) ( `Mar` ) ( `Apr` ) ( `May` ) ( `Jun` ) ).
149+
150+
CLEAR ls_dataset.
151+
ls_dataset-label = 'Dataset 1'.
152+
ls_dataset-background_color = `#ffb1c1`.
153+
ls_dataset-border_color = `#ff7894`.
154+
ls_dataset-data = VALUE #( ( `5` ) ( `-12` ) ( `19` ) ( `3` ) ( `5` ) ( `-2` ) ( `3` ) ).
155+
APPEND ls_dataset TO ms_chartjs_config_line-data-datasets.
156+
157+
CLEAR ls_dataset.
158+
ls_dataset-label = 'Dataset 2'.
159+
ls_dataset-point_style = 'circle'.
160+
ls_dataset-point_hover_radius = 10.
161+
ls_dataset-background_color = `#9ad0f5`.
162+
ls_dataset-border_color = `#40a6ec`.
163+
ls_dataset-data = VALUE #( ( `11` ) ( `2` ) ( `-3` ) ( `13` ) ( `-9` ) ( `7` ) ( `-4` ) ).
164+
APPEND ls_dataset TO ms_chartjs_config_line-data-datasets.
165+
166+
ms_chartjs_config_line-options-responsive = abap_true.
167+
ms_chartjs_config_line-options-plugins-legend-position = `top`.
168+
ms_chartjs_config_line-options-plugins-title-display = abap_true.
169+
ms_chartjs_config_line-options-plugins-title-text = `Line Chart`.
170+
ms_chartjs_config_line-options-plugins-datalabels-font-size = `15`.
171+
ms_chartjs_config_line-options-plugins-datalabels-text_align = `end`.
172+
173+
174+
ms_chartjs_config_bubble-type = 'bubble'.
175+
176+
CLEAR ls_dataset.
177+
ls_dataset-label = 'Dataset 1'.
178+
ls_dataset-data_x_y_r = VALUE #( ( x = `100` y = `0` r = `8` )
179+
( x = `60` y = `30` r = `15` )
180+
( x = `40` y = `60` r = `8` )
181+
( x = `80` y = `80` r = `23` )
182+
( x = `20` y = `30` r = `8` )
183+
( x = `0` y = `100` r = `9` )
184+
).
185+
ls_dataset-background_color = `#ffb1c1`.
186+
ls_dataset-border_color = `#ff7894`.
187+
APPEND ls_dataset TO ms_chartjs_config_bubble-data-datasets.
188+
189+
CLEAR ls_dataset.
190+
ls_dataset-label = 'Dataset 2'.
191+
ls_dataset-background_color = `#9ad0f5`.
192+
ls_dataset-border_color = `#40a6ec`.
193+
ls_dataset-data_x_y_r = VALUE #( ( x = `0` y = `0` r = `8` )
194+
( x = `20` y = `15` r = `15` )
195+
( x = `80` y = `40` r = `8` )
196+
( x = `20` y = `66` r = `23` )
197+
( x = `10` y = `15` r = `8` )
198+
( x = `80` y = `5` r = `9` )
199+
).
200+
APPEND ls_dataset TO ms_chartjs_config_bubble-data-datasets.
201+
202+
ms_chartjs_config_bubble-options-responsive = abap_true.
203+
ms_chartjs_config_bubble-options-plugins-legend-position = `top`.
204+
ms_chartjs_config_bubble-options-plugins-title-display = '-'.
205+
ms_chartjs_config_bubble-options-plugins-title-text = `Bubble Chart`.
206+
ms_chartjs_config_bubble-options-plugins-datalabels-display = '-'.
207+
208+
209+
ms_chartjs_config_doughnut-type = 'doughnut'.
210+
ms_chartjs_config_doughnut-data-labels = VALUE #( ( `Red` ) ( `Blue` ) ( `Yellow` ) ( `Green` ) ( `Purple` ) ( `Orange` ) ).
211+
212+
CLEAR ls_dataset.
213+
ls_dataset-label = `Dataset 1`.
214+
ls_dataset-background_color_t = VALUE #( ( `red` ) ( `blue` ) ( `yellow` ) ( `green` ) ( `purple` ) ( `orange` ) ).
215+
ls_dataset-data = VALUE #( ( `1` ) ( `12` ) ( `19` ) ( `3` ) ( `5` ) ( `2` ) ).
216+
ls_dataset-hover_offset = 5.
217+
APPEND ls_dataset TO ms_chartjs_config_doughnut-data-datasets.
218+
219+
ms_chartjs_config_doughnut-options-plugins-autocolors-enabled = '-'.
220+
ms_chartjs_config_doughnut-options-plugins-datalabels-text_align = 'center'.
221+
ms_chartjs_config_doughnut-options-plugins-datalabels-color = 'white'.
222+
ms_chartjs_config_doughnut-options-plugins-title-text = `Doughnut Chart`.
223+
ms_chartjs_config_doughnut-options-plugins-title-display = abap_true.
224+
ms_chartjs_config_doughnut-options-plugins-legend-position = 'right'.
225+
226+
227+
ms_chartjs_config_pie-type = 'pie'.
228+
ms_chartjs_config_pie-data-labels = VALUE #( ( `Red` ) ( `Blue` ) ( `Yellow` ) ( `Green` ) ( `Purple` ) ( `Orange` ) ).
229+
230+
CLEAR ls_dataset.
231+
ls_dataset-label = `# of Votes`.
232+
ls_dataset-background_color_t = VALUE #( ( `red` ) ( `blue` ) ( `yellow` ) ( `green` ) ( `purple` ) ( `orange` ) ).
233+
ls_dataset-data = VALUE #( ( `1` ) ( `12` ) ( `19` ) ( `3` ) ( `5` ) ( `2` ) ).
234+
ls_dataset-hover_offset = 5.
235+
APPEND ls_dataset TO ms_chartjs_config_pie-data-datasets.
236+
237+
ms_chartjs_config_pie-options-plugins-autocolors-enabled = '-'.
238+
ms_chartjs_config_pie-options-plugins-datalabels-text_align = 'center'.
239+
ms_chartjs_config_pie-options-plugins-datalabels-color = 'white'.
240+
ms_chartjs_config_pie-options-plugins-title-text = `Pie Chart`.
241+
ms_chartjs_config_pie-options-plugins-title-display = abap_true.
242+
ms_chartjs_config_pie-options-plugins-legend-position = 'left'.
243+
244+
245+
ms_chartjs_config_polar-type = 'polarArea'.
246+
ms_chartjs_config_polar-data-labels = VALUE #( ( `Red` ) ( `Blue` ) ( `Yellow` ) ( `Green` ) ( `Purple` ) ( `Orange` ) ).
247+
248+
CLEAR ls_dataset.
249+
ls_dataset-label = `Dataset 1`.
250+
ls_dataset-background_color_t = VALUE #( ( `red` ) ( `blue` ) ( `yellow` ) ( `green` ) ( `purple` ) ( `orange` ) ).
251+
ls_dataset-data = VALUE #( ( `10` ) ( `12` ) ( `19` ) ( `8` ) ( `5` ) ( `9` ) ).
252+
APPEND ls_dataset TO ms_chartjs_config_polar-data-datasets.
253+
254+
ms_chartjs_config_polar-options-plugins-autocolors-enabled = '-'.
255+
ms_chartjs_config_polar-options-plugins-datalabels-text_align = 'center'.
256+
ms_chartjs_config_polar-options-plugins-datalabels-color = 'white'.
257+
ms_chartjs_config_polar-options-plugins-title-text = `Polar Area Chart`.
258+
ms_chartjs_config_polar-options-plugins-title-display = abap_true.
259+
ms_chartjs_config_polar-options-plugins-legend-position = 'left'.
78260

79261
ENDMETHOD.
80262

@@ -97,13 +279,49 @@ CLASS Z2UI5_CL_DEMO_APP_147 IMPLEMENTATION.
97279
)->get_parent( ).
98280

99281

100-
DATA(vbox) = page->vbox( justifycontent = `Center` ).
101-
vbox->html_canvas( id = `myChart` ).
282+
* DATA(vbox) = page->vbox( justifycontent = `Center` ).
283+
DATA(car) = page->carousel( class = `sapUiContentPadding` ).
284+
DATA(vl1) = car->vertical_layout( width = `100%` ).
285+
DATA(fb1) = vl1->flex_box( width = `100%` height = `50%` justifycontent = `SpaceAround` ).
286+
DATA(fb2) = vl1->flex_box( width = `100%` height = `50%` justifycontent = `SpaceAround` ).
287+
fb1->vbox( justifycontent = `Center` )->html_canvas( id = `bar` height = `300` width = `400` ).
288+
fb1->vbox( justifycontent = `Center` )->html_canvas( id = `bar2` height = `300` width = `400` ).
289+
fb2->vbox( justifycontent = `Center` )->html_canvas( id = `hbar` height = `300` width = `400` ).
290+
fb2->vbox( justifycontent = `Center` )->html_canvas( id = `line` height = `300` width = `400` ).
102291

103-
vbox->_generic( name = `script` ns = `html` )->_cc_plain_xml( z2ui5_cl_cc_chartjs=>set_js_config( canvas_id = 'myChart'
104-
is_config = ms_chartjs_config
105-
view = client->cs_view-main ) ).
292+
DATA(vl2) = car->vertical_layout( width = `100%` ).
293+
DATA(fb3) = vl2->flex_box( width = `100%` height = `50%` justifycontent = `SpaceAround` ).
294+
DATA(fb4) = vl2->flex_box( width = `100%` height = `50%` justifycontent = `SpaceAround` ).
295+
fb3->vbox( justifycontent = `Center` )->html_canvas( id = `bubble` height = `300` width = `315 ` ).
296+
fb3->vbox( justifycontent = `Center` )->html_canvas( id = `doughnut` height = `300` width = `315` ).
297+
fb4->vbox( justifycontent = `Center` )->html_canvas( id = `pie` height = `300` width = `315` ).
298+
fb4->vbox( justifycontent = `Center` )->html_canvas( id = `polar` height = `300` width = `315` ).
106299

300+
301+
view->_generic( name = `script` ns = `html` )->_cc_plain_xml( z2ui5_cl_cc_chartjs=>set_js_config( canvas_id = 'bar'
302+
is_config = ms_chartjs_config_bar
303+
view = client->cs_view-main ) ).
304+
view->_generic( name = `script` ns = `html` )->_cc_plain_xml( z2ui5_cl_cc_chartjs=>set_js_config( canvas_id = 'bar2'
305+
is_config = ms_chartjs_config_bar2
306+
view = client->cs_view-main ) ).
307+
view->_generic( name = `script` ns = `html` )->_cc_plain_xml( z2ui5_cl_cc_chartjs=>set_js_config( canvas_id = 'hbar'
308+
is_config = ms_chartjs_config_hbar
309+
view = client->cs_view-main ) ).
310+
view->_generic( name = `script` ns = `html` )->_cc_plain_xml( z2ui5_cl_cc_chartjs=>set_js_config( canvas_id = 'line'
311+
is_config = ms_chartjs_config_line
312+
view = client->cs_view-main ) ).
313+
view->_generic( name = `script` ns = `html` )->_cc_plain_xml( z2ui5_cl_cc_chartjs=>set_js_config( canvas_id = 'bubble'
314+
is_config = ms_chartjs_config_bubble
315+
view = client->cs_view-main ) ).
316+
view->_generic( name = `script` ns = `html` )->_cc_plain_xml( z2ui5_cl_cc_chartjs=>set_js_config( canvas_id = 'doughnut'
317+
is_config = ms_chartjs_config_doughnut
318+
view = client->cs_view-main ) ).
319+
view->_generic( name = `script` ns = `html` )->_cc_plain_xml( z2ui5_cl_cc_chartjs=>set_js_config( canvas_id = 'pie'
320+
is_config = ms_chartjs_config_pie
321+
view = client->cs_view-main ) ).
322+
view->_generic( name = `script` ns = `html` )->_cc_plain_xml( z2ui5_cl_cc_chartjs=>set_js_config( canvas_id = 'polar'
323+
is_config = ms_chartjs_config_polar
324+
view = client->cs_view-main ) ).
107325
client->view_display( page->stringify( ) ).
108326

109327
ENDMETHOD.

0 commit comments

Comments
 (0)