source: public/assets/js/examples/charts/chartjs.js@ 5e56e8a

develop
Last change on this file since 5e56e8a was 194a359, checked in by beratkjufliju <kufliju@…>, 3 years ago

added departments, edited users and added user settings
  • Property mode set to 100644
File size: 7.6 KB
Line 
1'use strict';
2$(document).ready(function () {
3
4 var colors = {
5 primary: $('.colors .bg-primary').css('background-color'),
6 primaryLight: $('.colors .bg-primary-bright').css('background-color'),
7 secondary: $('.colors .bg-secondary').css('background-color'),
8 secondaryLight: $('.colors .bg-secondary-bright').css('background-color'),
9 info: $('.colors .bg-info').css('background-color'),
10 infoLight: $('.colors .bg-info-bright').css('background-color'),
11 success: $('.colors .bg-success').css('background-color'),
12 successLight: $('.colors .bg-success-bright').css('background-color'),
13 danger: $('.colors .bg-danger').css('background-color'),
14 dangerLight: $('.colors .bg-danger-bright').css('background-color'),
15 warning: $('.colors .bg-warning').css('background-color'),
16 warningLight: $('.colors .bg-warning-bright').css('background-color'),
17 };
18
19 chartjs_one();
20
21 chartjs_two();
22
23 chartjs_three();
24
25 chartjs_four();
26
27 chartjs_five();
28
29 chartjs_six();
30
31 function chartjs_one() {
32 var element = document.getElementById("chartjs_one");
33 element.height = 100;
34 new Chart(element, {
35 type: 'bar',
36 data: {
37 labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
38 datasets: [
39 {
40 label: "Population (millions)",
41 backgroundColor: [
42 colors.primary,
43 colors.secondary,
44 colors.success,
45 colors.warning,
46 colors.info
47 ],
48 data: [2478,3267,1734,2084,3000]
49 }
50 ]
51 },
52 options: {
53 legend: { display: false },
54 title: {
55 display: true,
56 text: 'Predicted world population (millions) in 2050'
57 }
58 }
59 });
60 }
61
62 function chartjs_two() {
63 var element = document.getElementById("chartjs_two");
64 element.height = 100;
65 new Chart(element, {
66 type: 'line',
67 data: {
68 labels: ["January", "February", "March", "April", "May", "June", "July"],
69 datasets: [{
70 data: [65, 0, 80, 81, 56, 85, 40],
71 label: "Africa",
72 borderColor: colors.primary,
73 backgroundColor: colors.primaryLight,
74 }, {
75 data: [25, 55, 20, 31, 96, 35, 80],
76 label: "Asia",
77 borderColor: colors.success,
78 backgroundColor: colors.successLight,
79 }
80 ]
81 },
82 options: {
83 title: {
84 display: true,
85 text: 'World population per region (in millions)'
86 }
87 }
88 });
89 }
90
91 function chartjs_three() {
92 var element = document.getElementById("chartjs_three");
93 element.height = 100;
94 new Chart(element, {
95 type: 'pie',
96 data: {
97 labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
98 datasets: [{
99 label: "Population (millions)",
100 borderWidth: 5,
101 backgroundColor: [
102 colors.primary,
103 colors.secondary,
104 colors.success,
105 colors.warning,
106 colors.info
107 ],
108 data: [2478,3267,734,1784,933]
109 }]
110 },
111 options: {
112 title: {
113 display: true,
114 text: 'Predicted world population (millions) in 2050'
115 }
116 }
117 });
118 }
119
120 function chartjs_four() {
121 var element = document.getElementById("chartjs_four");
122 element.height = 100;
123 new Chart(element, {
124 type: 'radar',
125 data: {
126 labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
127 datasets: [
128 {
129 label: "1950",
130 fill: true,
131 backgroundColor: colors.primaryLight,
132 borderColor: colors.primary,
133 pointBorderColor: "#fff",
134 data: [8.77,55.61,21.69,6.62,6.82]
135 }, {
136 label: "2050",
137 fill: true,
138 backgroundColor: colors.successLight,
139 borderColor: colors.success,
140 pointBorderColor: "#fff",
141 data: [25.48,54.16,7.61,8.06,4.45]
142 }
143 ]
144 },
145 options: {
146 title: {
147 display: true,
148 text: 'Distribution in % of world population'
149 }
150 }
151 });
152 }
153
154 function chartjs_five() {
155 var element = document.getElementById("chartjs_five");
156 element.height = 100;
157 new Chart(element, {
158 type: 'horizontalBar',
159 data: {
160 labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
161 datasets: [
162 {
163 label: "Population (millions)",
164 backgroundColor: [
165 colors.primary,
166 colors.secondary,
167 colors.success,
168 colors.warning,
169 colors.info
170 ],
171 data: [2478,5267,734,784,433]
172 }
173 ]
174 },
175 options: {
176 legend: { display: false },
177 title: {
178 display: true,
179 text: 'Predicted world population (millions) in 2050'
180 }
181 }
182 });
183 }
184
185 function chartjs_six() {
186 var element = document.getElementById("chartjs_six");
187 element.height = 100;
188 new Chart(element, {
189 type: 'bar',
190 data: {
191 labels: ["1900", "1950", "1999", "2050"],
192 datasets: [{
193 label: "Europe",
194 type: "line",
195 borderColor: colors.warning,
196 data: [408,547,675,734],
197 fill: false
198 }, {
199 label: "Africa",
200 type: "line",
201 borderColor: colors.success,
202 data: [133,221,783,2478],
203 fill: false
204 }, {
205 label: "Europe",
206 type: "bar",
207 backgroundColor: colors.secondary,
208 data: [408,547,675,734],
209 }, {
210 label: "Africa",
211 type: "bar",
212 backgroundColor: colors.primary,
213 backgroundColorHover: "#3e95cd",
214 data: [133,221,783,2478]
215 }
216 ]
217 },
218 options: {
219 title: {
220 display: true,
221 text: 'Population growth (millions): Europe & Africa'
222 },
223 legend: { display: false }
224 }
225 });
226 }
227
228});
Note: See TracBrowser for help on using the repository browser.