tc-angular-chartjs.js 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
  1. /**
  2. * tc-angular-chartjs - v1.0.9 - 2014-10-14
  3. * Copyright (c) 2014 Carl Craig <carlcraig@3c-studios.com>
  4. * Dual licensed with the Apache-2.0 or MIT license.
  5. */
  6. (function() {
  7. "use strict";
  8. angular.module("tc.chartjs", []).directive("tcChartjs", TcChartjs).directive("tcChartjsLine", TcChartjsLine).directive("tcChartjsBar", TcChartjsBar).directive("tcChartjsRadar", TcChartjsRadar).directive("tcChartjsPolararea", TcChartjsPolararea).directive("tcChartjsPie", TcChartjsPie).directive("tcChartjsDoughnut", TcChartjsDoughnut).directive("tcChartjsLegend", TcChartjsLegend).factory("TcChartjsFactory", TcChartjsFactory);
  9. function TcChartjs(TcChartjsFactory) {
  10. return new TcChartjsFactory();
  11. }
  12. TcChartjs.$inject = [ "TcChartjsFactory" ];
  13. function TcChartjsLine(TcChartjsFactory) {
  14. return new TcChartjsFactory("line");
  15. }
  16. TcChartjsLine.$inject = [ "TcChartjsFactory" ];
  17. function TcChartjsBar(TcChartjsFactory) {
  18. return new TcChartjsFactory("bar");
  19. }
  20. TcChartjsBar.$inject = [ "TcChartjsFactory" ];
  21. function TcChartjsRadar(TcChartjsFactory) {
  22. return new TcChartjsFactory("radar");
  23. }
  24. TcChartjsRadar.$inject = [ "TcChartjsFactory" ];
  25. function TcChartjsPolararea(TcChartjsFactory) {
  26. return new TcChartjsFactory("polararea");
  27. }
  28. TcChartjsPolararea.$inject = [ "TcChartjsFactory" ];
  29. function TcChartjsPie(TcChartjsFactory) {
  30. return new TcChartjsFactory("pie");
  31. }
  32. TcChartjsPie.$inject = [ "TcChartjsFactory" ];
  33. function TcChartjsDoughnut(TcChartjsFactory) {
  34. return new TcChartjsFactory("doughnut");
  35. }
  36. TcChartjsDoughnut.$inject = [ "TcChartjsFactory" ];
  37. function TcChartjsFactory() {
  38. return function(chartType) {
  39. var directive = {
  40. restrict: "A",
  41. scope: {
  42. data: "=chartData",
  43. options: "=chartOptions",
  44. type: "@chartType",
  45. legend: "=chartLegend",
  46. chart: "=chart"
  47. },
  48. link: link
  49. };
  50. return directive;
  51. function link($scope, $elem, $attrs) {
  52. var ctx = $elem[0].getContext("2d");
  53. var chart = new Chart(ctx);
  54. var chartObj;
  55. var showLegend = false;
  56. var autoLegend = false;
  57. var exposeChart = false;
  58. var legendElem = null;
  59. for (var attr in $attrs) {
  60. if (attr === "chartLegend") {
  61. showLegend = true;
  62. } else if (attr === "chart") {
  63. exposeChart = true;
  64. } else if (attr === "autoLegend") {
  65. autoLegend = true;
  66. }
  67. }
  68. $scope.$watch("data", function(value) {
  69. if (value) {
  70. if (chartObj) {
  71. chartObj.destroy();
  72. }
  73. if (chartType) {
  74. chartObj = chart[cleanChartName(chartType)]($scope.data, $scope.options);
  75. } else if ($scope.type) {
  76. chartObj = chart[cleanChartName($scope.type)]($scope.data, $scope.options);
  77. } else {
  78. throw "Error creating chart: Chart type required.";
  79. }
  80. if (showLegend) {
  81. $scope.legend = chartObj.generateLegend();
  82. }
  83. if (autoLegend) {
  84. if (legendElem) {
  85. legendElem.remove();
  86. }
  87. angular.element($elem[0]).after(chartObj.generateLegend());
  88. legendElem = angular.element($elem[0]).next();
  89. }
  90. if (exposeChart) {
  91. $scope.chart = chartObj;
  92. }
  93. }
  94. }, true);
  95. }
  96. function cleanChartName(type) {
  97. var typeLowerCase = type.toLowerCase();
  98. switch (typeLowerCase) {
  99. case "line":
  100. return "Line";
  101. case "bar":
  102. return "Bar";
  103. case "radar":
  104. return "Radar";
  105. case "polararea":
  106. return "PolarArea";
  107. case "pie":
  108. return "Pie";
  109. case "doughnut":
  110. return "Doughnut";
  111. default:
  112. return type;
  113. }
  114. }
  115. };
  116. }
  117. function TcChartjsLegend() {
  118. var directive = {
  119. restrict: "A",
  120. scope: {
  121. legend: "=chartLegend"
  122. },
  123. link: link
  124. };
  125. return directive;
  126. function link($scope, $elem) {
  127. $scope.$watch("legend", function(value) {
  128. if (value) {
  129. $elem.html(value);
  130. }
  131. }, true);
  132. }
  133. }
  134. })();