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.

844 lines
29 KiB

3 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. <body>
  6. <style>
  7. html {
  8. -webkit-text-size-adjust: none;
  9. /* Prevent font scaling in landscape */
  10. width: 100%;
  11. height: 100%;
  12. -webkit-font-smoothing: antialiased;
  13. -moz-font-smoothing: antialiased;
  14. -moz-osx-font-smoothing: grayscale;
  15. }
  16. input[type="submit"] {
  17. -webkit-appearance: none;
  18. }
  19. *,
  20. *:after,
  21. *:before {
  22. box-sizing: border-box;
  23. margin: 0;
  24. padding: 0;
  25. }
  26. body {
  27. margin: 0;
  28. padding: 0;
  29. -webkit-font-smoothing: antialiased;
  30. font-family: 'Muli', sans-serif;
  31. font-weight: 400;
  32. width: 100%;
  33. min-height: 100%;
  34. color: #333333;
  35. width: 100%;
  36. height: 100%;
  37. background: #ecf0f4;
  38. }
  39. a {
  40. outline: none;
  41. text-decoration: none;
  42. color: #555;
  43. }
  44. a:hover,
  45. a:focus {
  46. outline: none;
  47. text-decoration: none;
  48. }
  49. img {
  50. border: 0;
  51. }
  52. input,
  53. textarea,
  54. select {
  55. outline: none;
  56. resize: none;
  57. font-family: 'Muli', sans-serif;
  58. }
  59. a,
  60. input,
  61. button {
  62. outline: none !important;
  63. }
  64. button::-moz-focus-inner {
  65. border: 0;
  66. }
  67. h1,
  68. h2,
  69. h3,
  70. h4,
  71. h5,
  72. h6 {
  73. margin: 0;
  74. padding: 0;
  75. font-weight: 700;
  76. color: #202342;
  77. font-family: 'Muli', sans-serif;
  78. }
  79. img {
  80. border: 0;
  81. vertical-align: top;
  82. max-width: 100%;
  83. height: auto;
  84. }
  85. ul,
  86. ol {
  87. margin: 0;
  88. padding: 0;
  89. list-style: none;
  90. }
  91. p {
  92. margin: 0 0 15px 0;
  93. padding: 0;
  94. }
  95. .container-fluid {
  96. max-width: 1900px;
  97. }
  98. /* Common Class */
  99. .pd-5 {
  100. padding: 5px;
  101. }
  102. .pd-10 {
  103. padding: 10px;
  104. }
  105. .pd-20 {
  106. padding: 20px;
  107. }
  108. .pd-30 {
  109. padding: 30px;
  110. }
  111. .pb-10 {
  112. padding-bottom: 10px;
  113. }
  114. .pb-20 {
  115. padding-bottom: 20px;
  116. }
  117. .pb-30 {
  118. padding-bottom: 30px;
  119. }
  120. .pt-10 {
  121. padding-top: 10px;
  122. }
  123. .pt-20 {
  124. padding-top: 20px;
  125. }
  126. .pt-30 {
  127. padding-top: 30px;
  128. }
  129. .pr-10 {
  130. padding-right: 10px;
  131. }
  132. .pr-20 {
  133. padding-right: 20px;
  134. }
  135. .pr-30 {
  136. padding-right: 30px;
  137. }
  138. .pl-10 {
  139. padding-left: 10px;
  140. }
  141. .pl-20 {
  142. padding-left: 20px;
  143. }
  144. .pl-30 {
  145. padding-left: 30px;
  146. }
  147. .px-30 {
  148. padding-left: 30px;
  149. padding-right: 30px;
  150. }
  151. .px-20 {
  152. padding-left: 20px;
  153. padding-right: 20px;
  154. }
  155. .py-30 {
  156. padding-top: 30px;
  157. padding-bottom: 30px;
  158. }
  159. .py-20 {
  160. padding-top: 20px;
  161. padding-bottom: 20px;
  162. }
  163. .mb-30 {
  164. margin-bottom: 30px;
  165. }
  166. .mb-50 {
  167. margin-bottom: 50px;
  168. }
  169. .font-30 {
  170. font-size: 30px;
  171. line-height: 1.46em;
  172. }
  173. .font-24 {
  174. font-size: 24px;
  175. line-height: 1.5em;
  176. }
  177. .font-20 {
  178. font-size: 20px;
  179. line-height: 1.5em;
  180. }
  181. .font-18 {
  182. font-size: 18px;
  183. line-height: 1.6em;
  184. }
  185. .font-16 {
  186. font-size: 16px;
  187. line-height: 1.75em;
  188. }
  189. .font-14 {
  190. font-size: 14px;
  191. line-height: 1.85em;
  192. }
  193. .font-12 {
  194. font-size: 12px;
  195. line-height: 2em;
  196. }
  197. .weight-300 {
  198. font-weight: 300;
  199. }
  200. .weight-400 {
  201. font-weight: 400;
  202. }
  203. .weight-500 {
  204. font-weight: 500;
  205. }
  206. .weight-600 {
  207. font-weight: 600;
  208. }
  209. .weight-700 {
  210. font-weight: 700;
  211. }
  212. .weight-800 {
  213. font-weight: 800;
  214. }
  215. .text-blue {
  216. color: #1b00ff;
  217. }
  218. .text-dark {
  219. color: #000000;
  220. }
  221. .text-white {
  222. color: #ffffff;
  223. }
  224. .height-100-p {
  225. height: 100%;
  226. }
  227. .bg-white {
  228. background: #ffffff;
  229. }
  230. .border-radius-10 {
  231. -webkit-border-radius: 10px;
  232. -moz-border-radius: 10px;
  233. border-radius: 10px;
  234. }
  235. .border-radius-100 {
  236. -webkit-border-radius: 100%;
  237. -moz-border-radius: 100%;
  238. border-radius: 100%;
  239. }
  240. .box-shadow {
  241. -webkit-box-shadow: 0px 0px 28px rgba(0, 0, 0, .08);
  242. -moz-box-shadow: 0px 0px 28px rgba(0, 0, 0, .08);
  243. box-shadow: 0px 0px 28px rgba(0, 0, 0, .08);
  244. }
  245. .gradient-style1 {
  246. background-image: linear-gradient(135deg, #43CBFF 10%, #9708CC 100%);
  247. }
  248. .gradient-style2 {
  249. background-image: linear-gradient(135deg, #72EDF2 10%, #5151E5 100%);
  250. }
  251. .gradient-style3 {
  252. background-image: radial-gradient(circle 732px at 96.2% 89.9%, rgba(70, 66, 159, 1) 0%, rgba(187, 43, 107, 1) 92%);
  253. }
  254. .gradient-style4 {
  255. background-image: linear-gradient(135deg, #FF9D6C 10%, #BB4E75 100%);
  256. }
  257. /* widget style 1 */
  258. .widget-style1 {
  259. padding: 20px 10px;
  260. }
  261. .widget-style1 .circle-icon {
  262. width: 60px;
  263. }
  264. .widget-style1 .circle-icon .icon {
  265. width: 60px;
  266. height: 60px;
  267. background: #ecf0f4;
  268. display: flex;
  269. align-items: center;
  270. justify-content: center;
  271. }
  272. .widget-style1 .widget-data {
  273. width: calc(100% - 150px);
  274. padding: 0 15px;
  275. }
  276. .widget-style1 .progress-data {
  277. width: 90px;
  278. }
  279. .widget-style1 .progress-data .apexcharts-canvas {
  280. margin: 0 auto;
  281. }
  282. .widget-style2 .widget-data {
  283. padding: 20px;
  284. }
  285. .widget-style3 {
  286. padding: 30px 20px;
  287. }
  288. .widget-style3 .widget-data {
  289. width: calc(100% - 60px);
  290. }
  291. .widget-style3 .widget-icon {
  292. width: 60px;
  293. font-size: 45px;
  294. line-height: 1;
  295. }
  296. .apexcharts-legend-marker {
  297. margin-right: 6px !important;
  298. }
  299. </style>
  300. <!--[if lt IE 8]>
  301. <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>
  302. <![endif]-->
  303. <div class="wrapper">
  304. <!-- header top menu Start -->
  305. <header th:replace="~{fragments/modules/base/header :: header}"></header>
  306. <!-- header top menu end -->
  307. <div class="page-wrap">
  308. <!--=============== Left Menu side Start ===================-->
  309. <div th:replace="~{fragments/modules/base/menu :: menu}"></div>
  310. <!--=============== Left side End ================-->
  311. <div class="main-content">
  312. <div class="container-fluid">
  313. <div class="page-header">
  314. <div class="row align-items-end">
  315. <div class="col-4">
  316. <div class="page-header-title">
  317. <i class='fa fa-tachometer-alt' style='font-size:24px; color: #1aafd4'></i>
  318. <div class="d-inline">
  319. <h6>Pet Dashboard</h6>
  320. <span>Pet Registration</span>
  321. </div>
  322. </div>
  323. </div>
  324. <div class="col-1">
  325. <i class="fa fa-user" aria-hidden="true"><p id="UserCount"></p></i>
  326. </div>
  327. <!-- <div class="col-2">
  328. <p class="block-title">Users</p>
  329. </div> -->
  330. <div class="col-2">
  331. <select type="text" class="form-control text-center" name="zone" id="zone">
  332. <option value="0">All Zone</option>
  333. <option value="1" th:selected="${zone=='1'}">Zone 1</option>
  334. <option value="2" th:selected="${zone=='2'}">Zone 2</option>
  335. <option value="3" th:selected="${zone=='3'}">Zone 3</option>
  336. <option value="4" th:selected="${zone=='4'}">Zone 4</option>
  337. <option value="5" th:selected="${zone=='5'}">Zone 5</option>
  338. <option value="6" th:selected="${zone=='6'}">Zone 6</option>
  339. <option value="7" th:selected="${zone=='7'}">Zone 7</option>
  340. <option value="8" th:selected="${zone=='8'}">Zone 8</option>
  341. <option value="9" th:selected="${zone=='9'}">Zone 9</option>
  342. <option value="10" th:selected="${zone=='10'}">Zone 10</option>
  343. <option value="11" th:selected="${zone=='11'}">Zone 11</option>
  344. <option value="12" th:selected="${zone=='12'}">Zone 12</option>
  345. <option value="13" th:selected="${zone=='13'}">Zone 13</option>
  346. <option value="14" th:selected="${zone=='14'}">Zone 14</option>
  347. <option value="15" th:selected="${zone=='15'}">Zone 15</option>
  348. </select>
  349. </div>
  350. <div class="col-2">
  351. <button type="submit" class="btn btn-sm btn-primary" onclick="getByZone()"
  352. id="submit">Submit</button>
  353. </div>
  354. <div class="col-lg-3">
  355. <nav class="breadcrumb-container" aria-label="breadcrumb">
  356. <ol class="breadcrumb">
  357. <li class="breadcrumb-item">
  358. <a href="/index"><i class="ik ik-home"></i></a>
  359. </li>
  360. <li class="breadcrumb-item">Pet Registration</li>
  361. <li class="breadcrumb-item">Dashboard</li>
  362. </ol>
  363. </nav>
  364. </div>
  365. </div>
  366. <br>
  367. <br>
  368. <div class="content">
  369. <div class="block block-rounded">
  370. </div>
  371. <div class="block-content p-0">
  372. <div class="row">
  373. <div class="col-sm-6 col-lg-6 mb-50">
  374. <div class="row">
  375. <div class="col-sm-12 col-lg-6 mb-50">
  376. <div
  377. class="bg-white box-shadow border-radius-10 height-100-p widget-style1">
  378. <div class="d-flex flex-wrap align-items-center">
  379. <div class="circle-icon">
  380. <div class="icon border-radius-100 font-24 text-blue">
  381. <i class="far fa-file" aria-hidden="true"></i>
  382. </div>
  383. </div>
  384. <div class="widget-data">
  385. <div class="weight-800 font-18" id="totalRegPets"></div>
  386. <div class="weight-500">Reg Pets</div>
  387. </div>
  388. </div>
  389. </div>
  390. </div>
  391. <div class="col-sm-12 col-lg-6 mb-50">
  392. <div
  393. class="bg-white box-shadow border-radius-10 height-100-p widget-style1">
  394. <div class="d-flex flex-wrap align-items-center">
  395. <div class="circle-icon">
  396. <div class="icon border-radius-100 font-24 text-blue"><i
  397. class='fas fa-calendar-minus'></i></div>
  398. </div>
  399. <div class="widget-data">
  400. <div class="weight-800 font-18" id="totalInprogcount"></div>
  401. <div class="weight-500">Review Pending</div>
  402. </div>
  403. </div>
  404. </div>
  405. </div>
  406. </div>
  407. <div class="row">
  408. <div class="col-sm-6 col-lg-6 mb-50">
  409. <div
  410. class="bg-white box-shadow border-radius-10 height-100-p widget-style1">
  411. <div class="d-flex flex-wrap align-items-center">
  412. <div class="circle-icon">
  413. <div class="icon border-radius-100 font-24 text-blue">
  414. <i class="fa fa-times-circle"></i>
  415. </div>
  416. </div>
  417. <div class="widget-data">
  418. <div class="weight-800 font-18" id="totalRejCount"></div>
  419. <div class="weight-500">Rejected Pets</div>
  420. </div>
  421. </div>
  422. </div>
  423. </div>
  424. <div class="col-sm-6 col-lg-6 mb-50">
  425. <div
  426. class="bg-white box-shadow border-radius-10 height-100-p widget-style1">
  427. <div class="d-flex flex-wrap align-items-center">
  428. <div class="circle-icon">
  429. <div class="icon border-radius-100 font-24 text-blue"><i
  430. class="fa fa-paw" aria-hidden="true"></i>
  431. </div>
  432. </div>
  433. <div class="widget-data">
  434. <div class="weight-800 font-18" id="totalpets"></div>
  435. <div class="weight-500">Total Pets</div>
  436. </div>
  437. </div>
  438. </div>
  439. </div>
  440. </div>
  441. <div class="row">
  442. <div class="col-sm-6 col-lg-6 mb-50" id="licIssuedHide">
  443. <div
  444. class="bg-white box-shadow border-radius-10 height-100-p widget-style1">
  445. <div class="d-flex flex-wrap align-items-center">
  446. <div class="circle-icon">
  447. <div class="icon border-radius-100 font-24 text-blue"><i
  448. class="fa fa-paper-plane" aria-hidden="true"></i>
  449. </div>
  450. </div>
  451. <div class="widget-data">
  452. <div class="weight-800 font-18" id="totallicCount"></div>
  453. <div class="weight-500">Licensed issued</div>
  454. </div>
  455. </div>
  456. </div>
  457. </div>
  458. <div class="col-sm-6 col-lg-6 mb-50">
  459. <div
  460. class="bg-white box-shadow border-radius-10 height-100-p widget-style1">
  461. <div class="d-flex flex-wrap align-items-center">
  462. <div class="circle-icon">
  463. <div class="icon border-radius-100 font-24 text-blue"><i
  464. class="fas fa-file-excel"
  465. aria-hidden="true"></i></div>
  466. </div>
  467. <div class="widget-data">
  468. <div class="weight-800 font-18" id="explicCount"></div>
  469. <div class="weight-500">License expired</div>
  470. </div>
  471. </div>
  472. </div>
  473. </div>
  474. </div>
  475. </div>
  476. <div class="col-md-6 mb-4">
  477. <div class="card">
  478. <div class="card-body">
  479. <div id="totalpetpiechart"></div>
  480. <div class="weight-800 font-18" id="totalpet"></div>
  481. <div class="weight-500">Total Pet Status count</div>
  482. </div>
  483. </div>
  484. </div>
  485. </div>
  486. <div class="row">
  487. <div class="col-md-5">
  488. <div class="card">
  489. <div class="card-body">
  490. <div id="Dogpiechart"></div>
  491. <!-- <div class="weight-800 font-18" th:text="${dogTotalCount}"></div> -->
  492. <div class="weight-800 font-18" id="dogTotal"></div>
  493. <div class="weight-500">Total Dog count</div>
  494. </div>
  495. </div>
  496. </div>
  497. <div class="col-md-5">
  498. <div class="card">
  499. <div class="card-body">
  500. <div id="Catpiechart"></div>
  501. <!-- <div class="weight-800 font-18" th:text="${catTotalCount}" id="catTotal"></div> -->
  502. <div class="weight-800 font-18" id="catTotal"></div>
  503. <div class="weight-500">Total cat count</div>
  504. </div>
  505. </div>
  506. </div>
  507. </div>
  508. </div>
  509. </div>
  510. </div>
  511. <!-- END Page Content -->
  512. </main>
  513. <!-- END Main Container -->
  514. <!-- Footer -->
  515. </div>
  516. </div>
  517. </div>
  518. </div>
  519. </div>
  520. </body>
  521. <div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
  522. <script th:replace="~{fragments/modules/base/script :: script}"></script>
  523. <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  524. <script th:inline="javascript">
  525. var x, y,userCount,licCount;
  526. convert();
  527. function convert() {
  528. var m = /*[[${dash}]]*/ {};
  529. console.log(m);
  530. x = /*[[${dash.dog}]]*/ {};
  531. y = /*[[${dash.cat}]]*/ {};
  532. userCount = /*[[${dash.userCount}]]*/ {};
  533. licCount= /*[[${dash.licCount}]]*/ {};
  534. }
  535. var totalexpired = x['4'] + y['4'];
  536. var totalrejected = x['3'] + y['3'];
  537. var totalLicensed = x['2'] + y['2'];
  538. var totalPayment = x['1'] + y['1'];
  539. var totalinprog = x['0'] + y['0'];
  540. document.getElementById("totalpet").innerHTML = x['200'] + y['200'];
  541. var catexpired = y['4'];
  542. var catrejected = y['3'];
  543. var catLicensed = y['2'];
  544. var catPayment = y['1'];
  545. var catinprog = y['0'];
  546. var catTotal = y['200'];
  547. document.getElementById("catTotal").innerHTML = catTotal;
  548. var dogexpired = x['4'];
  549. var dogrejected = x['3'];
  550. var dogLicensed = x['2'];
  551. var dogPayment = x['1'];
  552. var doginprog = x['0'];
  553. var dogTotal = x['200'];
  554. document.getElementById("dogTotal").innerHTML = dogTotal;
  555. document.getElementById("UserCount").innerHTML = userCount;
  556. document.getElementById("totalRegPets").innerHTML = x['200'] + y['200'];
  557. document.getElementById("totalInprogcount").innerHTML = totalinprog;
  558. document.getElementById("totalRejCount").innerHTML = totalrejected;
  559. document.getElementById("totalpets").innerHTML = totalLicensed;
  560. document.getElementById("explicCount").innerHTML = totalexpired;
  561. document.getElementById("totallicCount").innerHTML = licCount;
  562. google.charts.load('current', { 'packages': ['corechart'] });
  563. google.charts.setOnLoadCallback(drawChart2);
  564. // Draw the chart and set the chart values
  565. function drawChart2() {
  566. var data = google.visualization.arrayToDataTable([
  567. ['Total', 'Hours per Day'],
  568. ['InProgress', totalinprog],
  569. ['Payment', totalPayment],
  570. ['License Issued', totalLicensed],
  571. ['Rejected', totalrejected],
  572. ['Expired', totalexpired],
  573. //['Total Pets', totalInCount]
  574. ]);
  575. // Optional; add a title and set the width and height of the chart
  576. var options = {
  577. 'title': 'OverAll pet Info', legend: 'bottom', 'height': 500,
  578. colors: ['#f4ca47', '#0ebce0', '#aae00e', '#053a4c', '#0ee0ad'],
  579. };
  580. // Display the chart inside the <div> element with id="piechart"
  581. var chart = new google.visualization.PieChart(document.getElementById('totalpetpiechart'));
  582. chart.draw(data, options);
  583. }
  584. //total Dog count piechart
  585. //console.log("dogTotal:"+dogTotal);
  586. google.charts.load('current', { 'packages': ['corechart'] });
  587. google.charts.setOnLoadCallback(drawChart);
  588. // Draw the chart and set the chart values
  589. function drawChart() {
  590. var data = google.visualization.arrayToDataTable([
  591. ['Dog Info', 'Hours per Day'],
  592. ['InProgress', doginprog],
  593. ['Payment', dogPayment],
  594. ['License Issued', dogLicensed],
  595. ['Rejected', dogrejected],
  596. ['Expired', dogexpired]
  597. ]);
  598. // Optional; add a title and set the width and height of the chart
  599. var options = {
  600. 'title': 'OverAll Dog Info', legend: 'bottom', 'height': 400,
  601. colors: ['#f4ca47', '#0ebce0', '#aae00e', '#053a4c', '#0ee0ad'],
  602. };
  603. // Display the chart inside the <div> element with id="piechart"
  604. var chart = new google.visualization.PieChart(document.getElementById('Dogpiechart'));
  605. chart.draw(data, options);
  606. }
  607. //total cat piechart
  608. // $('#catTotal').val(catTotal);
  609. google.charts.load('current', { 'packages': ['corechart'] });
  610. google.charts.setOnLoadCallback(drawChart1);
  611. // Draw the chart and set the chart values
  612. function drawChart1() {
  613. var data = google.visualization.arrayToDataTable([
  614. ['Cat Info', 'Hours per Day'],
  615. ['InProgress', catinprog],
  616. ['Payment', catPayment],
  617. ['License Issued', catLicensed],
  618. ['Rejected', catrejected],
  619. ['Expired', catexpired]
  620. ]);
  621. var options = {
  622. 'title': 'OverAll Cat Info',
  623. legend: 'bottom',
  624. 'height': 400,
  625. colors: ['#f4ca47', '#0ebce0', '#aae00e', '#053a4c', '#0ee0ad'],
  626. };
  627. var chart = new google.visualization.PieChart(document.getElementById('Catpiechart'));
  628. chart.draw(data, options);
  629. }
  630. // total cat count piechar end
  631. function getByZone() {
  632. var zone = $("#zone").val()
  633. if (zone == "0") {
  634. window.location.href = "/petregistration/";
  635. return false;
  636. }
  637. else{
  638. window.location.href = "/petregistration/?zone="+zone;
  639. return false;
  640. }
  641. }
  642. function getPieChartByZone(x) {
  643. console.log(x);
  644. totalexpired = x.cat[4] + x.dog[4];
  645. totalrejected = x.cat[3] + x.dog[3];
  646. totalLicensed = x.cat[2] + x.dog[2];
  647. totalPayment = x.cat[1] + x.dog[1];
  648. totalinprog = x.cat[0] + x.dog[0];
  649. document.getElementById("totalpet").innerHTML = x.cat[200] + x.dog[200];
  650. drawChart2();
  651. catexpired = x.cat[4];
  652. catrejected = x.cat[3];
  653. catLicensed = x.cat[2];
  654. catPayment = x.cat[1];
  655. catinprog = x.cat[0];
  656. catTotal = x.cat[200];
  657. document.getElementById("catTotal").innerHTML = catTotal;
  658. drawChart1();
  659. dogexpired = x.dog[4];
  660. dogrejected = x.dog[3];
  661. dogLicensed = x.dog[2];
  662. dogPayment = x.dog[1];
  663. doginprog = x.dog[0];
  664. dogTotal = x.dog[200];
  665. document.getElementById("dogTotal").innerHTML = dogTotal;
  666. drawChart();
  667. var UserCount = x.userCount;
  668. //var zone=
  669. var totalRegPets = x.dog[200] + x.cat[200];
  670. var totalInprogcount = x.dog[0] + x.cat[0];
  671. var totalRejCount = x.dog[3] + x.cat[3];
  672. var totalpets = x.dog[2] + x.cat[2];
  673. //var totallicCount
  674. var explicCount = x.dog[4] + x.cat[4];
  675. document.getElementById("UserCount").innerHTML = UserCount;
  676. document.getElementById("totalRegPets").innerHTML = totalRegPets;
  677. document.getElementById("totalInprogcount").innerHTML = totalInprogcount;
  678. document.getElementById("totalRejCount").innerHTML = totalRejCount;
  679. document.getElementById("totalpets").innerHTML = totalpets;
  680. document.getElementById("explicCount").innerHTML = explicCount;
  681. }
  682. function resetDate() {
  683. window.location.href = "/admin/home";
  684. }
  685. function getZoneDashboard() {
  686. var z = $('#zone').val();
  687. if (z == 0) {
  688. window.location.href = "/pet/dashboard";
  689. }
  690. }
  691. </script>
  692. </html>