CM works overall dashboard integrate with gcc_office_portal
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

641 lines
26 KiB

2 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
  1. <!DOCTYPE html>
  2. <html lang="en" dir="">
  3. <html xmlns:th="http://www.thymeleaf.org">
  4. <head th:replace="~{fragments/modules/base/head :: head}"></head>
  5. <style>
  6. .chart-container {
  7. width: 100%;
  8. height: 350px;
  9. font-size: 12px;
  10. }
  11. @media (max-width: 768px) {
  12. .chart-container {
  13. height: 200px; /* Adjust height for mobile view */
  14. }
  15. }
  16. .highlight-red{
  17. color:red;
  18. }
  19. </style>
  20. <body>
  21. <link rel="stylesheet" href="/assets/node_modules/amcharts3/amcharts/plugins/export/export.css" type="text/css" media="all" />
  22. <!--[if lt IE 8]>
  23. <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
  24. <![endif]-->
  25. <div class="wrapper">
  26. <!-- header top menu Start -->
  27. <header th:replace="~{fragments/modules/base/header :: header}"></header>
  28. <!-- header top menu end -->
  29. <div class="page-wrap">
  30. <!--=============== Left Menu side Start ================-->
  31. <div th:replace="~{fragments/modules/base/menu :: menu}"></div>
  32. <!--=============== Left side End ================-->
  33. <div class="main-content">
  34. <div class="container-fluid">
  35. <div class="page-header mb-2">
  36. <div class="row align-items-end">
  37. <div class="col-lg-8">
  38. <div class="page-header-title">
  39. <i class="ik ik-bar-chart-2 bg-blue"></i>
  40. <div class="d-inline">
  41. <h5>CM Works</h5>
  42. <span>CM Works TradeLicense</span>
  43. </div>
  44. </div>
  45. </div>
  46. <div class="col-lg-4">
  47. <nav class="breadcrumb-container" aria-label="breadcrumb">
  48. <ol class="breadcrumb">
  49. <li class="breadcrumb-item">
  50. <a href="index"><i class="ik ik-home"></i></a>
  51. </li>
  52. <li class="breadcrumb-item active" aria-current="page">TradeLicense</li>
  53. </ol>
  54. </nav>
  55. </div>
  56. </div>
  57. </div>
  58. <h4 class="h4 text-right text-mute" style="font-size: 12px;">Auto refresh in <font id="refresh-countdown">00</font> seconds</h4>
  59. <div class="row">
  60. <div class="col-md-12">
  61. <div class="card sale-card">
  62. <div class="card-header">
  63. <h3>
  64. <i class="fas fa-chart-pie pr-2"></i><b>Trade Analysis:</b>
  65. </h3>
  66. </div>
  67. <div class="card-block" style="text-align:center;">
  68. <div class="col-sm-12 d-flex justify-content-center align-items-center mt-10 mb-30">
  69. <div class="row">
  70. <div class="col-sm-12 col-lg-6 mb-3" >
  71. <label class="pr-2" for="zone1" style="font-size:large;margin-bottom: 0px;"><b>Select Zone:</b></label>
  72. <select class="form-select custom-select" name="zone1" id="zone1" onchange="getDiv(this);">
  73. <option>---Select Zone---</option>
  74. </select>
  75. </div>
  76. <div class="col-sm-12 col-lg-6">
  77. <label for="division" class="pr-2" style="font-size:large;margin-bottom: 0px;"><b>Select Ward:</b></label>
  78. <select id="division" name="division" class="form-select custom-select">
  79. <option value="All">Overall Zone Wise</option>
  80. <!-- Add options dynamically -->
  81. </select>
  82. </div>
  83. </div>
  84. </div>
  85. <div class="col-12">
  86. <h4><b><span id="license_counts" class="highlight-red"></span> </b></h4>
  87. <h3 id="load_card" style="font-size:14px"></h3>
  88. <div id="newLicChart" class="chart-container" style= "height:450px; width:100%;">
  89. </div>
  90. </div>
  91. <hr>
  92. <div class="col-md-12">
  93. <h4><b><span id="license_amounts" class="highlight-red"></span> </b></h4>
  94. <div id="amtChart" class="chart-container" style= "height:600px; width:100%;"></div>
  95. </div>
  96. </div>
  97. </div>
  98. </div>
  99. </div>
  100. </div>
  101. </div>
  102. <footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
  103. </div>
  104. </div>
  105. <div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
  106. <script th:replace="~{fragments/modules/base/script :: script}"></script>
  107. <script src="/assets/node_modules/amcharts3/amcharts/amcharts.js"></script>
  108. <script src="/assets/node_modules/amcharts3/amcharts/serial.js"></script>
  109. <script src="/assets/node_modules/amcharts3/amcharts/plugins/export/export.min.js"></script>
  110. <script src="/assets/node_modules/amcharts3/amcharts/pie.js"></script>
  111. <script src="/assets/node_modules/amcharts3/amcharts/themes/light.js"></script>
  112. <script src="/assets/node_modules/amcharts3/amcharts/plugins/responsive/responsive.js"></script>
  113. <script src="/assets/node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min.js"></script>
  114. <script>
  115. var loading_text_msg = getLoadingMessage();
  116. const loading = $("#load_card");
  117. //This function To show the selected zone and division display in UI part
  118. function updateChartTitles() {
  119. const wardSelect = document.getElementById("division");
  120. const selectedWard = wardSelect.options[wardSelect.selectedIndex].text;
  121. const lic_count = document.getElementById("license_counts");
  122. const lic_amt = document.getElementById("license_amounts");
  123. lic_count.innerHTML = selectedWard;
  124. lic_amt.innerHTML = selectedWard;
  125. }
  126. var initialData = [];
  127. getZoneNo();
  128. updateChart();
  129. $("#zone1").change(function() {
  130. getDiv(this);
  131. });
  132. $("#division").change(function () {
  133. filterAndRenderCharts();
  134. //updateChart();
  135. });
  136. //Getting Zone No
  137. function getZoneNo() {
  138. $.ajax({
  139. type: "GET",
  140. url: '/gcc/api/works/getZoneNo',
  141. dataType: 'json',
  142. success: function (bodyMessage) {
  143. var tempJson = bodyMessage['ZoneDetailsResult'];
  144. //alert("tempJson---:"+tempJson);
  145. for (var i = 0; i < tempJson.length; i++) {
  146. var tempJsonValue = tempJson[i]['ZoneId'];
  147. //var tempJsonValue = tempJson[i]['ZoneName'].replace('N', '');
  148. var tempJsonLabel = tempJson[i]['ZoneName'].replace('N', '');
  149. $('#zone1').append("<option value='" + tempJsonValue + "'>" + tempJsonLabel + "</option>");
  150. }
  151. }, error: function (e, ts, et) {
  152. // alert(ts)
  153. }
  154. });
  155. }
  156. //Getting Div
  157. function getDiv($this) {
  158. $('#division').empty(); // Clear existing options
  159. $('#division').append("<option value='All'>OverAll Zone Wise</option>"); // Add 'All' option
  160. var zoneId = $this.value;
  161. //var zone = $this.value;
  162. //alert("zone---:"+zone);
  163. $.ajax({
  164. type: "GET",
  165. url: '/gcc/api/works/getDiv',
  166. data: {'zoneId': zoneId},
  167. dataType: 'json',
  168. success: function (bodyMessage) {
  169. var tempJson = bodyMessage['DivisionDetailsResult'];
  170. for (var i = 0; i < tempJson.length; i++)
  171. {
  172. var tempJsonValue = tempJson[i]['DivisionName'];
  173. //var tempJsonValue = tempJson[i]['DivisionId'];
  174. var tempJsonLabel = tempJson[i]['DivisionName'];
  175. $('#division').append("<option value='" + tempJsonValue + "'>" + tempJsonLabel + "</option>");
  176. }
  177. }, error: function (e, ts, et) {
  178. // alert(ts)
  179. }
  180. });
  181. }
  182. function updateChart() {
  183. const divisionName = $("#division").val();
  184. //console.log("Selected region:", divisionName);
  185. updateChartTitles();
  186. // Show loading animation
  187. loading.html(searchinfo("<b>" + loading_text_msg + "</b>"));
  188. call_loading('newLicChart', 'amtChart', 'start');
  189. // Clear existing charts
  190. $("#newLicChart").html("");
  191. $("#amtChart").html("");
  192. $.ajax({
  193. url: '/gcc/api/works/getTradelicenseReports', // Corrected endpoint URL
  194. type: 'GET',
  195. data: { divisionName: divisionName }, // Send regionName parameter
  196. success: function(response) {
  197. //console.log('Data from API:', response);
  198. initialData = response;
  199. filterAndRenderCharts();
  200. //renderCharts(response);
  201. },
  202. error: function(error) {
  203. console.error("Error fetching data:", error);
  204. // Hide loading animation on error
  205. loading.html("");
  206. call_loading('newLicChart', 'amtChart', 'stop');
  207. }
  208. });
  209. }
  210. function filterAndRenderCharts() {
  211. updateChartTitles();
  212. const divisionName = $("#division").val();
  213. //console.log("selected division",divisionName);
  214. let filteredData = initialData;
  215. if (divisionName !== 'All') {
  216. filteredData = initialData.filter(item => item.WARD === divisionName);
  217. }
  218. renderCharts(filteredData);
  219. }
  220. function formatValue(value) {
  221. if (value >= 1e9) {
  222. return (value / 1e9).toFixed(2) + ' Billion';
  223. } else if (value >= 1e7) {
  224. return (value / 1e7).toFixed(2) + ' Crore';
  225. } else if (value >= 1e6) {
  226. return (value / 1e6).toFixed(2) + ' Million';
  227. } else if (value >= 1e5) {
  228. return (value / 1e5).toFixed(2) + ' Lakh';
  229. } else if (value >= 1e4) {
  230. return (value / 1e4).toFixed(2) + ' Thousand';
  231. }
  232. return value.toFixed(2);
  233. }
  234. function renderCharts(data) {
  235. if (data.length === 1 && data[0].REGION === 'All') {
  236. // Calculate total sum for all regions
  237. const totalNewLic = data.reduce((sum, item) => sum + item.NEW_LIC, 0);
  238. const totalRenWithPenalty = data.reduce((sum, item) => sum + item.REN_WITH_PENALTY, 0);
  239. const totalRenWithoutPenalty = data.reduce((sum, item) => sum + item.REN_WITH_OUT_PENALTY, 0);
  240. const totalNonRenewed = data.reduce((sum, item) => sum + item.NON_RENEWED, 0);
  241. const totalNewLicAmt = data.reduce((sum, item) => sum + item.NEW_LIC_AMT, 0);
  242. const totalRenWithPenaltyAmt = data.reduce((sum, item) => sum + item.REN_WITH_PENALTY_AMT, 0);
  243. const totalRenWithoutPenaltyAmt = data.reduce((sum, item) => sum + item.REN_WITH_OUT_PENALTY_AMT, 0);
  244. const totalNonRenewedAmt = data.reduce((sum, item) => sum + item.NONRNWDCNTAMT, 0);
  245. // Create chart data for 'total counts'
  246. const collectionsChartData = [{
  247. //zone: 'All',
  248. zone: divisionName === 'All' ? 'All' : divisionName,
  249. newLic: totalNewLic,
  250. renWithPenalty: totalRenWithPenalty,
  251. renWithoutPenalty: totalRenWithoutPenalty,
  252. nonRenewed: totalNonRenewed
  253. }];
  254. // Create chart data for 'total amounts'
  255. const amountsChartData = [{
  256. //zone: 'All',
  257. zone: divisionName === 'All' ? 'All' : divisionName,
  258. newLicamt: totalNewLicAmt,
  259. renWithPenaltyamt: totalRenWithPenaltyAmt,
  260. renWithoutPenaltyamt: totalRenWithoutPenaltyAmt,
  261. nonRenewedamt: totalNonRenewedAmt
  262. }];
  263. // Render charts
  264. renderColumnChart("newLicChart", collectionsChartData);
  265. renderColumnChartAmt("amtChart", amountsChartData, );
  266. } else {
  267. // Group data by zone and calculate totals
  268. const zoneData = data.reduce((acc, item) => {
  269. if (!acc[item.ZONE]) {
  270. acc[item.ZONE] = {
  271. newLic: 0,
  272. renWithPenalty: 0,
  273. renWithoutPenalty: 0,
  274. nonRenewed: 0,
  275. newLicamt: 0,
  276. renWithPenaltyamt: 0,
  277. renWithoutPenaltyamt: 0,
  278. nonRenewedamt: 0
  279. };
  280. }
  281. acc[item.ZONE].newLic += item.NEW_LIC;
  282. acc[item.ZONE].renWithPenalty += item.REN_WITH_PENALTY;
  283. acc[item.ZONE].renWithoutPenalty += item.REN_WITH_OUT_PENALTY;
  284. acc[item.ZONE].nonRenewed += item.NON_RENEWED;
  285. acc[item.ZONE].newLicamt += item.NEW_LIC_AMT;
  286. acc[item.ZONE].renWithPenaltyamt += item.REN_WITH_PENALTY_AMT;
  287. acc[item.ZONE].renWithoutPenaltyamt += item.REN_WITH_OUT_PENALTY_AMT;
  288. acc[item.ZONE].nonRenewedamt += item.NONRNWDCNTAMT;
  289. return acc;
  290. }, {});
  291. // Convert to array format for charts
  292. const collectionsChartData = Object.keys(zoneData).map(zone => ({
  293. zone: zone,
  294. newLic: zoneData[zone].newLic,
  295. renWithPenalty: zoneData[zone].renWithPenalty,
  296. renWithoutPenalty: zoneData[zone].renWithoutPenalty,
  297. nonRenewed: zoneData[zone].nonRenewed
  298. }));
  299. const amountsChartData = Object.keys(zoneData).map(zone => ({
  300. zone: zone,
  301. newLicamt: zoneData[zone].newLicamt,
  302. renWithPenaltyamt: zoneData[zone].renWithPenaltyamt,
  303. renWithoutPenaltyamt: zoneData[zone].renWithoutPenaltyamt,
  304. nonRenewedamt: zoneData[zone].nonRenewedamt
  305. }));
  306. // Render charts
  307. renderColumnChart("newLicChart", collectionsChartData);
  308. renderColumnChartAmt("amtChart", amountsChartData, );
  309. }
  310. loading.html("");
  311. call_loading('newLicChart', 'amtChart', 'stop');
  312. }
  313. function renderColumnChart(elementId, chartData) {
  314. AmCharts.makeChart(elementId, {
  315. "type": "serial",
  316. "theme": "light",
  317. "dataProvider": chartData,
  318. "startEffect":"easeOutSine",
  319. "startDuration": 1,
  320. "valueAxes": [{
  321. "id": "v1",
  322. "position": "left",
  323. "autoGridCount": false,
  324. "labelFunction": function (value) {
  325. return value;
  326. }
  327. }],
  328. "graphs": [
  329. {
  330. "id": "g1",
  331. "valueAxis": "v1",
  332. "lineColor": "#2ed8b6",
  333. "fillColors": "#2ed8b6",
  334. "type": "column",
  335. "fillAlphas": 0.8,
  336. "title": "New License",
  337. "valueField": "newLic",
  338. "labelPosition":"right",
  339. "labelRotation": 270,
  340. "labelText":"[[[[value]]]]",
  341. "balloonText": "[[[[title]]]]<br><span style='font-size:14px'><b>[[[[value]]]]</b> ([[[[percents]]]]%)</span>",
  342. },
  343. {
  344. "id": "g2",
  345. "valueAxis": "v1",
  346. "lineColor": "#F22613",
  347. "fillColors": "#F22613",
  348. "type": "column",
  349. "fillAlphas": 0.8,
  350. "title": "Rent With Penalty",
  351. "valueField": "renWithPenalty",
  352. "labelPosition":"right",
  353. "labelRotation": 270,
  354. "labelText":"[[[[value]]]]",
  355. "balloonText": "[[[[title]]]]<br><span style='font-size:14px'><b>[[[[value]]]]</b> ([[[[percents]]]]%)</span>",
  356. },
  357. {
  358. "id": "g3",
  359. "valueAxis": "v1",
  360. "lineColor": "#FFC107",
  361. "fillColors": "#FFC107",
  362. "type": "column",
  363. "fillAlphas": 0.8,
  364. "title": "Rent Without Penalty",
  365. "valueField": "renWithoutPenalty",
  366. "labelPosition":"top",
  367. "labelRotation": 270,
  368. "labelText":"[[[[value]]]]",
  369. "balloonText": "[[[[title]]]]<br><span style='font-size:14px'><b>[[[[value]]]]</b> ([[[[percents]]]]%)</span>",
  370. },
  371. {
  372. "id": "g4",
  373. "valueAxis": "v1",
  374. "lineColor": "#8E44AD",
  375. "fillColors": "#8E44AD",
  376. "type": "column",
  377. "fillAlphas": 0.8,
  378. "title": "Non Renewed",
  379. "valueField": "nonRenewed",
  380. "labelPosition":"right",
  381. "labelRotation": 270,
  382. "labelText":"[[[[value]]]]",
  383. "balloonText": "[[[[title]]]]<br><span style='font-size:14px'><b>[[[[value]]]]</b> ([[[[percents]]]]%)</span>",
  384. }
  385. ],
  386. "chartCursor": {
  387. "pan": true,
  388. "valueLineEnabled": true,
  389. "valueLineBalloonEnabled": true,
  390. "cursorAlpha": 0,
  391. "valueLineAlpha": 0.2
  392. },
  393. "categoryField": "zone",
  394. "categoryAxis": {
  395. "gridPosition": "start",
  396. "axisAlpha": 0,
  397. "tickLength": 0
  398. },
  399. "legend": {
  400. "useGraphSettings": true,
  401. "position": "bottom",
  402. "spacing":350,
  403. "markerType":"diamond"
  404. },
  405. "balloon": {
  406. "borderThickness": 2,
  407. "shadowAlpha": 0
  408. },
  409. "export": {
  410. "enabled": true,
  411. "position":"top-right"
  412. },
  413. "titles": [{
  414. "text": "Trade License collection Chart",
  415. "size": 20
  416. }],
  417. });
  418. }
  419. function renderColumnChartAmt(elementId,chartData) {
  420. AmCharts.makeChart(elementId, {
  421. "type": "serial",
  422. "theme": "light",
  423. "dataProvider": chartData,
  424. "startEffect":"easeOutSine",
  425. "startDuration": 1,
  426. "valueAxes": [{
  427. "id": "v1",
  428. "position": "left",
  429. "gridAlpha":0,
  430. "autoGridCount": false,
  431. "labelFunction": function (value) {
  432. return formatValue(value);
  433. }
  434. }],
  435. "graphs": [
  436. {
  437. "id": "g1",
  438. "valueAxis": "v1",
  439. "lineColor": "#2ed8b6",
  440. "fillColors": "#2ed8b6",
  441. "type": "column",
  442. "fillAlphas": 0.8,
  443. //"columnWidth":0.9,
  444. "title": "New License Amt",
  445. "valueField": "newLicamt",
  446. "labelText":"[[[[value]]]]",
  447. "balloonText": "[[[[title]]]]<br><span style='font-size:14px'><b>[[[[value]]]]</b> ([[[[percents]]]]%)</span>",
  448. "labelFunction": function(graphDataItem) {
  449. return formatValue(graphDataItem.values.value);
  450. },
  451. "labelPosition":"right",
  452. "labelRotation": 270,
  453. "balloonFunction": function(graphDataItem, graph) {
  454. return "<b>" + graph.title + "</b><br />" + formatValue(graphDataItem.values.value);
  455. }
  456. },
  457. {
  458. "id": "g2",
  459. "valueAxis": "v1",
  460. "lineColor": "#F22613",
  461. "fillColors": "#F22613",
  462. "type": "column",
  463. "fillAlphas": 0.8,
  464. //"columnWidth":0.9,
  465. "title": "Rent With Penalty Amt",
  466. "valueField": "renWithPenaltyamt",
  467. "labelText":"[[[[value]]]]",
  468. "labelPosition":"right",
  469. "labelFunction": function(graphDataItem) {
  470. return formatValue(graphDataItem.values.value);
  471. },
  472. "labelRotation": 270,
  473. "balloonFunction": function(graphDataItem, graph) {
  474. return "<b>" + graph.title + "</b><br />" + formatValue(graphDataItem.values.value);
  475. },
  476. "balloonText": "[[[[title]]]]<br><span style='font-size:14px'><b>[[[[value]]]]</b> ([[[[percents]]]]%)</span>",
  477. },
  478. {
  479. "id": "g3",
  480. "valueAxis": "v1",
  481. "lineColor": "#FFC107",
  482. "fillColors": "#FFC107",
  483. "type": "column",
  484. "fillAlphas": 0.8,
  485. // "columnWidth":0.9,
  486. "title": "Rent Without Penalty Amt",
  487. "valueField": "renWithoutPenaltyamt",
  488. "labelText":"[[[[value]]]]",
  489. "labelPosition":"top",
  490. "balloonText": "[[[[title]]]]<br><span style='font-size:14px'><b>[[[[value]]]]</b> ([[[[percents]]]]%)</span>",
  491. "labelFunction": function(graphDataItem) {
  492. return formatValue(graphDataItem.values.value);
  493. },
  494. "labelRotation": 270,
  495. "balloonFunction": function(graphDataItem, graph) {
  496. return "<b>" + graph.title + "</b><br />" + formatValue(graphDataItem.values.value);
  497. }
  498. },
  499. {
  500. "id": "g4",
  501. "valueAxis": "v1",
  502. "lineColor": "#8E44AD",
  503. "fillColors": "#8E44AD",
  504. "type": "column",
  505. "fillAlphas": 0.8,
  506. //"columnWidth":0.9,
  507. "title": "Non Renewed Amt",
  508. "valueField": "nonRenewedamt",
  509. "labelText":"[[[[value]]]]",
  510. "labelPosition":"right",
  511. "balloonText": "[[[[title]]]]<br><span style='font-size:14px'><b>[[[[value]]]]</b> ([[[[percents]]]]%)</span>",
  512. "labelFunction": function(graphDataItem) {
  513. return formatValue(graphDataItem.values.value);
  514. },
  515. "labelRotation": 270,
  516. "balloonFunction": function(graphDataItem, graph) {
  517. return "<b>" + graph.title + "</b><br />" + formatValue(graphDataItem.values.value);
  518. }
  519. }
  520. ],
  521. //"rotate":true,
  522. "chartCursor": {
  523. "pan": true,
  524. "valueLineEnabled": true,
  525. "valueLineBalloonEnabled": true,
  526. "cursorAlpha": 0,
  527. "valueLineAlpha": 0.2
  528. },
  529. "categoryField": "zone",
  530. "categoryAxis": {
  531. "gridPosition": "start",
  532. //"axisAlpha": 0,
  533. "tickLength": 0
  534. },
  535. "legend": {
  536. "useGraphSettings": true,
  537. "position": "bottom",
  538. "spacing":350,
  539. "markerType":"diamond",
  540. "valueWidth":100,
  541. "labelWidth":100
  542. },
  543. "balloon": {
  544. "borderThickness": 2,
  545. "shadowAlpha": 0
  546. },
  547. "export": {
  548. "enabled": true,
  549. "position":"top-right"
  550. },
  551. "titles": [{
  552. "text": "Trade License Amount Chart",
  553. "size": 20
  554. }],
  555. });
  556. }
  557. </script>
  558. </body>
  559. </html>