chart.js 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682
  1. function chart(reporting) {
  2. "use strict";
  3. var model = openerp;
  4. reporting.ReportChartWidget = reporting.Base.extend({
  5. BuildDemoChart: 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 chartData = {
  20. labels: label,
  21. datasets: [{
  22. type: 'line',
  23. label: 'Balance',
  24. borderColor: '#0288d1',
  25. fill:false,
  26. data: [
  27. '10500',
  28. '5000',
  29. '3000',
  30. '19000',
  31. '4000',
  32. '70000',
  33. '8000',
  34. '43000',
  35. '25000',
  36. '39000',
  37. '36000',
  38. '47000',
  39. ],
  40. borderWidth: 2
  41. }, {
  42. type: 'bar',
  43. label: 'Ventas',
  44. backgroundColor: '#81c784',
  45. borderWidth: 1,
  46. data: [
  47. '10000',
  48. '5000',
  49. '3000',
  50. '15000',
  51. '45000',
  52. '70000',
  53. '90000',
  54. '40000',
  55. '25000',
  56. '70000',
  57. '30000',
  58. '50000',
  59. ]
  60. }, {
  61. type: 'bar',
  62. label: 'Compras',
  63. backgroundColor: '#ffb74d',
  64. data: [
  65. '10000',
  66. '5000',
  67. '3000',
  68. '15000',
  69. '4000',
  70. '70000',
  71. '8000',
  72. '40000',
  73. '25000',
  74. '35000',
  75. '30000',
  76. '40000',
  77. ],
  78. borderWidth: 1
  79. }, {
  80. type: 'bar',
  81. label: 'Gastos',
  82. backgroundColor: '#e57373',
  83. data: [
  84. '10500',
  85. '5000',
  86. '3000',
  87. '19000',
  88. '4000',
  89. '70000',
  90. '8000',
  91. '43000',
  92. '25000',
  93. '39000',
  94. '36000',
  95. '47000',
  96. ],
  97. borderWidth: 1
  98. }]
  99. };
  100. var chart = new Chart($(".reporting-chart"), {
  101. type: 'bar',
  102. data: chartData,
  103. options: {
  104. responsive: true,
  105. responsiveAnimationDuration:10,
  106. maintainAspectRatio:false,
  107. title: {
  108. display: false,
  109. },
  110. hover: {
  111. mode: 'nearest',
  112. intersect: true
  113. },
  114. legend: {
  115. display: false,
  116. },
  117. layout: {
  118. padding: {
  119. top: 0,
  120. bottom: 0,
  121. left : 0,
  122. rigth: 0,
  123. }
  124. },
  125. // events: ['click'],
  126. tooltips: {
  127. callbacks: {
  128. label: function(tooltipItem, data) {
  129. var label = data.datasets[tooltipItem.datasetIndex].label || '';
  130. if (label) {
  131. label += ': ';
  132. }
  133. label += accounting.formatMoney(tooltipItem.yLabel, CurrencyBase.symbol, CurrencyBase.decimal_places, CurrencyBase.thousands_separator, CurrencyBase.decimal_separator);
  134. return label;
  135. }
  136. }
  137. }
  138. }
  139. });
  140. },
  141. BuildLineChart: function (label,data,CurrencyBase) {
  142. var self = this;
  143. Chart.scaleService.updateScaleDefaults('linear', {
  144. ticks: {
  145. callback: function(tick) {
  146. return tick.toLocaleString('de-DE');
  147. }
  148. }
  149. });
  150. Chart.defaults.global.tooltips.callbacks.label = function(tooltipItem, data) {
  151. var dataset = data.datasets[tooltipItem.datasetIndex];
  152. var datasetLabel = dataset.label || '';
  153. return datasetLabel + dataset.data[tooltipItem.index].toLocaleString('de-DE');
  154. };
  155. var chart = new Chart($(".reporting-chart"), {
  156. type: 'line',
  157. data: {
  158. labels: label,
  159. datasets: [
  160. {
  161. label: false,
  162. data: data,
  163. backgroundColor: '#bbdefb',
  164. borderColor: '#0288d1',
  165. borderWidth: 1,
  166. fill: true,
  167. }
  168. ]
  169. },
  170. options: {
  171. responsive: true,
  172. responsiveAnimationDuration:10,
  173. maintainAspectRatio:false,
  174. title: {
  175. display: false,
  176. },
  177. hover: {
  178. mode: 'nearest',
  179. intersect: true
  180. },
  181. legend: {
  182. display: false,
  183. },
  184. layout: {
  185. padding: {
  186. top: 0,
  187. bottom: 0,
  188. left : 0,
  189. rigth: 0,
  190. }
  191. },
  192. events: ['click'],
  193. tooltips: {
  194. callbacks: {
  195. label: function(tooltipItem, data) {
  196. var label = data.datasets[tooltipItem.datasetIndex].label || '';
  197. if (label) {
  198. label += ': ';
  199. }
  200. label += accounting.formatMoney(tooltipItem.yLabel, CurrencyBase.symbol, CurrencyBase.decimal_places, CurrencyBase.thousands_separator, CurrencyBase.decimal_separator);
  201. return label;
  202. }
  203. }
  204. }
  205. }
  206. });
  207. },
  208. BuildBarChart: function (data,CurrencyBase,label,body) {
  209. var self = this;
  210. Chart.scaleService.updateScaleDefaults('linear', {
  211. ticks: {
  212. callback: function(tick) {
  213. return tick.toLocaleString('de-DE');
  214. }
  215. }
  216. });
  217. Chart.defaults.global.tooltips.callbacks.label = function(tooltipItem, data) {
  218. var dataset = data.datasets[tooltipItem.datasetIndex];
  219. var datasetLabel = dataset.label || '';
  220. return datasetLabel + dataset.data[tooltipItem.index].toLocaleString('de-DE');
  221. };
  222. var color = [];
  223. color.push('#BCCEF4');
  224. color.push('#A9E5E3');
  225. color.push('#A0D995');
  226. color.push('#C5D084');
  227. color.push('#FAE187');
  228. color.push('#FFBD82');
  229. color.push('#FFA8B8');
  230. color.push('#E5BEDD');
  231. color.push('#C4ABFE');
  232. color.push('#D8D8D8');
  233. var chart = new Chart($(".reporting-chart"), {
  234. type: 'horizontalBar',
  235. data: {
  236. labels: label,
  237. datasets: [
  238. {
  239. label: false,
  240. data: body,
  241. backgroundColor: color,
  242. fill: true,
  243. }
  244. ]
  245. },
  246. options: {
  247. responsive: true,
  248. responsiveAnimationDuration:10,
  249. maintainAspectRatio:false,
  250. title: {
  251. display: false,
  252. },
  253. hover: {
  254. mode: 'nearest',
  255. intersect: true
  256. },
  257. legend: {
  258. display: false,
  259. },
  260. layout: {
  261. padding: {
  262. top: 0,
  263. bottom: 0,
  264. left : 0,
  265. rigth: 0,
  266. }
  267. },
  268. tooltips: {
  269. callbacks: {
  270. label: function(tooltipItem, data) {
  271. var label = data.datasets[tooltipItem.datasetIndex].label || '';
  272. if (label) {
  273. label += ': ';
  274. }
  275. label += accounting.formatMoney(tooltipItem.xLabel, CurrencyBase.symbol, CurrencyBase.decimal_places, CurrencyBase.thousands_separator, CurrencyBase.decimal_separator);
  276. return label;
  277. }
  278. }
  279. },
  280. events: ['click'],
  281. }
  282. });
  283. },
  284. BuildPieChart: function (data,CurrencyBase,label,body) {
  285. var self = this;
  286. var color = [];
  287. color.push('#BCCEF4');
  288. color.push('#A9E5E3');
  289. color.push('#A0D995');
  290. color.push('#C5D084');
  291. color.push('#FAE187');
  292. color.push('#FFBD82');
  293. color.push('#FFA8B8');
  294. color.push('#E5BEDD');
  295. color.push('#C4ABFE');
  296. color.push('#D8D8D8');
  297. color.push('#f3e5f5');
  298. var chart = new Chart($(".reporting-pie-chart"), {
  299. type: 'pie',
  300. data: {
  301. labels: label,
  302. datasets: [
  303. {
  304. label: false,
  305. data: body,
  306. backgroundColor: color,
  307. fill: true,
  308. }
  309. ]
  310. },
  311. options: {
  312. responsive: true,
  313. responsiveAnimationDuration:10,
  314. maintainAspectRatio:false,
  315. hover: {
  316. mode: 'nearest',
  317. intersect: true
  318. },
  319. legend: {
  320. position: 'right',
  321. // position: 'none',
  322. },
  323. layout: {
  324. padding: {
  325. top: 0,
  326. bottom: 0,
  327. left : 0,
  328. rigth: 0,
  329. }
  330. },
  331. tooltips: {
  332. callbacks: {
  333. label: function(tooltipItem, data) {
  334. var label = data.labels[tooltipItem.index] || '';
  335. if (label) {
  336. label += ': ';
  337. }
  338. label += accounting.formatMoney(data.datasets[0].data[tooltipItem.index],{
  339. symbol: "%",
  340. format: "%v%s",
  341. precision: 2,
  342. thousand: ".",
  343. decimal: ","
  344. });
  345. return label;
  346. }
  347. }
  348. },
  349. events: ['click'],
  350. }
  351. });
  352. },
  353. BuildDoughnutChart: function (data,CurrencyBase,label,body) {
  354. var self = this;
  355. var color = [];
  356. color.push('#BCCEF4');
  357. color.push('#A9E5E3');
  358. color.push('#A0D995');
  359. color.push('#C5D084');
  360. color.push('#FAE187');
  361. color.push('#FFBD82');
  362. color.push('#FFA8B8');
  363. color.push('#E5BEDD');
  364. color.push('#C4ABFE');
  365. color.push('#D8D8D8');
  366. var chart = new Chart($(".reporting-doughnut-chart"), {
  367. type: 'doughnut',
  368. data: {
  369. labels: label,
  370. datasets: [
  371. {
  372. label: false,
  373. data: body,
  374. backgroundColor: color,
  375. fill: true,
  376. }
  377. ]
  378. },
  379. options: {
  380. responsive: true,
  381. responsiveAnimationDuration:10,
  382. maintainAspectRatio:false,
  383. hover: {
  384. mode: 'nearest',
  385. intersect: true
  386. },
  387. legend: {
  388. position: 'left',
  389. // position: 'none',
  390. },
  391. layout: {
  392. padding: {
  393. top: 0,
  394. bottom: 0,
  395. left : 0,
  396. rigth: 0,
  397. }
  398. },
  399. tooltips: {
  400. callbacks: {
  401. label: function(tooltipItem, data) {
  402. var label = data.labels[tooltipItem.index] || '';
  403. if (label) {
  404. label += ': ';
  405. }
  406. label += accounting.formatMoney(data.datasets[0].data[tooltipItem.index],{
  407. symbol: "%",
  408. format: "%v%s",
  409. precision: 2,
  410. thousand: ".",
  411. decimal: ","
  412. });
  413. return label;
  414. }
  415. }
  416. },
  417. events: ['click'],
  418. }
  419. });
  420. },
  421. BuildMultipleChart: function (CurrencyBase,label,body_subtotal,body_tax,body_cost,body_total,body_profit) {
  422. var self = this;
  423. Chart.scaleService.updateScaleDefaults('linear', {
  424. ticks: {
  425. callback: function(tick) {
  426. return tick.toLocaleString('de-DE');
  427. }
  428. }
  429. });
  430. Chart.defaults.global.tooltips.callbacks.label = function(tooltipItem, data) {
  431. var dataset = data.datasets[tooltipItem.datasetIndex];
  432. var datasetLabel = dataset.label || '';
  433. return datasetLabel + dataset.data[tooltipItem.index].toLocaleString('de-DE');
  434. };
  435. var chartData = {
  436. labels: label,
  437. datasets: [
  438. /*
  439. ================
  440. BENEFICIO
  441. ================
  442. */
  443. {
  444. type: 'line',
  445. label: 'Beneficio',
  446. borderColor: '#03a9f4',
  447. fill: false,
  448. borderWidth: 2,
  449. data: body_profit,
  450. },
  451. /*
  452. ================
  453. TOTAL
  454. ================
  455. */
  456. {
  457. type: 'bar',
  458. label: 'Total',
  459. borderColor: '#BCCEF4',
  460. backgroundColor: '#BCCEF4',
  461. borderWidth: 1,
  462. data: body_total,
  463. },
  464. /*
  465. ================
  466. SUB TOTAL
  467. ================
  468. */
  469. {
  470. type: 'bar',
  471. label: 'Sub-Total',
  472. borderColor: '#A9E5E3',
  473. backgroundColor: '#A9E5E3',
  474. borderWidth: 1,
  475. data: body_subtotal,
  476. },
  477. /*
  478. ================
  479. IMPUESTOS
  480. ================
  481. */
  482. {
  483. type: 'bar',
  484. label: 'Impuestos',
  485. borderColor: '#A0D995',
  486. backgroundColor: '#A0D995',
  487. borderWidth: 1,
  488. data:body_tax,
  489. },
  490. /*
  491. ================
  492. COSTE
  493. ================
  494. */
  495. {
  496. type: 'bar',
  497. label: 'Coste',
  498. borderColor: '#C5D084',
  499. backgroundColor: '#C5D084',
  500. borderWidth: 1,
  501. data: body_cost,
  502. },
  503. ]
  504. };
  505. var chart = new Chart($(".reporting-chart"), {
  506. type: 'bar',
  507. data: chartData,
  508. options: {
  509. responsive: true,
  510. responsiveAnimationDuration:20,
  511. maintainAspectRatio:false,
  512. title: {
  513. display: false,
  514. },
  515. hover: {
  516. mode: 'nearest',
  517. intersect: true
  518. },
  519. legend: {
  520. display: false,
  521. },
  522. layout: {
  523. padding: {
  524. top: 15,
  525. bottom: 0,
  526. left : 0,
  527. rigth: 0,
  528. }
  529. },
  530. events: ['click'],
  531. tooltips: {
  532. callbacks: {
  533. label: function(tooltipItem, data) {
  534. var label = data.datasets[tooltipItem.datasetIndex].label || '';
  535. if (label) {
  536. label += ': ';
  537. }
  538. label += accounting.formatMoney(tooltipItem.yLabel, CurrencyBase.symbol, CurrencyBase.decimal_places, CurrencyBase.thousands_separator, CurrencyBase.decimal_separator);
  539. return label;
  540. }
  541. }
  542. }
  543. }
  544. });
  545. },
  546. BuildMultipleBarChart: function (
  547. data,
  548. CurrencyBase,
  549. first_label,
  550. first_body,
  551. second_label,
  552. second_body,
  553. third_label,
  554. third_body,
  555. fourth_label,
  556. fourth_body,
  557. label
  558. ) {
  559. var self = this;
  560. Chart.scaleService.updateScaleDefaults('linear', {
  561. ticks: {
  562. callback: function(tick) {
  563. return tick.toLocaleString('de-DE');
  564. }
  565. }
  566. });
  567. Chart.defaults.global.tooltips.callbacks.label = function(tooltipItem, data) {
  568. var dataset = data.datasets[tooltipItem.datasetIndex];
  569. var datasetLabel = dataset.label || '';
  570. return datasetLabel + dataset.data[tooltipItem.index].toLocaleString('de-DE');
  571. };
  572. var chartData = {
  573. labels: label,
  574. datasets: [
  575. {
  576. type: 'bar',
  577. label: first_label,
  578. borderColor: '#BCCEF4',
  579. backgroundColor: '#BCCEF4',
  580. borderWidth: 1,
  581. data: first_body,
  582. },
  583. {
  584. type: 'bar',
  585. label: second_label,
  586. borderColor: '#A9E5E3',
  587. backgroundColor: '#A9E5E3',
  588. borderWidth: 1,
  589. data: second_body,
  590. },
  591. {
  592. type: 'bar',
  593. label: third_label,
  594. borderColor: '#A0D995',
  595. backgroundColor: '#A0D995',
  596. borderWidth: 1,
  597. data: third_body,
  598. },
  599. {
  600. type: 'bar',
  601. label: fourth_label,
  602. borderColor: '#0288d1',
  603. backgroundColor: '#0288d1',
  604. borderWidth: 1,
  605. data: fourth_body,
  606. },
  607. ]
  608. };
  609. var chart = new Chart($(".reporting-chart"), {
  610. type: 'bar',
  611. data: chartData,
  612. options: {
  613. responsive: true,
  614. responsiveAnimationDuration:10,
  615. maintainAspectRatio:false,
  616. title: {
  617. display: false,
  618. },
  619. hover: {
  620. mode: 'nearest',
  621. intersect: true
  622. },
  623. legend: {
  624. display: false,
  625. },
  626. layout: {
  627. padding: {
  628. top: 0,
  629. bottom: 0,
  630. left : 0,
  631. rigth: 0,
  632. }
  633. },
  634. tooltips: {
  635. callbacks: {
  636. label: function(tooltipItem, data) {
  637. var label = data.datasets[tooltipItem.datasetIndex].label || '';
  638. if (label) {
  639. label += ': ';
  640. }
  641. label += accounting.formatMoney(tooltipItem.yLabel, CurrencyBase.symbol, CurrencyBase.decimal_places, CurrencyBase.thousands_separator, CurrencyBase.decimal_separator);
  642. return label;
  643. }
  644. }
  645. },
  646. events: ['click'],
  647. }
  648. });
  649. },
  650. });
  651. }