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.
642 lines
26 KiB
642 lines
26 KiB
<!DOCTYPE html>
|
|
<html lang="en" dir="">
|
|
<html xmlns:th="http://www.thymeleaf.org">
|
|
<head th:replace="~{fragments/modules/base/head :: head}"></head>
|
|
|
|
<style>
|
|
.chart-container {
|
|
width: 100%;
|
|
height: 350px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.chart-container {
|
|
height: 200px; /* Adjust height for mobile view */
|
|
}
|
|
}
|
|
.highlight-red{
|
|
color:red;
|
|
}
|
|
</style>
|
|
|
|
<body>
|
|
<link rel="stylesheet" href="/assets/node_modules/amcharts3/amcharts/plugins/export/export.css" type="text/css" media="all" />
|
|
<!--[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>CM Works</h5>
|
|
<span>CM Works TradeLicense</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">TradeLicense</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>
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="card sale-card">
|
|
<div class="card-header">
|
|
|
|
<h3>
|
|
<i class="fas fa-chart-pie pr-2"></i><b>Trade Analysis:</b>
|
|
</h3>
|
|
</div>
|
|
<div class="card-block" style="text-align:center;">
|
|
<div class="col-sm-12 d-flex justify-content-center align-items-center mt-10 mb-30">
|
|
<div class="row">
|
|
<div class="col-sm-12 col-lg-6 mb-3" >
|
|
<label class="pr-2" for="zone1" style="font-size:large;margin-bottom: 0px;"><b>Select Zone:</b></label>
|
|
<select class="form-select custom-select" name="zone1" id="zone1" onchange="getDiv(this);">
|
|
<option>---Select Zone---</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-sm-12 col-lg-6">
|
|
<label for="division" class="pr-2" style="font-size:large;margin-bottom: 0px;"><b>Select Ward:</b></label>
|
|
<select id="division" name="division" class="form-select custom-select">
|
|
<option value="All">Overall Zone Wise</option>
|
|
<!-- Add options dynamically -->
|
|
</select>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12">
|
|
<h4><b><span id="license_counts" class="highlight-red"></span> </b></h4>
|
|
<h3 id="load_card" style="font-size:14px"></h3>
|
|
<div id="newLicChart" class="chart-container" style= "height:450px; width:100%;">
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<div class="col-md-12">
|
|
<h4><b><span id="license_amounts" class="highlight-red"></span> </b></h4>
|
|
<div id="amtChart" class="chart-container" style= "height:600px; width:100%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
|
|
</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/plugins/export/export.min.js"></script>
|
|
<script src="/assets/node_modules/amcharts3/amcharts/pie.js"></script>
|
|
<script src="/assets/node_modules/amcharts3/amcharts/themes/light.js"></script>
|
|
|
|
<script src="/assets/node_modules/amcharts3/amcharts/plugins/responsive/responsive.js"></script>
|
|
<script src="/assets/node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min.js"></script>
|
|
|
|
<script>
|
|
|
|
|
|
var loading_text_msg = getLoadingMessage();
|
|
|
|
const loading = $("#load_card");
|
|
|
|
|
|
//This function To show the selected zone and division display in UI part
|
|
|
|
function updateChartTitles() {
|
|
const wardSelect = document.getElementById("division");
|
|
const selectedWard = wardSelect.options[wardSelect.selectedIndex].text;
|
|
|
|
const lic_count = document.getElementById("license_counts");
|
|
const lic_amt = document.getElementById("license_amounts");
|
|
|
|
lic_count.innerHTML = selectedWard;
|
|
lic_amt.innerHTML = selectedWard;
|
|
}
|
|
|
|
var initialData = [];
|
|
|
|
getZoneNo();
|
|
|
|
updateChart();
|
|
|
|
$("#zone1").change(function() {
|
|
getDiv(this);
|
|
});
|
|
|
|
$("#division").change(function () {
|
|
filterAndRenderCharts();
|
|
//updateChart();
|
|
|
|
});
|
|
|
|
|
|
//Getting Zone No
|
|
function getZoneNo() {
|
|
|
|
$.ajax({
|
|
type: "GET",
|
|
url: '/gcc/api/works/getZoneNo',
|
|
dataType: 'json',
|
|
success: function (bodyMessage) {
|
|
var tempJson = bodyMessage['ZoneDetailsResult'];
|
|
//alert("tempJson---:"+tempJson);
|
|
for (var i = 0; i < tempJson.length; i++) {
|
|
var tempJsonValue = tempJson[i]['ZoneId'];
|
|
//var tempJsonValue = tempJson[i]['ZoneName'].replace('N', '');
|
|
var tempJsonLabel = tempJson[i]['ZoneName'].replace('N', '');
|
|
$('#zone1').append("<option value='" + tempJsonValue + "'>" + tempJsonLabel + "</option>");
|
|
}
|
|
}, error: function (e, ts, et) {
|
|
// alert(ts)
|
|
}
|
|
|
|
});
|
|
}
|
|
|
|
//Getting Div
|
|
|
|
function getDiv($this) {
|
|
|
|
|
|
$('#division').empty(); // Clear existing options
|
|
$('#division').append("<option value='All'>OverAll Zone Wise</option>"); // Add 'All' option
|
|
var zoneId = $this.value;
|
|
//var zone = $this.value;
|
|
//alert("zone---:"+zone);
|
|
|
|
$.ajax({
|
|
type: "GET",
|
|
url: '/gcc/api/works/getDiv',
|
|
data: {'zoneId': zoneId},
|
|
dataType: 'json',
|
|
success: function (bodyMessage) {
|
|
var tempJson = bodyMessage['DivisionDetailsResult'];
|
|
for (var i = 0; i < tempJson.length; i++)
|
|
{
|
|
var tempJsonValue = tempJson[i]['DivisionName'];
|
|
//var tempJsonValue = tempJson[i]['DivisionId'];
|
|
var tempJsonLabel = tempJson[i]['DivisionName'];
|
|
$('#division').append("<option value='" + tempJsonValue + "'>" + tempJsonLabel + "</option>");
|
|
|
|
}
|
|
|
|
|
|
}, error: function (e, ts, et) {
|
|
// alert(ts)
|
|
}
|
|
|
|
});
|
|
}
|
|
|
|
|
|
|
|
function updateChart() {
|
|
const divisionName = $("#division").val();
|
|
//console.log("Selected region:", divisionName);
|
|
|
|
updateChartTitles();
|
|
// Show loading animation
|
|
loading.html(searchinfo("<b>" + loading_text_msg + "</b>"));
|
|
call_loading('newLicChart', 'amtChart', 'start');
|
|
|
|
// Clear existing charts
|
|
$("#newLicChart").html("");
|
|
$("#amtChart").html("");
|
|
|
|
|
|
$.ajax({
|
|
url: '/gcc/api/works/getTradelicenseReports', // Corrected endpoint URL
|
|
type: 'GET',
|
|
data: { divisionName: divisionName }, // Send regionName parameter
|
|
success: function(response) {
|
|
//console.log('Data from API:', response);
|
|
initialData = response;
|
|
filterAndRenderCharts();
|
|
//renderCharts(response);
|
|
},
|
|
error: function(error) {
|
|
console.error("Error fetching data:", error);
|
|
// Hide loading animation on error
|
|
loading.html("");
|
|
call_loading('newLicChart', 'amtChart', 'stop');
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
function filterAndRenderCharts() {
|
|
updateChartTitles();
|
|
const divisionName = $("#division").val();
|
|
//console.log("selected division",divisionName);
|
|
let filteredData = initialData;
|
|
|
|
if (divisionName !== 'All') {
|
|
filteredData = initialData.filter(item => item.WARD === divisionName);
|
|
}
|
|
|
|
renderCharts(filteredData);
|
|
}
|
|
|
|
|
|
function formatValue(value) {
|
|
if (value >= 1e9) {
|
|
return (value / 1e9).toFixed(2) + ' Billion';
|
|
} else if (value >= 1e7) {
|
|
return (value / 1e7).toFixed(2) + ' Crore';
|
|
} else if (value >= 1e6) {
|
|
return (value / 1e6).toFixed(2) + ' Million';
|
|
} else if (value >= 1e5) {
|
|
return (value / 1e5).toFixed(2) + ' Lakh';
|
|
} else if (value >= 1e4) {
|
|
return (value / 1e4).toFixed(2) + ' Thousand';
|
|
}
|
|
return value.toFixed(2);
|
|
}
|
|
|
|
|
|
|
|
function renderCharts(data) {
|
|
|
|
if (data.length === 1 && data[0].REGION === 'All') {
|
|
// Calculate total sum for all regions
|
|
const totalNewLic = data.reduce((sum, item) => sum + item.NEW_LIC, 0);
|
|
const totalRenWithPenalty = data.reduce((sum, item) => sum + item.REN_WITH_PENALTY, 0);
|
|
const totalRenWithoutPenalty = data.reduce((sum, item) => sum + item.REN_WITH_OUT_PENALTY, 0);
|
|
const totalNonRenewed = data.reduce((sum, item) => sum + item.NON_RENEWED, 0);
|
|
const totalNewLicAmt = data.reduce((sum, item) => sum + item.NEW_LIC_AMT, 0);
|
|
const totalRenWithPenaltyAmt = data.reduce((sum, item) => sum + item.REN_WITH_PENALTY_AMT, 0);
|
|
const totalRenWithoutPenaltyAmt = data.reduce((sum, item) => sum + item.REN_WITH_OUT_PENALTY_AMT, 0);
|
|
const totalNonRenewedAmt = data.reduce((sum, item) => sum + item.NONRNWDCNTAMT, 0);
|
|
|
|
// Create chart data for 'total counts'
|
|
const collectionsChartData = [{
|
|
//zone: 'All',
|
|
zone: divisionName === 'All' ? 'All' : divisionName,
|
|
newLic: totalNewLic,
|
|
renWithPenalty: totalRenWithPenalty,
|
|
renWithoutPenalty: totalRenWithoutPenalty,
|
|
nonRenewed: totalNonRenewed
|
|
}];
|
|
|
|
// Create chart data for 'total amounts'
|
|
const amountsChartData = [{
|
|
//zone: 'All',
|
|
zone: divisionName === 'All' ? 'All' : divisionName,
|
|
newLicamt: totalNewLicAmt,
|
|
renWithPenaltyamt: totalRenWithPenaltyAmt,
|
|
renWithoutPenaltyamt: totalRenWithoutPenaltyAmt,
|
|
nonRenewedamt: totalNonRenewedAmt
|
|
}];
|
|
|
|
// Render charts
|
|
renderColumnChart("newLicChart", collectionsChartData);
|
|
renderColumnChartAmt("amtChart", amountsChartData, );
|
|
|
|
|
|
|
|
} else {
|
|
// Group data by zone and calculate totals
|
|
const zoneData = data.reduce((acc, item) => {
|
|
if (!acc[item.ZONE]) {
|
|
acc[item.ZONE] = {
|
|
newLic: 0,
|
|
renWithPenalty: 0,
|
|
renWithoutPenalty: 0,
|
|
nonRenewed: 0,
|
|
newLicamt: 0,
|
|
renWithPenaltyamt: 0,
|
|
renWithoutPenaltyamt: 0,
|
|
nonRenewedamt: 0
|
|
};
|
|
}
|
|
acc[item.ZONE].newLic += item.NEW_LIC;
|
|
acc[item.ZONE].renWithPenalty += item.REN_WITH_PENALTY;
|
|
acc[item.ZONE].renWithoutPenalty += item.REN_WITH_OUT_PENALTY;
|
|
acc[item.ZONE].nonRenewed += item.NON_RENEWED;
|
|
acc[item.ZONE].newLicamt += item.NEW_LIC_AMT;
|
|
acc[item.ZONE].renWithPenaltyamt += item.REN_WITH_PENALTY_AMT;
|
|
acc[item.ZONE].renWithoutPenaltyamt += item.REN_WITH_OUT_PENALTY_AMT;
|
|
acc[item.ZONE].nonRenewedamt += item.NONRNWDCNTAMT;
|
|
return acc;
|
|
}, {});
|
|
|
|
// Convert to array format for charts
|
|
const collectionsChartData = Object.keys(zoneData).map(zone => ({
|
|
zone: zone,
|
|
newLic: zoneData[zone].newLic,
|
|
renWithPenalty: zoneData[zone].renWithPenalty,
|
|
renWithoutPenalty: zoneData[zone].renWithoutPenalty,
|
|
nonRenewed: zoneData[zone].nonRenewed
|
|
}));
|
|
|
|
const amountsChartData = Object.keys(zoneData).map(zone => ({
|
|
zone: zone,
|
|
newLicamt: zoneData[zone].newLicamt,
|
|
renWithPenaltyamt: zoneData[zone].renWithPenaltyamt,
|
|
renWithoutPenaltyamt: zoneData[zone].renWithoutPenaltyamt,
|
|
nonRenewedamt: zoneData[zone].nonRenewedamt
|
|
}));
|
|
|
|
// Render charts
|
|
renderColumnChart("newLicChart", collectionsChartData);
|
|
renderColumnChartAmt("amtChart", amountsChartData, );
|
|
|
|
|
|
}
|
|
|
|
loading.html("");
|
|
call_loading('newLicChart', 'amtChart', 'stop');
|
|
}
|
|
|
|
|
|
|
|
function renderColumnChart(elementId, chartData) {
|
|
AmCharts.makeChart(elementId, {
|
|
"type": "serial",
|
|
"theme": "light",
|
|
"dataProvider": chartData,
|
|
"startEffect":"easeOutSine",
|
|
"startDuration": 1,
|
|
"valueAxes": [{
|
|
"id": "v1",
|
|
"position": "left",
|
|
"autoGridCount": false,
|
|
"labelFunction": function (value) {
|
|
return value;
|
|
}
|
|
}],
|
|
"graphs": [
|
|
{
|
|
"id": "g1",
|
|
"valueAxis": "v1",
|
|
"lineColor": "#2ed8b6",
|
|
"fillColors": "#2ed8b6",
|
|
"type": "column",
|
|
"fillAlphas": 0.8,
|
|
"title": "New License",
|
|
"valueField": "newLic",
|
|
"labelPosition":"right",
|
|
"labelRotation": 270,
|
|
"labelText":"[[[[value]]]]",
|
|
"balloonText": "[[[[title]]]]<br><span style='font-size:14px'><b>[[[[value]]]]</b> ([[[[percents]]]]%)</span>",
|
|
},
|
|
{
|
|
"id": "g2",
|
|
"valueAxis": "v1",
|
|
"lineColor": "#F22613",
|
|
"fillColors": "#F22613",
|
|
"type": "column",
|
|
"fillAlphas": 0.8,
|
|
"title": "Rent With Penalty",
|
|
"valueField": "renWithPenalty",
|
|
"labelPosition":"right",
|
|
"labelRotation": 270,
|
|
"labelText":"[[[[value]]]]",
|
|
"balloonText": "[[[[title]]]]<br><span style='font-size:14px'><b>[[[[value]]]]</b> ([[[[percents]]]]%)</span>",
|
|
},
|
|
{
|
|
"id": "g3",
|
|
"valueAxis": "v1",
|
|
"lineColor": "#FFC107",
|
|
"fillColors": "#FFC107",
|
|
"type": "column",
|
|
"fillAlphas": 0.8,
|
|
"title": "Rent Without Penalty",
|
|
"valueField": "renWithoutPenalty",
|
|
"labelPosition":"top",
|
|
"labelRotation": 270,
|
|
"labelText":"[[[[value]]]]",
|
|
"balloonText": "[[[[title]]]]<br><span style='font-size:14px'><b>[[[[value]]]]</b> ([[[[percents]]]]%)</span>",
|
|
},
|
|
{
|
|
"id": "g4",
|
|
"valueAxis": "v1",
|
|
"lineColor": "#8E44AD",
|
|
"fillColors": "#8E44AD",
|
|
"type": "column",
|
|
"fillAlphas": 0.8,
|
|
"title": "Non Renewed",
|
|
"valueField": "nonRenewed",
|
|
"labelPosition":"right",
|
|
"labelRotation": 270,
|
|
"labelText":"[[[[value]]]]",
|
|
"balloonText": "[[[[title]]]]<br><span style='font-size:14px'><b>[[[[value]]]]</b> ([[[[percents]]]]%)</span>",
|
|
}
|
|
],
|
|
"chartCursor": {
|
|
"pan": true,
|
|
"valueLineEnabled": true,
|
|
"valueLineBalloonEnabled": true,
|
|
"cursorAlpha": 0,
|
|
"valueLineAlpha": 0.2
|
|
},
|
|
"categoryField": "zone",
|
|
"categoryAxis": {
|
|
"gridPosition": "start",
|
|
"axisAlpha": 0,
|
|
"tickLength": 0
|
|
},
|
|
"legend": {
|
|
"useGraphSettings": true,
|
|
"position": "bottom",
|
|
"spacing":350,
|
|
"markerType":"diamond"
|
|
},
|
|
"balloon": {
|
|
"borderThickness": 2,
|
|
"shadowAlpha": 0
|
|
},
|
|
"export": {
|
|
"enabled": true,
|
|
"position":"top-right"
|
|
},
|
|
"titles": [{
|
|
"text": "Trade License collection Chart",
|
|
"size": 20
|
|
}],
|
|
|
|
});
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
function renderColumnChartAmt(elementId,chartData) {
|
|
AmCharts.makeChart(elementId, {
|
|
"type": "serial",
|
|
"theme": "light",
|
|
"dataProvider": chartData,
|
|
"startEffect":"easeOutSine",
|
|
"startDuration": 1,
|
|
"valueAxes": [{
|
|
"id": "v1",
|
|
"position": "left",
|
|
"gridAlpha":0,
|
|
"autoGridCount": false,
|
|
"labelFunction": function (value) {
|
|
return formatValue(value);
|
|
}
|
|
}],
|
|
"graphs": [
|
|
{
|
|
"id": "g1",
|
|
"valueAxis": "v1",
|
|
"lineColor": "#2ed8b6",
|
|
"fillColors": "#2ed8b6",
|
|
"type": "column",
|
|
"fillAlphas": 0.8,
|
|
//"columnWidth":0.9,
|
|
"title": "New License Amt",
|
|
"valueField": "newLicamt",
|
|
"labelText":"[[[[value]]]]",
|
|
"balloonText": "[[[[title]]]]<br><span style='font-size:14px'><b>[[[[value]]]]</b> ([[[[percents]]]]%)</span>",
|
|
"labelFunction": function(graphDataItem) {
|
|
return formatValue(graphDataItem.values.value);
|
|
},
|
|
"labelPosition":"right",
|
|
"labelRotation": 270,
|
|
"balloonFunction": function(graphDataItem, graph) {
|
|
return "<b>" + graph.title + "</b><br />" + formatValue(graphDataItem.values.value);
|
|
}
|
|
},
|
|
{
|
|
"id": "g2",
|
|
"valueAxis": "v1",
|
|
"lineColor": "#F22613",
|
|
"fillColors": "#F22613",
|
|
"type": "column",
|
|
"fillAlphas": 0.8,
|
|
//"columnWidth":0.9,
|
|
"title": "Rent With Penalty Amt",
|
|
"valueField": "renWithPenaltyamt",
|
|
"labelText":"[[[[value]]]]",
|
|
"labelPosition":"right",
|
|
"labelFunction": function(graphDataItem) {
|
|
return formatValue(graphDataItem.values.value);
|
|
},
|
|
"labelRotation": 270,
|
|
"balloonFunction": function(graphDataItem, graph) {
|
|
return "<b>" + graph.title + "</b><br />" + formatValue(graphDataItem.values.value);
|
|
},
|
|
"balloonText": "[[[[title]]]]<br><span style='font-size:14px'><b>[[[[value]]]]</b> ([[[[percents]]]]%)</span>",
|
|
},
|
|
{
|
|
"id": "g3",
|
|
"valueAxis": "v1",
|
|
"lineColor": "#FFC107",
|
|
"fillColors": "#FFC107",
|
|
"type": "column",
|
|
"fillAlphas": 0.8,
|
|
// "columnWidth":0.9,
|
|
"title": "Rent Without Penalty Amt",
|
|
"valueField": "renWithoutPenaltyamt",
|
|
"labelText":"[[[[value]]]]",
|
|
"labelPosition":"top",
|
|
"balloonText": "[[[[title]]]]<br><span style='font-size:14px'><b>[[[[value]]]]</b> ([[[[percents]]]]%)</span>",
|
|
"labelFunction": function(graphDataItem) {
|
|
return formatValue(graphDataItem.values.value);
|
|
},
|
|
"labelRotation": 270,
|
|
"balloonFunction": function(graphDataItem, graph) {
|
|
return "<b>" + graph.title + "</b><br />" + formatValue(graphDataItem.values.value);
|
|
}
|
|
},
|
|
{
|
|
"id": "g4",
|
|
"valueAxis": "v1",
|
|
"lineColor": "#8E44AD",
|
|
"fillColors": "#8E44AD",
|
|
"type": "column",
|
|
"fillAlphas": 0.8,
|
|
//"columnWidth":0.9,
|
|
"title": "Non Renewed Amt",
|
|
"valueField": "nonRenewedamt",
|
|
"labelText":"[[[[value]]]]",
|
|
"labelPosition":"right",
|
|
"balloonText": "[[[[title]]]]<br><span style='font-size:14px'><b>[[[[value]]]]</b> ([[[[percents]]]]%)</span>",
|
|
"labelFunction": function(graphDataItem) {
|
|
return formatValue(graphDataItem.values.value);
|
|
},
|
|
"labelRotation": 270,
|
|
"balloonFunction": function(graphDataItem, graph) {
|
|
return "<b>" + graph.title + "</b><br />" + formatValue(graphDataItem.values.value);
|
|
}
|
|
}
|
|
],
|
|
//"rotate":true,
|
|
"chartCursor": {
|
|
"pan": true,
|
|
"valueLineEnabled": true,
|
|
"valueLineBalloonEnabled": true,
|
|
"cursorAlpha": 0,
|
|
"valueLineAlpha": 0.2
|
|
},
|
|
"categoryField": "zone",
|
|
"categoryAxis": {
|
|
"gridPosition": "start",
|
|
//"axisAlpha": 0,
|
|
"tickLength": 0
|
|
},
|
|
"legend": {
|
|
"useGraphSettings": true,
|
|
"position": "bottom",
|
|
"spacing":350,
|
|
"markerType":"diamond",
|
|
"valueWidth":100,
|
|
"labelWidth":100
|
|
},
|
|
"balloon": {
|
|
"borderThickness": 2,
|
|
"shadowAlpha": 0
|
|
},
|
|
"export": {
|
|
"enabled": true,
|
|
"position":"top-right"
|
|
},
|
|
"titles": [{
|
|
"text": "Trade License Amount Chart",
|
|
"size": 20
|
|
}],
|
|
|
|
});
|
|
}
|
|
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|