|
|
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{fragments/modules/base/head :: head}">
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
</head>
<style> .chart-container { display: flex; justify-content: center; align-items: center; height: 100%; box-sizing:border-box; /* Optionally set the height to fill the container */ }</style> <body>
<link rel="stylesheet" href="/assets/node_modules/fullcalendar/dist/fullcalendar.min.css"> <!--[if lt IE 8]>
<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> <![endif]-->
<div class="wrapper"> <!-- header top menu Start --> <header th:replace="~{fragments/modules/base/header :: header}"></header> <!-- header top menu end -->
<div class="page-wrap"> <!--=============== Left Menu side Start ================--> <div th:replace="~{fragments/modules/base/menu :: menu}"></div> <!--=============== Left side End ================--> <div class="main-content"> <div class="container-fluid"> <div class="page-header mb-2"> <div class="row align-items-end"> <div class="col-lg-8"> <div class="page-header-title"> <i class="ik ik-bar-chart-2 bg-blue"></i> <div class="d-inline"> <h5>PGR Report</h5> <span>Public Grievance Redressal Complaint Report</span> </div> </div> </div> <div class="col-lg-4"> <nav class="breadcrumb-container" aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="index"><i class="ik ik-home"></i></a></li> <li class="breadcrumb-item active" aria-current="page">Dashboard</li> </ol> </nav> </div> </div> </div> <h4 class="h4 text-right text-mute" style="font-size: 12px;"> Auto refresh in <font id="refresh-countdown">00</font> seconds </h4>
<br> <!--
<div class="row"> analytic card start - First Tile Start <div class="col-xl-3 col-md-6"> <a href="javascript:void(0)"> <div class="card social-card"> <div class="card-body text-center"> <h2 class="text-facebook mb-20"><i class="ik ik-layers"></i></h2> <h3 class="text-facebook fw-700" id="totalcomplaintcount">0</h3> <p>Total Complaints</p> <p class="mb-0 mt-15">View Total Complaints <i class="fas fa-arrow-right ml-5 f-10 text-facebook"></i></p> </div> </div> </a> </div> <div class="col-xl-3 col-md-6"> <a href="javascript:void(0)"> <div class="card social-card"> <div class="card-body text-center"> <h2 class="text-twitter mb-20"><i class="fas fa-comments"></i></h2> <h3 class="text-twitter fw-700" id="completedcomplaintcount">0</h3> <p>Completed Complaints</p> <p class="mb-0 mt-15">Completed Complaints<i class="fas fa-arrow-right ml-5 f-10 text-twitter"></i></p> </div> </div> </a> </div> <div class="col-xl-3 col-md-6"> <a href="javascript:void(0)"> <div class="card social-card"> <div class="card-body text-center"> <h2 class="text-green mb-20"><i class="far fa-smile-beam"></i></h2> <h3 class="text-green fw-700" id="pendingcomplaintcount">0</h3> <p>Pending Complaints</p> <p class="mb-0 mt-15">View Pending Complaints <i class="fas fa-arrow-right ml-5 f-10 text-green"></i></p> </div> </div> </a> </div> <div class="col-xl-3 col-md-6"> <a href="javascript:void(0)"> <div class="card social-card"> <div class="card-body text-center"> <h2 class="text-red mb-20"><i class="far fa-frown"></i></h2> <h3 class="text-red fw-700" id="reopencomplaintcount">0</h3> <p>Reopen Complaints</p> <p class="mb-0 mt-15">View Reopen Complaints<i class="fas fa-arrow-right ml-5 f-10 text-red"></i></p> </div> </div> </a> </div> -->
<form class="" action="" onsubmit="getByZone()">
<div class="row"> <label for="deptName">Select Age Analysis Department:</label> <select class="form-control text-center" name="DEPT_NAME" id="zone"> <option value="0">All Zone</option> <option value="A-Accounts Central Cell" th:selected="${DEPT_NAME=='A-Accounts Central Cell'}">A-Accounts Central Cell</option> <option value="B-Buildings" th:selected="${DEPT_NAME=='B-Buildings'}">B-Buildings</option> <option value="BR-Bus Route Roads" th:selected="${DEPT_NAME=='BR-Bus Route Roads'}">BR-Bus Route Roads</option> <option value="C-Council" th:selected="${DEPT_NAME=='C-Council'}">C-Council</option> <option value="D-Storm Water Drains" th:selected="${DEPT_NAME=='D-Storm Water Drains'}">D-Storm Water Drains</option> <option value="E-Education" th:selected="${DEPT_NAME=='E-Education'}">E-Education</option> <option value="EL-ELECTION" th:selected="${DEPT_NAME=='EL-ELECTION'}">EL-ELECTION</option> <option value="G-General" th:selected="${DEPT_NAME=='G-General'}">G-General</option> <option value="H-Health" th:selected="${DEPT_NAME=='H-Health'}">H-Health</option> <option value="HD-District Family Welfare" th:selected="${DEPT_NAME=='HD-District Family Welfare'}">HD-District Family Welfare</option> <option value="J-Bridges" th:selected="${DEPT_NAME=='J-Bridges'}">J-Bridges</option> <option value="JP-Chief Engineer Office (Buildings, Bridges and Planning)" th:selected="${DEPT_NAME=='JP-Chief Engineer Office (Buildings, Bridges and Planning)'}">JP-Chief Engineer Office (Buildings, Bridges and Planning)</option> <option value="L-Electrical" th:selected="${DEPT_NAME=='L-Electrical'}">L-Electrical</option> <option value="M-Mechanical" th:selected="${DEPT_NAME=='M-Mechanical'}">M-Mechanical</option> <option value="NA-THIRUVOTTIYUR" th:selected="${DEPT_NAME=='NA-THIRUVOTTIYUR'}">NA-THIRUVOTTIYUR</option> <option value="NB-MANALI" th:selected="${DEPT_NAME=='NB-MANALI'}">NB-MANALI</option> <option value="NC-MADHAVARAM" th:selected="${DEPT_NAME=='NC-MADHAVARAM'}">NC-MADHAVARAM</option> <option value="ND-TONDIARPET" th:selected="${DEPT_NAME=='ND-TONDIARPET'}">ND-TONDIARPET</option> <option value="NE-ROYAPURAM" th:selected="${DEPT_NAME=='NE-ROYAPURAM'}">NE-ROYAPURAM</option> <option value="NF-THIRU-VI-KA NAGAR" th:selected="${DEPT_NAME=='NF-THIRU-VI-KA NAGAR'}">NF-THIRU-VI-KA NAGAR</option> <option value="NG-AMBATTUR" th:selected="${DEPT_NAME=='NG-AMBATTUR'}">NG-AMBATTUR</option> <option value="NH-ANNA NAGAR" th:selected="${DEPT_NAME=='NH-ANNA NAGAR'}">NH-ANNA NAGAR</option> <option value="NJ-TEYNAMPET" th:selected="${DEPT_NAME=='NJ-TEYNAMPET'}">NJ-TEYNAMPET</option> <option value="NK-KODAMBAKKAM" th:selected="${DEPT_NAME=='NK-KODAMBAKKAM'}">NK-KODAMBAKKAM</option> <option value="NL-VALASARAVAKKAM" th:selected="${DEPT_NAME=='NL-VALASARAVAKKAM'}">NL-VALASARAVAKKAM</option> <option value="NM-ALANDUR" th:selected="${DEPT_NAME=='NM-ALANDUR'}">NM-ALANDUR</option> <option value="NN-ADYAR" th:selected="${DEPT_NAME=='NN-ADYAR'}">NN-ADYAR</option> <option value="NP-PERUNGUDI" th:selected="${DEPT_NAME=='NP-PERUNGUDI'}">NP-PERUNGUDI</option> <option value="NQ-SHOZHINGANALLUR" th:selected="${DEPT_NAME=='NQ-SHOZHINGANALLUR'}">NQ-SHOZHINGANALLUR</option> <option value="P-Parks and Playfields" th:selected="${DEPT_NAME=='P-Parks and Playfields'}">P-Parks and Playfields</option> <option value="Q-Solid Waste Management" th:selected="${DEPT_NAME=='Q-Solid Waste Management'}">Q-Solid Waste Management</option> <option value="R-Revenue" th:selected="${DEPT_NAME=='R-Revenue'}">R-Revenue</option> <option value="RC-Regional office - Central" th:selected="${DEPT_NAME=='RC-Regional office - Central'}">RC-Regional office - Central</option> <option value="RN-Regional office - North" th:selected="${DEPT_NAME=='RN-Regional office - North'}">RN-Regional office - North</option> <option value="RS-Regional office - South<" th:selected="${DEPT_NAME=='RS-Regional office - South<'}">RS-Regional office - South</option> <option value="S-Chief Engineer Office (SWD, BRR, SP)" th:selected="${DEPT_NAME=='S-Chief Engineer Office (SWD, BRR, SP)'}">S-Chief Engineer Office (SWD, BRR, SP)</option> <option value="SP-SPECIAL PROJECTS" th:selected="${DEPT_NAME=='SP-SPECIAL PROJECTS'}">SP-SPECIAL PROJECTS</option> <option value="T-Taxation Appeals Committee" th:selected="${DEPT_NAME=='T-Taxation Appeals Committee'}">T-Taxation Appeals Committee</option> <option value="X-Chief Engineer Office" th:selected="${DEPT_NAME=='X-Chief Engineer Office'}">X-Chief Engineer Office</option> <option value="V-Land and Estate" th:selected="${DEPT_NAME=='V-Land and Estate'}">V-Land and Estate</option> <option value="W-Works" th:selected="${DEPT_NAME=='W-Works'}">W-Works</option> <option value="Y-Legal Cell" th:selected="${DEPT_NAME=='Y-Legal Cell'}">Y-Legal Cell</option> <option value="Z-Elementary Education" th:selected="${DEPT_NAME=='Z-Elementary Education'}">Z-Elementary Education</option> </select> <!-- <div style="display: flex; justify-content: space-between; align-items: center; margin-top:11px;">
<button type="submit" class="btn btn-sm btn-primary">Submit</button> </div> --> </div> <div class="row"> <label for="deptName">Select Zonewise Report Department:</label> <select class="form-control text-center" name="DEPTID" id="zonewithreopenbar"> <option value="0">All Zone</option> <option value="32" th:selected="${DEPTID=='32'}">NA-THIRUVOTTIYUR</option> <option value="33" th:selected="${DEPTID=='33'}">NB-MANALI</option> <option value="34" th:selected="${DEPTID=='34'}">NC-MADHAVARAM</option> <option value="35" th:selected="${DEPTID=='35'}">ND-TONDIARPET</option> <option value="36" th:selected="${DEPTID=='36'}">NE-ROYAPURAM</option> <option value="37" th:selected="${DEPTID=='37'}">NF-THIRU-VI-KA NAGAR</option> <option value="38" th:selected="${DEPTID=='38'}">NG-AMBATTUR</option> <option value="39" th:selected="${DEPTID=='39'}">NH-ANNA NAGAR</option> <option value="40" th:selected="${DEPTID=='40'}">NJ-TEYNAMPET</option> <option value="41" th:selected="${DEPTID=='41'}">NK-KODAMBAKKAM</option> <option value="42" th:selected="${DEPTID=='42'}">NL-VALASARAVAKKAM</option> <option value="43" th:selected="${DEPTID=='43'}">NM-ALANDUR</option> <option value="44" th:selected="${DEPTID=='44'}">NN-ADYAR</option> <option value="45" th:selected="${DEPTID=='45'}">NP-PERUNGUDI</option> <option value="46" th:selected="${DEPT_NAME=='46'}">NQ-SHOZHINGANALLUR</option> </select> <!-- <div style="display: flex; justify-content: space-between; align-items: center; margin-top:11px;">
<button type="submit" class="btn btn-sm btn-primary">Submit</button> </div> --> </div> <div style="display: flex; justify-content: space-between; align-items: center; margin-top:11px;"> <button type="submit" class="btn btn-sm btn-primary">Submit</button> </div> </form>
<br>
<!-- <div class="row"
style="padding: 10px; margin-top: 0px; display: flex; flex-wrap: wrap; justify-content: space-around;"> <form class="" action="" onsubmit="getByZone()"> -->
<!-- <div class="row">
<label for="deptName">Select Department:</label> <select class="form-control text-center" name="DEPT_NAME" id="zone"> <option value="0">All Zone</option> <option value="A-Accounts Central Cell" th:selected="${DEPT_NAME=='A-Accounts Central Cell'}">A-Accounts Central Cell</option> <option value="B-Buildings" th:selected="${DEPT_NAME=='B-Buildings'}">B-Buildings</option> <option value="BR-Bus Route Roads" th:selected="${DEPT_NAME=='BR-Bus Route Roads'}">BR-Bus Route Roads</option> <option value="C-Council" th:selected="${DEPT_NAME=='C-Council'}">C-Council</option> <option value="D-Storm Water Drains" th:selected="${DEPT_NAME=='D-Storm Water Drains'}">D-Storm Water Drains</option> <option value="E-Education" th:selected="${DEPT_NAME=='E-Education'}">E-Education</option> <option value="EL-ELECTION" th:selected="${DEPT_NAME=='EL-ELECTION'}">EL-ELECTION</option> <option value="G-General" th:selected="${DEPT_NAME=='G-General'}">G-General</option> <option value="H-Health" th:selected="${DEPT_NAME=='H-Health'}">H-Health</option> <option value="HD-District Family Welfare" th:selected="${DEPT_NAME=='HD-District Family Welfare'}">HD-District Family Welfare</option> <option value="J-Bridges" th:selected="${DEPT_NAME=='J-Bridges'}">J-Bridges</option> <option value="JP-Chief Engineer Office (Buildings, Bridges and Planning)" th:selected="${DEPT_NAME=='JP-Chief Engineer Office (Buildings, Bridges and Planning)'}">JP-Chief Engineer Office (Buildings, Bridges and Planning)</option> <option value="L-Electrical" th:selected="${DEPT_NAME=='L-Electrical'}">L-Electrical</option> <option value="M-Mechanical" th:selected="${DEPT_NAME=='M-Mechanical'}">M-Mechanical</option> <option value="NA-THIRUVOTTIYUR" th:selected="${DEPT_NAME=='NA-THIRUVOTTIYUR'}">NA-THIRUVOTTIYUR</option> <option value="NB-MANALI" th:selected="${DEPT_NAME=='NB-MANALI'}">NB-MANALI</option> <option value="NC-MADHAVARAM" th:selected="${DEPT_NAME=='NC-MADHAVARAM'}">NC-MADHAVARAM</option> <option value="ND-TONDIARPET" th:selected="${DEPT_NAME=='ND-TONDIARPET'}">ND-TONDIARPET</option> <option value="NE-ROYAPURAM" th:selected="${DEPT_NAME=='NE-ROYAPURAM'}">NE-ROYAPURAM</option> <option value="NF-THIRU-VI-KA NAGAR" th:selected="${DEPT_NAME=='NF-THIRU-VI-KA NAGAR'}">NF-THIRU-VI-KA NAGAR</option> <option value="NG-AMBATTUR" th:selected="${DEPT_NAME=='NG-AMBATTUR'}">NG-AMBATTUR</option> <option value="NH-ANNA NAGAR" th:selected="${DEPT_NAME=='NH-ANNA NAGAR'}">NH-ANNA NAGAR</option> <option value="NJ-TEYNAMPET" th:selected="${DEPT_NAME=='NJ-TEYNAMPET'}">NJ-TEYNAMPET</option> <option value="NK-KODAMBAKKAM" th:selected="${DEPT_NAME=='NK-KODAMBAKKAM'}">NK-KODAMBAKKAM</option> <option value="NL-VALASARAVAKKAM" th:selected="${DEPT_NAME=='NL-VALASARAVAKKAM'}">NL-VALASARAVAKKAM</option> <option value="NM-ALANDUR" th:selected="${DEPT_NAME=='NM-ALANDUR'}">NM-ALANDUR</option> <option value="NN-ADYAR" th:selected="${DEPT_NAME=='NN-ADYAR'}">NN-ADYAR</option> <option value="NP-PERUNGUDI" th:selected="${DEPT_NAME=='NP-PERUNGUDI'}">NP-PERUNGUDI</option> <option value="NQ-SHOZHINGANALLUR" th:selected="${DEPT_NAME=='NQ-SHOZHINGANALLUR'}">NQ-SHOZHINGANALLUR</option> <option value="P-Parks and Playfields" th:selected="${DEPT_NAME=='P-Parks and Playfields'}">P-Parks and Playfields</option> <option value="Q-Solid Waste Management" th:selected="${DEPT_NAME=='Q-Solid Waste Management'}">Q-Solid Waste Management</option> <option value="R-Revenue" th:selected="${DEPT_NAME=='R-Revenue'}">R-Revenue</option> <option value="RC-Regional office - Central" th:selected="${DEPT_NAME=='RC-Regional office - Central'}">RC-Regional office - Central</option> <option value="RN-Regional office - North" th:selected="${DEPT_NAME=='RN-Regional office - North'}">RN-Regional office - North</option> <option value="RS-Regional office - South<" th:selected="${DEPT_NAME=='RS-Regional office - South<'}">RS-Regional office - South</option> <option value="S-Chief Engineer Office (SWD, BRR, SP)" th:selected="${DEPT_NAME=='S-Chief Engineer Office (SWD, BRR, SP)'}">S-Chief Engineer Office (SWD, BRR, SP)</option> <option value="SP-SPECIAL PROJECTS" th:selected="${DEPT_NAME=='SP-SPECIAL PROJECTS'}">SP-SPECIAL PROJECTS</option> <option value="T-Taxation Appeals Committee" th:selected="${DEPT_NAME=='T-Taxation Appeals Committee'}">T-Taxation Appeals Committee</option> <option value="X-Chief Engineer Office" th:selected="${DEPT_NAME=='X-Chief Engineer Office'}">X-Chief Engineer Office</option> <option value="V-Land and Estate" th:selected="${DEPT_NAME=='V-Land and Estate'}">V-Land and Estate</option> <option value="W-Works" th:selected="${DEPT_NAME=='W-Works'}">W-Works</option> <option value="Y-Legal Cell" th:selected="${DEPT_NAME=='Y-Legal Cell'}">Y-Legal Cell</option> <option value="Z-Elementary Education" th:selected="${DEPT_NAME=='Z-Elementary Education'}">Z-Elementary Education</option> </select> <br> <div style="display: flex; justify-content: space-between; align-items: center; margin-top:11px;"> <button type="submit" class="btn btn-sm btn-primary">Submit</button> </div> <button type="submit" class="btn btn-sm btn-primary">Submit</button> </div> </form> --> <div class="row" style="padding: 10px; margin-top: 0px; display: flex; flex-wrap: wrap; justify-content: space-around;"> <div class="col-md-5"> <div class="card-block"> <div id="totalpiechart" ></div> <!-- <div class="card-body">
</div> --> </div> </div>
<div class="col-md-5"> <div class="card-block"> <div id="reopenpiechart"></div> <!-- <div class="card-body">
</div> --> </div> </div> </div> <br> <!-- <form class="" action="" onsubmit="getByWROZone()">
<div class="row"> <label for="deptName">Select Department:</label> <select class="form-control text-center" name="DEPTID" id="zonewithreopenbar"> <option value="0">All Zone</option> <option value="32" th:selected="${DEPTID=='32'}">NA-THIRUVOTTIYUR</option> <option value="33" th:selected="${DEPTID=='33'}">NB-MANALI</option> <option value="34" th:selected="${DEPTID=='34'}">NC-MADHAVARAM</option> <option value="35" th:selected="${DEPTID=='35'}">ND-TONDIARPET</option> <option value="36" th:selected="${DEPTID=='36'}">NE-ROYAPURAM</option> <option value="37" th:selected="${DEPTID=='37'}">NF-THIRU-VI-KA NAGAR</option> <option value="38" th:selected="${DEPTID=='38'}">NG-AMBATTUR</option> <option value="39" th:selected="${DEPTID=='39'}">NH-ANNA NAGAR</option> <option value="40" th:selected="${DEPTID=='40'}">NJ-TEYNAMPET</option> <option value="41" th:selected="${DEPTID=='41'}">NK-KODAMBAKKAM</option> <option value="42" th:selected="${DEPTID=='42'}">NL-VALASARAVAKKAM</option> <option value="43" th:selected="${DEPTID=='43'}">NM-ALANDUR</option> <option value="44" th:selected="${DEPTID=='44'}">NN-ADYAR</option> <option value="45" th:selected="${DEPTID=='45'}">NP-PERUNGUDI</option> <option value="46" th:selected="${DEPT_NAME=='46'}">NQ-SHOZHINGANALLUR</option> </select> <div style="display: flex; justify-content: space-between; align-items: center; margin-top:11px;"> <button type="submit" class="btn btn-sm btn-primary">Submit</button> </div> </div> </form> --> </div> <!-- <div class="col-md-5" >
<div class="card-block" > <div class="chart-container"> <div id="reopenbarchart"></div> </div> </div> </div> --> <div class="col-md-12"> <div class="card sale-card"> <div class="card-header"> <h3>ZoneWise Reports with Reopen </h3> </div> <div class="card-block"> <div class="chart-container" > <div id="barchart"></div> </div> </div> </div> </div> <div class="col-md-12"> <div class="card sale-card"> <div class="card-header"> <h3>ZoneWise Reports Without Reopen </h3> </div> <div class="card-block"> <div class="chart-container" > <div id="reopenbarchart"></div> </div> </div> </div> </div> <!-- <div class="col-md-12">
<div class="card sale-card"> <div class="card-header"> <h3>ZoneWise Reports </h3> </div> <div class="card-block"> <div class="chart-container" > <div id="allbarchart"></div> </div> </div> </div> </div> --> <!-- <div class="col-md-5">
<div class="card"> <div class="card-body"> <div id="totalbarchart"></div>
</div> </div> </div> --> <!-- <div class="row"
style="padding: 5px; margin-top: 0px; display: relative; flex-wrap: wrap; justify-content: space-around;"> <div class="col-md-5"> <div class="card"> <div class="card-body"> <div id="totalbarchart"></div>
</div> </div> </div>
<div class="col-md-5"> <div class="card"> <div id="reopenbarchart"></div> <div class="card-body"> </div> </div> </div> -->
<br> <!-- <div class="row">
<canvas id="myChart" style="width:100%;max-width:600px"> </canvas> <h3>hi</h3> </div> --> <!-- First Tile End --> <div class="col-md-12"> <div class="card sale-card"> <div class="card-header"> <h3>ZoneWise Reports </h3> </div> <div class="card-block"> <div id="deal-analytic-chart" class="chart-shadow" style="height:300px"></div> </div> </div> </div> <div class="col-md-12"> <div class="card"> <div class="card-header"> <h3>Calander</h3> </div> <div class="card-block"> <div id="calendar"></div> </div> </div> </div> <div class="col-md-12"> <div class="card"> <div class="card-header"> <h3>Page Title</h3> </div> <div class="card-block"> </div> </div> </div> </div> </div> </div>
<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer> </div> <!-- Model Box --> <div class="modal" id="editEvent" tabindex="-1" role="dialog" aria-labelledby="editEventLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <form class="editEventForm"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="editEventLabel">Edit Event</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> </div> <div class="modal-body"> <div class="form-group"> <label for="editEname">Event Title</label> <input type="text" class="form-control" id="editEname" name="editEname" placeholder="Please enter event title"> </div> <div class="form-group"> <label for="editStarts">Start</label> <input type="text" class="form-control datetimepicker-input" id="editStarts" name="editStarts" data-toggle="datetimepicker" data-target="#editStarts"> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button class="btn btn-danger delete-event" type="submit">Delete</button> <button class="btn btn-success save-event" type="submit">Save</button> </div> </div> </form> </div> </div> <div class="modal" id="addEvent" tabindex="-1" role="dialog" aria-labelledby="addEventLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="addEventLabel">Add New Event</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> </div> <div class="modal-body"> <form id="addEventForm"> <div class="form-group"> <label for="eventName">Event Title</label> <input type="text" class="form-control" id="eventName" name="eventName" placeholder="Please enter event title"> </div> <div class="form-group"> <label for="eventStarts">Starts</label> <input type="text" class="form-control datetimepicker-input" id="eventStarts" name="eventStarts" data-toggle="datetimepicker" data-target="#eventStarts"> </div> <div class="form-group mb-0" id="addColor"> <label for="colors">Choose Color</label> <ul class="color-selector"> <li class="bg-aqua"> <input type="radio" data-color="bg-aqua" checked name="colorChosen" id="addColorAqua"> <label for="addColorAqua"></label> </li> <li class="bg-blue"> <input type="radio" data-color="bg-blue" name="colorChosen" id="addColorBlue"> <label for="addColorBlue"></label> </li> <li class="bg-light-blue"> <input type="radio" data-color="bg-light-blue" name="colorChosen" id="addColorLightblue"> <label for="addColorLightblue"></label> </li> <li class="bg-teal"> <input type="radio" data-color="bg-teal" name="colorChosen" id="addColorTeal"> <label for="addColorTeal"></label> </li> <li class="bg-yellow"> <input type="radio" data-color="bg-yellow" name="colorChosen" id="addColorYellow"> <label for="addColorYellow"></label> </li> <li class="bg-orange"> <input type="radio" data-color="bg-orange" name="colorChosen" id="addColorOrange"> <label for="addColorOrange"></label> </li> <li class="bg-green"> <input type="radio" data-color="bg-green" name="colorChosen" id="addColorGreen"> <label for="addColorGreen"></label> </li> <li class="bg-lime"> <input type="radio" data-color="bg-lime" name="colorChosen" id="addColorLime"> <label for="addColorLime"></label> </li> <li class="bg-red"> <input type="radio" data-color="bg-red" name="colorChosen" id="addColorRed"> <label for="addColorRed"></label> </li> <li class="bg-purple"> <input type="radio" data-color="bg-purple" name="colorChosen" id="addColorPurple"> <label for="addColorPurple"></label> </li> <li class="bg-fuchsia"> <input type="radio" data-color="bg-fuchsia" name="colorChosen" id="addColorFuchsia"> <label for="addColorFuchsia"></label> </li> <li class="bg-muted"> <input type="radio" data-color="bg-muted" name="colorChosen" id="addColorMuted"> <label for="addColorMuted"></label> </li> <li class="bg-navy"> <input type="radio" data-color="bg-navy" name="colorChosen" id="addColorNavy"> <label for="addColorNavy"></label> </li> </ul> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-success save-event">Save</button> <button type="button" class="btn btn-danger delete-event" data-dismiss="modal">Delete</button> </div> </div> </div> <div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div> <script th:replace="~{fragments/modules/base/script :: script}"></script> <script src="/assets/node_modules/amcharts3/amcharts/amcharts.js"></script> <script src="/assets/node_modules/amcharts3/amcharts/serial.js"></script> <script src="/assets/node_modules/amcharts3/amcharts/themes/light.js"></script> <script src="/assets/node_modules/fullcalendar/dist/fullcalendar.min.js"></script> <script src="/assets/node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min.js"></script>
<script>
function getByZone(){ alert("Wait for response..") let DEPT_NAME = document.getElementById("zone").value; let DEPTID = document.getElementById("zonewithreopenbar").value;
window.location.href='/dashboard?zone='+DEPT_NAME +'&zonewithreopenbar='+DEPTID; }
/* function getByWROZone(){ alert("Wait for zonewreopen response..") let DEPTID = document.getElementById("zonewithreopenbar").value;
window.location.href='/dashboard?zonewithreopenbar='+DEPTID; } */
/* function getByZone(){ var zone= $("#zone").val() if(zone=="0"){ window.location.href="/admin/home";
return false;
}
$.ajax({
type: "GET",
url: '/api/dashboard',
data: {
'zone':zone
},
success: function(x) { getPieChartByZone(x);
document.getElementById("licIssuedHide").style.display = "none";
}
});} */
</script>
<!-- <script type="text/javascript" th:inline="javascript">
var xValues = ["Street Light not burning", "Removal of Garbage", "Road Damaged", "Mosquito Nuisance", "Water Stagnation", "Removal of Debries", "Tree Fallen", "Dog Menace", "Encroachment", "Potshole Property Tax", "Others",];var yValues = [55, 49, 44, 24, 15, 5, 27, 48, 57, 15, 78];var barColors = ["red", "green","blue","orange","brown","Pink","yellow","purple","darkblue","gray","skyblue"];
new Chart("myChart", { type: "bar", data: { labels: xValues, datasets: [{ backgroundColor: barColors, data: yValues }] }, options: { legend: {display: false}, title: { display: true, text: "ZoneWise Report (With Reopen)" } }});
</script> -->
<script> function fetchDashboardSummary(){ call_loading('totalcomplaintcount','start'); call_loading('completedcomplaintcount','start'); call_loading('pendingcomplaintcount','start'); call_loading('reopencomplaintcount','start'); var apiUrl = '/api/pgr/dashboard-summary'; $.ajax({ url: apiUrl, type: 'GET', dataType: 'json', success: function(jsonResponse) { // Handle the API response data here console.log('Data from API:', jsonResponse); //for (var i = 0; i < jsonResponse.length; i++) { //var data = jsonResponse[i]; var totalcomplaintcount = jsonResponse.totalcomplaints; var completedcomplaintcount = jsonResponse.totalcomplaint; var pendingcomplaintcount = jsonResponse.pendingcomplaint; var reopencomplaintcount = jsonResponse.reopencomplaint; //} $("#totalcomplaintcount").html(totalcomplaintcount); $("#completedcomplaintcount").html(completedcomplaintcount); $("#pendingcomplaintcount").html(pendingcomplaintcount); $("#reopencomplaintcount").html(reopencomplaintcount); }, error: function(xhr, status, error) { // Handle errors here console.error('Error fetching data:', status, error); } }); } let refreshInterval; let remainingTime = 60; // Initial countdown time in seconds function updateCountdown() { let remainingTimetxt = remainingTime; if(remainingTime<10){ remainingTimetxt = "0"+remainingTime; } document.getElementById("refresh-countdown").textContent = remainingTimetxt; remainingTime--; if (remainingTime < 0) { clearInterval(refreshInterval); remainingTime = 60; fetchDashboardSummary(); refreshInterval = setInterval(updateCountdown, 1000); } } // Initial fetch and countdown start fetchDashboardSummary(); refreshInterval = setInterval(updateCountdown, 1000); </script> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript" th:inline="javascript">
var daysDataTotal = [ [(${ageanalysisdashboardList[0].DAYS_0_15_PEN})], [(${ageanalysisdashboardList[0].DAYS_16_30_PEN})], [(${ageanalysisdashboardList[0].DAYS_31_60_PEN})], [(${ageanalysisdashboardList[0].DAYS_61_90_PEN})], [(${ageanalysisdashboardList[0].DAYS_90_PEN})] ]; /* var daysDataTotal = [ $("#totalpiechart").val(ageanalysisdashboardList[0]["DAYS_0_15_REOPEN"]), $("#totalpiechart").val(ageanalysisdashboardList[0]["DAYS_16_30_REOPEN"]), $("#totalpiechart").val(ageanalysisdashboardList[0]["DAYS_31_60_REOPEN"]), $("#totalpiechart").val(ageanalysisdashboardList[0]["DAYS_61_90_REOPEN"]), $("#totalpiechart").val(ageanalysisdashboardList[0]["DAYS_90_REOPEN"])
]; */
/* var daysDataReopen = [ $("#reopenpiechart").val(ageanalysisdashboardList[0]["DAYS_0_15_REOPEN"]), $("#reopenpiechart").val(ageanalysisdashboardList[0]["DAYS_16_30_REOPEN"]), $("#reopenpiechart").val(ageanalysisdashboardList[0]["DAYS_31_60_REOPEN"]), $("#reopenpiechart").val(ageanalysisdashboardList[0]["DAYS_61_90_REOPEN"]), $("#reopenpiechart").val(ageanalysisdashboardList[0]["DAYS_90_REOPEN"])
]; */ var daysDataReopen = [ [(${ageanalysisdashboardList[0].DAYS_0_15_REOPEN})], [(${ageanalysisdashboardList[0].DAYS_16_30_REOPEN})], [(${ageanalysisdashboardList[0].DAYS_31_60_REOPEN})], [(${ageanalysisdashboardList[0].DAYS_61_90_REOPEN})], [(${ageanalysisdashboardList[0].DAYS_90_REOPEN})] ]; /* var daysDataReopen = [ '${ageanalysisdashboardList[0].DAYS_0_15_REOPEN}', '${ageanalysisdashboardList[0].DAYS_16_30_REOPEN}', '${ageanalysisdashboardList[0].DAYS_31_60_REOPEN}', '${ageanalysisdashboardList[0].DAYS_61_90_REOPEN}', '${ageanalysisdashboardList[0].DAYS_90_REOPEN}' ]; */
google.charts.load('current', {'packages': ['corechart']}); google.charts.setOnLoadCallback(drawPieCharts); // Use a new callback for pie charts google.charts.setOnLoadCallback(drawBarCharts); // Use a new callback for bar charts
function drawPieCharts() { console.log("Pie charts"); var dataTotal = google.visualization.arrayToDataTable([ ['Category', 'Count'], ['0-15 Days Pending', daysDataTotal[0]], ['16-30 Days Pending', daysDataTotal[1]], ['31-60 Days Pending', daysDataTotal[2]], ['61-90 Days Pending', daysDataTotal[3]], ['Above 90 Days Pending', daysDataTotal[4]], ]);
var dataReopen = google.visualization.arrayToDataTable([ ['Category', 'Count'], ['0-15 Days Reopen', daysDataReopen[0]], ['16-30 Days Reopen', daysDataReopen[1]], ['31-60 Days Reopen', daysDataReopen[2]], ['61-90 Days Reopen', daysDataReopen[3]], ['Above 90 Days Reopen', daysDataReopen[4]], ]);
var optionspiepen = { 'title': 'Overall Pending Complaint Info ', 'legend': 'Right', 'height': '50%', 'width': '60%', 'colors': ['#f4ca47', '#0ebce0', '#aae00e', '#053a4c', '#0ee0ad'] }; var optionspiere = { 'title': 'Overall Reopen Complaint Info', 'legend': 'Right', 'height': '50%', 'width': '60%', 'colors': ['#f4ca47', '#0ebce0', '#aae00e', '#053a4c', '#0ee0ad'] };
var piechartTotal = new google.visualization.PieChart(document.getElementById('totalpiechart')); var piechartReopen = new google.visualization.PieChart(document.getElementById('reopenpiechart'));
piechartTotal.draw(dataTotal, optionspiepen); piechartReopen.draw(dataReopen, optionspiere); } var zoneDatawithReopen = [ [(${zonewisedashboardList[0].NonBURSTLT})], [(${zonewisedashboardList[0].REOFGAR})], [(${zonewisedashboardList[0].ROAD})], [(${zonewisedashboardList[0].MOSQUITE})], [(${zonewisedashboardList[0].WATER})], [(${zonewisedashboardList[0].REOFDEB})], [(${zonewisedashboardList[0].TREE})], [(${zonewisedashboardList[0].DOGS})], [(${zonewisedashboardList[0].ENCMTN})], [(${zonewisedashboardList[0].POT})], [(${zonewisedashboardList[0].PTAX})], [(${zonewisedashboardList[0].OTHERS})], [(${zonewisedashboardList[0].TOTAL})] ];
var zoneDatawithoutReopen = [ [(${reopenzonewisedashboardList[0].NonBURSTLT})], [(${reopenzonewisedashboardList[0].REOFGAR})], [(${reopenzonewisedashboardList[0].ROAD})], [(${reopenzonewisedashboardList[0].MOSQUITE})], [(${reopenzonewisedashboardList[0].WATER})], [(${reopenzonewisedashboardList[0].REOFDEB})], [(${reopenzonewisedashboardList[0].TREE})], [(${reopenzonewisedashboardList[0].DOGS})], [(${reopenzonewisedashboardList[0].ENCMTN})], [(${reopenzonewisedashboardList[0].POT})], [(${reopenzonewisedashboardList[0].PTAX})], [(${reopenzonewisedashboardList[0].OTHERS})], [(${reopenzonewisedashboardList[0].TOTAL})] ];
function drawBarCharts() { console.log("Bar charts");
var zonewithReopen = google.visualization.arrayToDataTable([ ['Category', 'Count'], ['Street Light not burning', zoneDatawithReopen[0]], ['Removal of Garbage', zoneDatawithReopen[1]], ['Road Damaged', zoneDatawithReopen[2]], ['Mosquito Nuisance', zoneDatawithReopen[3]], ['Water Stagnation', zoneDatawithReopen[4]], ['Removal of Debries', zoneDatawithReopen[5]], ['Tree Fallen', zoneDatawithReopen[6]], ['Dog Menace', zoneDatawithReopen[7]], ['Encroachment', zoneDatawithReopen[8]], ['Potshole', zoneDatawithReopen[9]], ['Property Tax', zoneDatawithReopen[10]], ['Others', zoneDatawithReopen[11]], ['Total', zoneDatawithReopen[12]], ]); var zonewithoutReopen = google.visualization.arrayToDataTable([ ['Category', 'Count'], ['Street Light not burning', zoneDatawithoutReopen[0]], ['Removal of Garbage', zoneDatawithoutReopen[1]], ['Road Damaged', zoneDatawithoutReopen[2]], ['Mosquito Nuisance', zoneDatawithoutReopen[3]], ['Water Stagnation', zoneDatawithoutReopen[4]], ['Removal of Debries', zoneDatawithoutReopen[5]], ['Tree Fallen', zoneDatawithoutReopen[6]], ['Dog Menace', zoneDatawithoutReopen[7]], ['Encroachment', zoneDatawithoutReopen[8]], ['Potshole', zoneDatawithoutReopen[9]], ['Property Tax', zoneDatawithoutReopen[10]], ['Others', zoneDatawithoutReopen[11]], ['Total', zoneDatawithoutReopen[12]], ]);
var optionszonewithreopencolumn = { 'title': 'Zonewise (With Reopen) ', 'legend': 'bottom', 'height': '450', 'width': '600', "useLineColorForBulletBorder": true, 'colors': ['Green', 'Blue', 'Yellow', 'Brown', 'Pink', 'Orange', 'Purple', 'Grey', 'SkyBlue', 'LightGreen','Violet', 'Gold'], 'responsive':true };
var optionszonewithoutreopencolumn = { 'title': 'Zonewise (Without Reopen) ', 'legend': 'bottom', 'height': '450', 'width': '600', "useLineColorForBulletBorder": true, 'colors': ['Red', 'Blue', 'Yellow', 'Brown', 'Pink', 'Orange', 'Purple', 'Grey', 'SkyBlue', 'LightGreen','Violet', 'Gold'], 'responsive':true }; /* var optionszonecolumn = { 'title': 'Zonewise', 'legend': 'bottom', 'height': '450', 'width': '900', "useLineColorForBulletBorder": true, 'colors': ['Green', 'Red'], // Set different colors for the two fields 'responsive': true }; */ /* var optionszonecolumn = { 'title': 'Zonewise ', 'legend': 'bottom', 'height': '450', 'width': '1200', "useLineColorForBulletBorder": true, 'colors': ['Green', 'Red', 'Green', 'Red', 'Green', 'Red', 'Green', 'Red', 'Green', 'Red', 'Green', 'Red', 'Green', 'Red', 'Green', 'Red', 'Green', 'Red', 'Green', 'Red', 'Green', 'Red', 'Green', 'Red'], 'responsive':true }; */ /* var optionszonecolumn = { 'title': 'Zonewise', 'legend': 'bottom', 'height': '450', 'width': '1200', "useLineColorForBulletBorder": true, 'colors': ['Green', 'Red'], // Set different colors for the two fields 'responsive': true }; */
var barchartReopen = new google.visualization.ColumnChart(document.getElementById('reopenbarchart')); var barchartwithReopen = new google.visualization.ColumnChart(document.getElementById('barchart'));
barchartReopen.draw(zonewithoutReopen, optionszonewithoutreopencolumn); barchartwithReopen.draw(zonewithReopen, optionszonewithreopencolumn); // barchartover.draw(zonebardata, optionszonecolumn); // barchartover.draw(zonebardata, optionszonecolumn);
// var barchartover = new google.visualization.ColumnChart(document.getElementById('allbarchart')); // barchartover.draw(zonebardata, optionszonecolumn);
}
</script> <script> var chartData = []; var currentDate = new Date(); var currentMonth = currentDate.getMonth() + 1; var currentYear = currentDate.getFullYear(); var daysInMonth = new Date(currentYear, currentMonth, 0).getDate(); // Generate random data for each date in the current month for (var i = 1; i <= daysInMonth; i++) { var randomValue1 = Math.floor(Math.random() * 100); // Replace 100 with the maximum value you want var randomValue2 = Math.floor(Math.random() * 100); // Replace 100 with the maximum value you want var randomValue3 = Math.floor(Math.random() * 100); var randomValue4 = Math.floor(Math.random() * 100); // Replace 100 with the maximum value you want var randomValue5 = Math.floor(Math.random() * 100); // Replace 100 with the maximum value you want var randomValue6 = Math.floor(Math.random() * 100); var randomValue7 = Math.floor(Math.random() * 100); // Replace 100 with the maximum value you want var randomValue8 = Math.floor(Math.random() * 100); // Replace 100 with the maximum value you want var randomValue9 = Math.floor(Math.random() * 100); var randomValue10 = Math.floor(Math.random() * 100); var randomValue11 = Math.floor(Math.random() * 100); // Replace 100 with the maximum value you want var randomValue12 = Math.floor(Math.random() * 100); // Replace 100 with the maximum value you want var dateString = currentYear + '-' + (currentMonth < 10 ? '0' : '') + currentMonth + '-' + (i < 10 ? '0' : '') + i; var dataPoint = { "date": dateString, "market1": randomValue1, "market2": randomValue2, "market3": randomValue3, "market4": randomValue4, "market5": randomValue5, "market6": randomValue6, "market7": randomValue7, "market8": randomValue8, "market9": randomValue9, "market10": randomValue10, "market11": randomValue11, "market12": randomValue12, }; chartData.push(dataPoint); } // deal-analytic-chart var chart = AmCharts.makeChart("deal-analytic-chart", { "type": "serial", "theme": "light", "dataDateFormat": "YYYY-MM-DD", "precision": 2, "valueAxes": [{ "id": "v1", "position": "left", "autoGridCount": false, "labelFunction": function(value) { return "$" + Math.round(value) + "M"; } }, { "id": "v2", "gridAlpha": 0, "autoGridCount": true }], "graphs": [{ "id": "g1", "valueAxis": "v2", /*"bullet": "round", "bulletBorderAlpha": 1, "bulletColor": "#FFFFFF", "bulletSize": 8, "hideBulletsCount": 50, "lineThickness": 3, "lineColor": "#2ed8b6",*/ "lineColor": "#2ed8b6", "fillColors": "#2ed8b6", "type": "column", "fillAlphas": 0.3, "columnWidth": 0.5, "title": "Street Light not burning", "useLineColorForBulletBorder": true, "valueField": "market1", "balloonText": "[[[[title]]]]<br /><b style='font-size: 130%'>[[[[value]]]]</b>" }, { "id": "g2", "valueAxis": "v2", //"bullet": "round", //"bulletBorderAlpha": 1, //"bulletColor": "#FFFFFF", //"bulletSize": 8, //"hideBulletsCount": 50, //"lineThickness": 3, //"lineColor": "#e95753", "lineColor": "#F22613", "fillColors": "#F22613", "type": "column", "fillAlphas": 0.3, "columnWidth": 0.5, "title": "Removal of Garbage", "useLineColorForBulletBorder": true, "valueField": "market2", "balloonText": "[[[[title]]]]<br /><b style='font-size: 130%'>[[[[value]]]]</b>" }, { "id": "g3", "valueAxis": "v2", /*"bullet": "round", "bulletBorderAlpha": 1, "bulletColor": "#FFFFFF", "bulletSize": 8, "hideBulletsCount": 50, "lineThickness": 3, "lineColor": "#2ed8b6",*/ "lineColor": "Blue", "fillColors": "Blue", "type": "column", "fillAlphas": 0.3, "columnWidth": 0.5, "title": "Road Damaged", "useLineColorForBulletBorder": true, "valueField": "market3", "balloonText": "[[[[title]]]]<br /><b style='font-size: 130%'>[[[[value]]]]</b>" }, { "id": "g4", "valueAxis": "v2", /*"bullet": "round", "bulletBorderAlpha": 1, "bulletColor": "#FFFFFF", "bulletSize": 8, "hideBulletsCount": 50, "lineThickness": 3, "lineColor": "#2ed8b6",*/ "lineColor": "Orange", "fillColors": "Orange", "type": "column", "fillAlphas": 0.3, "columnWidth": 0.5, "title": "Mosquito Nuisance", "useLineColorForBulletBorder": true, "valueField": "market4", "balloonText": "[[[[title]]]]<br /><b style='font-size: 130%'>[[[[value]]]]</b>" }, { "id": "g5", "valueAxis": "v2", /*"bullet": "round", "bulletBorderAlpha": 1, "bulletColor": "#FFFFFF", "bulletSize": 8, "hideBulletsCount": 50, "lineThickness": 3, "lineColor": "#2ed8b6",*/ "lineColor": "Pink", "fillColors": "Pink", "type": "column", "fillAlphas": 0.3, "columnWidth": 0.5, "title": "Water Stagnation", "useLineColorForBulletBorder": true, "valueField": "market5", "balloonText": "[[[[title]]]]<br /><b style='font-size: 130%'>[[[[value]]]]</b>" }, { "id": "g6", "valueAxis": "v2", /*"bullet": "round", "bulletBorderAlpha": 1, "bulletColor": "#FFFFFF", "bulletSize": 8, "hideBulletsCount": 50, "lineThickness": 3, "lineColor": "#2ed8b6",*/ "lineColor": "Brown", "fillColors": "Brown", "type": "column", "fillAlphas": 0.3, "columnWidth": 0.5, "title": "Removal of Debries", "useLineColorForBulletBorder": true, "valueField": "market6", "balloonText": "[[[[title]]]]<br /><b style='font-size: 130%'>[[[[value]]]]</b>" }, { "id": "g7", "valueAxis": "v2", /*"bullet": "round", "bulletBorderAlpha": 1, "bulletColor": "#FFFFFF", "bulletSize": 8, "hideBulletsCount": 50, "lineThickness": 3, "lineColor": "#2ed8b6",*/ "lineColor": "Purple", "fillColors": "Purple", "type": "column", "fillAlphas": 0.3, "columnWidth": 0.5, "title": "Tree Fallen", "useLineColorForBulletBorder": true, "valueField": "market7", "balloonText": "[[[[title]]]]<br /><b style='font-size: 130%'>[[[[value]]]]</b>" }, { "id": "g8", "valueAxis": "v2", /*"bullet": "round", "bulletBorderAlpha": 1, "bulletColor": "#FFFFFF", "bulletSize": 8, "hideBulletsCount": 50, "lineThickness": 3, "lineColor": "#2ed8b6",*/ "lineColor": "Yellow", "fillColors": "Yellow", "type": "column", "fillAlphas": 0.3, "columnWidth": 0.5, "title": "Dog Menace", "useLineColorForBulletBorder": true, "valueField": "market8", "balloonText": "[[[[title]]]]<br /><b style='font-size: 130%'>[[[[value]]]]</b>" }, { "id": "g9", "valueAxis": "v9", /*"bullet": "round", "bulletBorderAlpha": 1, "bulletColor": "#FFFFFF", "bulletSize": 8, "hideBulletsCount": 50, "lineThickness": 3, "lineColor": "#2ed8b6",*/ "lineColor": "Violet", "fillColors": "Violet", "type": "column", "fillAlphas": 0.3, "columnWidth": 0.5, "title": "Encroachment", "useLineColorForBulletBorder": true, "valueField": "market9", "balloonText": "[[[[title]]]]<br /><b style='font-size: 130%'>[[[[value]]]]</b>" }, { "id": "g10", "valueAxis": "v2", /*"bullet": "round", "bulletBorderAlpha": 1, "bulletColor": "#FFFFFF", "bulletSize": 8, "hideBulletsCount": 50, "lineThickness": 3, "lineColor": "#2ed8b6",*/ "lineColor": "Grey", "fillColors": "Grey", "type": "column", "fillAlphas": 0.3, "columnWidth": 0.5, "title": "Potshole", "useLineColorForBulletBorder": true, "valueField": "market10", "balloonText": "[[[[title]]]]<br /><b style='font-size: 130%'>[[[[value]]]]</b>" }, { "id": "g11", "valueAxis": "v2", /*"bullet": "round", "bulletBorderAlpha": 1, "bulletColor": "#FFFFFF", "bulletSize": 8, "hideBulletsCount": 50, "lineThickness": 3, "lineColor": "#2ed8b6",*/ "lineColor": "Indigo", "fillColors": "Indigo", "type": "column", "fillAlphas": 0.3, "columnWidth": 0.5, "title": "Property Tax", "useLineColorForBulletBorder": true, "valueField": "market11", "balloonText": "[[[[title]]]]<br /><b style='font-size: 130%'>[[[[value]]]]</b>" }, { "id": "g12", "valueAxis": "v2", /*"bullet": "round", "bulletBorderAlpha": 1, "bulletColor": "#FFFFFF", "bulletSize": 8, "hideBulletsCount": 50, "lineThickness": 3, "lineColor": "#2ed8b6",*/ "lineColor": "Olive", "fillColors": "Olive", "type": "column", "fillAlphas": 0.3, "columnWidth": 0.5, "title": "Others", "useLineColorForBulletBorder": true, "valueField": "market12", "balloonText": "[[[[title]]]]<br /><b style='font-size: 130%'>[[[[value]]]]</b>" },], "chartCursor": { "pan": true, "valueLineEnabled": true, "valueLineBalloonEnabled": true, "cursorAlpha": 0, "valueLineAlpha": 0.2 }, "categoryField": "date", "categoryAxis": { "parseDates": true, "dashLength": 1, "minorGridEnabled": true }, "legend": { "useGraphSettings": true, "position": "top" }, "balloon": { "borderThickness": 1, "shadowAlpha": 0 }, "dataProvider": chartData, });
</script> <script> // For Calendar $(document).ready(function(t, e, i) { function t(t) { t.each(function() { var t = { title: $.trim($(this).text()) }; $(this).data("eventObject", t), $(this).draggable({ zIndex: 1070, revert: !0, revertDuration: 0 }) }) } t($("#external-events div.external-event")); var e = new Date, i = e.getDate(), n = e.getMonth(), r = e.getFullYear(); $("#calendar").fullCalendar({ header: { left: "prev,next today", center: "title", right: "month,agendaWeek,agendaDay" }, buttonText: { today: "today", month: "month", week: "week", day: "day" }, events: [{ title: "All Day Event", start: new Date(r, n, 1), className: "bg-purple" }, { title: "Long Event", start: new Date(r, n, i - 5), end: new Date(r, n, i - 2), className: "bg-yellow" }, { title: "Meeting", start: new Date(r, n, i, 10, 30), allDay: !1, className: "bg-red" }, { title: "Lunch", start: new Date(r, n, i, 12, 0), end: new Date(r, n, i, 14, 0), allDay: !1, className: "bg-navy" }, { title: "Birthday Party", start: new Date(r, n, i + 1, 19, 0), end: new Date(r, n, i + 1, 22, 30), allDay: !1, className: "bg-green" }, { title: "Click for Google", start: new Date(r, n, 28), end: new Date(r, n, 29), url: "http://google.com/", className: "bg-lime" }], editable: !0, selectable: !0, droppable: !0, drop: function(t, e) { var i = $(this).data("eventObject"), n = $.extend({}, i); n.start = t, n.allDay = e, n.backgroundColor = $(this).css("background-color"), n.borderColor = $(this).css("border-color"), $("#calendar").fullCalendar("renderEvent", n, !0), $("#drop-remove").is(":checked") && $(this).remove() }, eventClick: function(calEvent, jsEvent, view) { var $this = this; $("#editEname").val(calEvent.title) $("#editStarts").datetimepicker("date", calEvent.start._d) $("#editEvent").modal({ backdrop: 'static' }); $("#editEvent").find('.delete-event').show().end().find('.delete-event').unbind('click').click(function() { $("#calendar").fullCalendar('removeEvents', function(ev) { return (ev._id == calEvent._id); }); $("#editEvent").modal('hide'); }); $("#editEvent").find('form').on('submit', function() { calEvent.title = $("#editEname").val(); calEvent.start = new Date($("#editStarts").data("datetimepicker").date()) $("#calendar").fullCalendar('updateEvent', calEvent); $("#editEvent").modal('hide'); return false; }); }, select: function(start, end, allDay) { var $this = this; $("#addEvent").modal({ backdrop: 'static' }); $("#eventStarts").datetimepicker("date", start) var form = $("#addEventForm"); $("#addEvent").find('.delete-event').hide().end().find('.save-event').show().end().find('.save-event').unbind('click').click(function() { form.submit(); }); $("#addEvent").find('form').on('submit', function() { var title = form.find("#eventName").val(); var start = form.find("#eventStarts").val(); var end = form.find("input[name='ending']").val(); var categoryClass = form.find("#addColor [type=radio]:checked").data("color"); if (title !== null && title.length != 0) { $("#calendar").fullCalendar('renderEvent', { title: title, start: start, end: end, allDay: false, className: categoryClass }, true); $("#addEvent").modal('hide'); } else { alert('You have to give a title to your event'); } return false; }); $("#calendar").fullCalendar('unselect'); } }); var a = "#3c8dbc"; $("#color-chooser-btn"); $("#color-chooser > li > a").on("click", function(t) { t.preventDefault(), a = $(this).css("color"), $("#add-new-event").css({ "background-color": a, "border-color": a }) }), $("#add-new-event").on("click", function(e) { e.preventDefault(); var i = $("#new-event").val(); if (0 != i.length) { var n = $("<div />"); n.css({ "background-color": a, "border-color": a, color: "#fff" }).addClass("external-event"), n.html(i), $("#external-events").prepend(n), t(n), $("#new-event").val("") } }); }) </script> </body></html>
|