chart.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300
  1. function chart(reporting) {
  2. "use strict";
  3. var model = openerp;
  4. reporting.ReportSaleChartWidget = reporting.Base.extend({
  5. BuildLineChart: function (label,data,CurrencyBase) {
  6. var self = this;
  7. Chart.scaleService.updateScaleDefaults('linear', {
  8. ticks: {
  9. callback: function(tick) {
  10. return tick.toLocaleString('de-DE');
  11. }
  12. }
  13. });
  14. Chart.defaults.global.tooltips.callbacks.label = function(tooltipItem, data) {
  15. var dataset = data.datasets[tooltipItem.datasetIndex];
  16. var datasetLabel = dataset.label || '';
  17. return datasetLabel + dataset.data[tooltipItem.index].toLocaleString('de-DE');
  18. };
  19. var chart = new Chart($(".reporting-chart"), {
  20. type: 'line',
  21. data: {
  22. labels: label,
  23. datasets: [
  24. {
  25. label: false,
  26. data: data,
  27. backgroundColor: '#bbdefb',
  28. borderColor: '#0288d1',
  29. borderWidth: 1,
  30. fill: true,
  31. }
  32. ]
  33. },
  34. options: {
  35. responsive: true,
  36. responsiveAnimationDuration:10,
  37. maintainAspectRatio:false,
  38. title: {
  39. display: false,
  40. },
  41. hover: {
  42. mode: 'nearest',
  43. intersect: true
  44. },
  45. legend: {
  46. display: false,
  47. },
  48. layout: {
  49. padding: {
  50. top: 0,
  51. bottom: 0,
  52. left : 0,
  53. rigth: 0,
  54. }
  55. },
  56. events: ['click'],
  57. tooltips: {
  58. callbacks: {
  59. label: function(tooltipItem, data) {
  60. var label = data.datasets[tooltipItem.datasetIndex].label || '';
  61. if (label) {
  62. label += ': ';
  63. }
  64. label += accounting.formatMoney(tooltipItem.yLabel, CurrencyBase.symbol, CurrencyBase.decimal_places, CurrencyBase.thousands_separator, CurrencyBase.decimal_separator);
  65. return label;
  66. }
  67. }
  68. }
  69. }
  70. });
  71. },
  72. BuildBarChart: function (data,CurrencyBase,label,body) {
  73. var self = this;
  74. Chart.scaleService.updateScaleDefaults('linear', {
  75. ticks: {
  76. callback: function(tick) {
  77. return tick.toLocaleString('de-DE');
  78. }
  79. }
  80. });
  81. Chart.defaults.global.tooltips.callbacks.label = function(tooltipItem, data) {
  82. var dataset = data.datasets[tooltipItem.datasetIndex];
  83. var datasetLabel = dataset.label || '';
  84. return datasetLabel + dataset.data[tooltipItem.index].toLocaleString('de-DE');
  85. };
  86. var color = [];
  87. color.push('#BCCEF4');
  88. color.push('#A9E5E3');
  89. color.push('#A0D995');
  90. color.push('#C5D084');
  91. color.push('#FAE187');
  92. color.push('#FFBD82');
  93. color.push('#FFA8B8');
  94. color.push('#E5BEDD');
  95. color.push('#C4ABFE');
  96. color.push('#D8D8D8');
  97. var chart = new Chart($(".reporting-chart"), {
  98. type: 'horizontalBar',
  99. data: {
  100. labels: label,
  101. datasets: [
  102. {
  103. label: false,
  104. data: body,
  105. backgroundColor: color,
  106. fill: true,
  107. }
  108. ]
  109. },
  110. options: {
  111. responsive: true,
  112. responsiveAnimationDuration:10,
  113. maintainAspectRatio:false,
  114. title: {
  115. display: false,
  116. },
  117. hover: {
  118. mode: 'nearest',
  119. intersect: true
  120. },
  121. legend: {
  122. display: false,
  123. },
  124. layout: {
  125. padding: {
  126. top: 0,
  127. bottom: 0,
  128. left : 0,
  129. rigth: 0,
  130. }
  131. },
  132. tooltips: {
  133. callbacks: {
  134. label: function(tooltipItem, data) {
  135. var label = data.datasets[tooltipItem.datasetIndex].label || '';
  136. if (label) {
  137. label += ': ';
  138. }
  139. label += accounting.formatMoney(tooltipItem.xLabel, CurrencyBase.symbol, CurrencyBase.decimal_places, CurrencyBase.thousands_separator, CurrencyBase.decimal_separator);
  140. return label;
  141. }
  142. }
  143. },
  144. events: ['click'],
  145. }
  146. });
  147. },
  148. BuildPieChart: function (data,CurrencyBase,label,body) {
  149. var self = this;
  150. var color = [];
  151. color.push('#BCCEF4');
  152. color.push('#A9E5E3');
  153. color.push('#A0D995');
  154. color.push('#C5D084');
  155. color.push('#FAE187');
  156. color.push('#FFBD82');
  157. color.push('#FFA8B8');
  158. color.push('#E5BEDD');
  159. color.push('#C4ABFE');
  160. color.push('#D8D8D8');
  161. color.push('#f3e5f5');
  162. var chart = new Chart($(".reporting-pie-chart"), {
  163. type: 'pie',
  164. data: {
  165. labels: label,
  166. datasets: [
  167. {
  168. label: false,
  169. data: body,
  170. backgroundColor: color,
  171. fill: true,
  172. }
  173. ]
  174. },
  175. options: {
  176. responsive: true,
  177. responsiveAnimationDuration:10,
  178. maintainAspectRatio:false,
  179. hover: {
  180. mode: 'nearest',
  181. intersect: true
  182. },
  183. legend: {
  184. position: 'right',
  185. },
  186. layout: {
  187. padding: {
  188. top: 0,
  189. bottom: 0,
  190. left : 0,
  191. rigth: 0,
  192. }
  193. },
  194. tooltips: {
  195. callbacks: {
  196. label: function(tooltipItem, data) {
  197. var label = data.labels[tooltipItem.index] || '';
  198. if (label) {
  199. label += ': ';
  200. }
  201. label += accounting.formatMoney(data.datasets[0].data[tooltipItem.index],{
  202. symbol: "%",
  203. format: "%v%s",
  204. precision: 2,
  205. thousand: ".",
  206. decimal: ","
  207. });
  208. return label;
  209. }
  210. }
  211. },
  212. events: ['click'],
  213. }
  214. });
  215. },
  216. BuildDoughnutChart: function (data,CurrencyBase,label,body) {
  217. var self = this;
  218. var color = [];
  219. color.push('#BCCEF4');
  220. color.push('#A9E5E3');
  221. color.push('#A0D995');
  222. color.push('#C5D084');
  223. color.push('#FAE187');
  224. color.push('#FFBD82');
  225. color.push('#FFA8B8');
  226. color.push('#E5BEDD');
  227. color.push('#C4ABFE');
  228. color.push('#D8D8D8');
  229. var chart = new Chart($(".reporting-doughnut-chart"), {
  230. type: 'doughnut',
  231. data: {
  232. labels: label,
  233. datasets: [
  234. {
  235. label: false,
  236. data: body,
  237. backgroundColor: color,
  238. fill: true,
  239. }
  240. ]
  241. },
  242. options: {
  243. responsive: true,
  244. responsiveAnimationDuration:10,
  245. maintainAspectRatio:false,
  246. hover: {
  247. mode: 'nearest',
  248. intersect: true
  249. },
  250. legend: {
  251. position: 'left',
  252. },
  253. layout: {
  254. padding: {
  255. top: 0,
  256. bottom: 0,
  257. left : 0,
  258. rigth: 0,
  259. }
  260. },
  261. tooltips: {
  262. callbacks: {
  263. label: function(tooltipItem, data) {
  264. var label = data.labels[tooltipItem.index] || '';
  265. if (label) {
  266. label += ': ';
  267. }
  268. label += accounting.formatMoney(data.datasets[0].data[tooltipItem.index],{
  269. symbol: "%",
  270. format: "%v%s",
  271. precision: 2,
  272. thousand: ".",
  273. decimal: ","
  274. });
  275. return label;
  276. }
  277. }
  278. },
  279. events: ['click'],
  280. }
  281. });
  282. },
  283. });
  284. }