Commit 3f136418 authored by dkasliwal's avatar dkasliwal

Modify function for apply css class and add class in GwtDashboardPage.css file


git-svn-id: http://15.206.35.175/svn/proteus/business-java/trunk@104937 ce508802-f39f-4f6c-b175-0d175dae99d5
parent a3c43c2d
function bubbleChart(jsonData , ContainerId,xAxisLbl,yAxisLbl,zAxisLbl)
function bubbleChart(jsonData , ContainerId,xAxisLbl,yAxisLbl,zAxisLbl,isCreateContainer)
{
//alert("ContainerId in Bubble Dhanendra :"+ContainerId);
jsonData = JSON.parse(jsonData);
if(isCreateContainer)
{
var innerDiv = document.createElement('div');
innerDiv.id = "Innerdiv"+ContainerId;
innerDiv.className ='bubbleChartDiv'
......@@ -10,115 +12,13 @@ function bubbleChart(jsonData , ContainerId,xAxisLbl,yAxisLbl,zAxisLbl)
canvasDiv.className ='bubbleChartDiv'
document.getElementById(ContainerId).appendChild(innerDiv);
document.getElementById("Innerdiv"+ContainerId).appendChild(canvasDiv);
}
var addedCount = 0;
var color = Chart.helpers.color;
var bubbleChartData = {
animation: {
duration: 10000
},
datasets: [{
//xLabels:{"red","green","blue","white","black","pink"},
label: "Mumbai",
backgroundColor: color(window.chartColors.red).alpha(0.9).rgbString(),
borderColor: window.chartColors.red,
hoverBackgroundColor: window.chartColors.green,
borderWidth: 1,
data: [{
x: 500,
y: 35,
r: 15
}]
},
{
//xLabels:{"red","green","blue","white","black","pink"},
label: "Andheri",
backgroundColor: color(window.chartColors.yellow).alpha(0.9).rgbString(),
borderColor: window.chartColors.yellow,
hoverBackgroundColor: window.chartColors.green,
borderWidth: 1,
data: [{
x: 10,
y: 15,
r: 20
}]
},
{
//xLabels:{"red","green","blue","white","black","pink"},
label: "Jogeshwari",
backgroundColor: color(window.chartColors.purple).alpha(0.9).rgbString(),
borderColor: window.chartColors.purple,
hoverBackgroundColor: window.chartColors.green,
borderWidth: 1,
data: [{
x: 15,
y: 20,
r: 25
}]
},
{
//xLabels:{"red","green","blue","white","black","pink"},
label: "Pune",
backgroundColor: color(window.chartColors.pink).alpha(0.9).rgbString(),
borderColor: window.chartColors.pink,
hoverBackgroundColor: window.chartColors.green,
borderWidth: 1,
data: [{
x: 20,
y: 25,
r: 30
}]
},
{
//xLabels:{"red","green","blue","white","black","pink"},
label: "Borivali",
backgroundColor: color(window.chartColors.blue).alpha(0.9).rgbString(),
borderColor: window.chartColors.blue,
hoverBackgroundColor: window.chartColors.green,
borderWidth: 1,
data: [{
x: 25,
y: 30,
r: 35
}]
},
{
//xLabels:{"red","green","blue","white","black","pink"},
label: "Goregaon",
backgroundColor: color(window.chartColors.voilet).alpha(0.9).rgbString(),
borderColor: window.chartColors.voilet,
hoverBackgroundColor: window.chartColors.green,
borderWidth: 1,
data: [{
x: 30,
y: 35,
r: 40
}]
},
{
//xLabels:{"red","green","blue","white","black","pink"},
label: "Malad",
backgroundColor: color(window.chartColors.orange).alpha(0.9).rgbString(),
borderColor: window.chartColors.orange,
hoverBackgroundColor: window.chartColors.green,
borderWidth: 1,
data: [{
x: 35,
y: 40,
r: 45
}]
}]
};
console.log("bubbleChartData from JS :"+JSON.stringify(bubbleChartData));
//jsonData='{"animation": { "duration" : "10000" }, "datasets": [ { "label":"LAHABRA", "backgroundColor":"#FFC0CB", "data":[ { "x":10, "y":10, "r":10 } ] }, { "label":"SILVASSA", "data":[ { "x":15, "y":10, "r":25 } ] }, { "label":"WOONSOCKET", "data":[ { "x":20, "y":30, "r":15 } ] }, { "label":"SOLAPUR", "data":[ { "x":5, "y":10, "r":10 } ] }, { "label":"BESSEMER", "data":[ { "x":40, "y":50, "r":20 } ] }, { "label":"LA HABRA", "data":[ { "x":50, "y":60, "r":10 } ] }, { "label":"WAVERLY", "data":[ { "x":35, "y":45, "r":10 } ] }, { "label":"WOONSOCKET", "data":[ { "x":25, "y":45, "r":10 } ] } ] }';
//jsonData = '{"datasets":[{"label":"LAHABRA", "backgroundColor":"#FFC0CB", "borderWidth":"1", "data":[{"x":2200, "y":625, "r":40}]},{"label":"SOLAPUR", "backgroundColor":"rgba(29,244,62,0.9)", "borderColor":"rgb(29,244,62)", "hoverBackgroundColor":"rgb(29,244,62)", "borderWidth":"1", "data":[{"x":"0", "y":"325", "r":"4"}]},{"label":"SOLAPUR", "backgroundColor":"rgba(121,38,106,0.9)", "borderColor":"rgb(121,38,106)", "borderWidth":"1", "data":[{"x":"1000", "y":"325", "r":"2"}]},{"label":"WOONSOCKET", "backgroundColor":"rgba(77,85,93,0.9)", "borderColor":"rgb(77,85,93)", "hoverBackgroundColor":"rgb(77,85,93)", "borderWidth":"1", "data":[{"x":"220", "y":"650", "r":"1"}]},{"label":"WOONSOCKET", "backgroundColor":"rgba(194,195,209,0.9)", "borderColor":"rgb(194,195,209)", "hoverBackgroundColor":"rgb(194,195,209)", "borderWidth":"1", "data":[{"x":"0", "y":"650", "r":"1"}]}]}';
//jsonData = JSON.parse(jsonData);
var ctx = document.getElementById("canvas"+ContainerId).getContext("2d");
window.myChart = new Chart(ctx, {
type: 'bubble',
// data: bubbleChartData,
data: jsonData,
// position: 'top',
options: {
......
......@@ -4,7 +4,6 @@ var empcode = "";
var subjectName="";
function createFusionChart(jsonObj, containerId, chartContainer,width,height,imageName,userId,rptSubject)
{
//jsonObj='{"dataset":[{"valuePosition":"BELOW", "color":"#01DF3A", "data":[{"value":"19", "showValue":"1", "link":"p-detailsPopUp,width$1000,height$500,toolbar$no,scrollbars$yes,resizable$no-/ibase/dwh/GwtDashboardPage.html?metadataname=monthwiseactual&PRD_SALESDASH=201503&titleName=-Manufactured and Released Batches for Mar-2015&actual_batches_released=19&prd_code=Mar-2015"},{"value":"", "showValue":"1", "link":"p-detailsPopUp,width$1000,height$500,toolbar$no,scrollbars$yes,resizable$no-/ibase/dwh/GwtDashboardPage.html?metadataname=monthwiseactual&PRD_SALESDASH=201503&titleName=-Manufactured and Released Batches for In METIS Not in LIMS&actual_batches_released=&prd_code=In METIS Not in LIMS"}], "seriesname":"Released"},{"valuePosition":"BELOW", "color":"#FF0000", "data":[{"value":"33", "showValue":"1", "link":"p-detailsPopUp,width$1000,height$500,toolbar$no,scrollbars$yes,resizable$no-/ibase/dwh/GwtDashboardPage.html?metadataname=monthwisepending&PRD_SALESDASH=201503&titleName=-Manufactured and Released Batches for Mar-2015&pending_batches=33&prd_code=Mar-2015"},{"value":"", "showValue":"1", "link":"p-detailsPopUp,width$1000,height$500,toolbar$no,scrollbars$yes,resizable$no-/ibase/dwh/GwtDashboardPage.html?metadataname=monthwisepending&PRD_SALESDASH=201503&titleName=-Manufactured and Released Batches for In METIS Not in LIMS&pending_batches=&prd_code=In METIS Not in LIMS"}], "seriesname":"Not Released"},{"valuePosition":"BELOW", "color":"#FFFF00", "data":[{"value":"101", "showValue":"1", "link":"p-detailsPopUp,width$1000,height$500,toolbar$no,scrollbars$yes,resizable$no-/ibase/dwh/GwtDashboardPage.html?metadataname=tbdbatch&PRD_SALESDASH=201503&titleName=-Manufactured and Released Batches for Mar-2015&tbd_batches=101&prd_code=Mar-2015"},{"value":"149", "showValue":"1", "link":"p-detailsPopUp,width$1000,height$500,toolbar$no,scrollbars$yes,resizable$no-/ibase/dwh/GwtDashboardPage.html?metadataname=tbdbatch&PRD_SALESDASH=201503&titleName=-Manufactured and Released Batches for In METIS Not in LIMS&tbd_batches=149&prd_code=In METIS Not in LIMS"}], "seriesname":"In METIS Not in LIMS "}], "categories":{"category":[{"label":"Mar-2015"},{"label":"In METIS Not in LIMS"}]}, "chart":[{"caption":"HALOL - Manufactured & Released Batches-Timescale (06/04/2015)", "bgcolor":"", "showLegend":"1", "useroundedges":"1", "rotateValues":"0", "decimals":"1", "formatNumberScale":"0", "formatNumber":"1", "exportEnabled":"1", "exportAtClient":"0", "exportHandler":"FCExporter", "exportAction":"save", "xAxisName":"Production Completion Month/Target Release Week ", "yAxisName":"Number Of Batches", "anchorRadius":"0", "lineAlpha":"1", "anchorBorderThickness":"3", "pyaxisname":"Number of Batches", "syaxisname":"Number of Batches"}]}';
//off jsonObj='{ "chart": { "caption": "Sales Comparison by Country - 2011 vs 2012 vs 2013", "subcaption": "(Right-click to see the export modes available)", "exportEnabled": "1", "exportatclient": "0", "exportHandler":"FCExporter", "exportAction":"save", "bgcolor": "FFFFFF", "numberprefix": "$", "showvalues": "0", "plotgradientcolor": "", "showalternatehgridcolor": "0", "showplotborder": "0", "labeldisplay": "WRAP", "divlinecolor": "CCCCCC", "canvasborderalpha": "0" }, "categories": [ { "category": [ { "label": "Austria" }, { "label": "Brazil" }, { "label": "France" }, { "label": "Germany" }, { "label": "USA" } ] } ], "dataset": [ { "seriesname": "2011", "color": "008ee4", "data": [ { "value": "25601.34" }, { "value": "20148.82" }, { "value": "17372.76" }, { "value": "35407.15" }, { "value": "38105.68" } ] }, { "seriesname": "2012", "color": "6baa01", "data": [ { "value": "57401.85" }, { "value": "41941.19" }, { "value": "45263.37" }, { "value": "117320.16" }, { "value": "114845.27" } ] }, { "seriesname": "2013", "color": "f8bd19", "data": [ { "value": "45000.65" }, { "value": "44835.76" }, { "value": "18722.18" }, { "value": "77557.31" }, { "value": "92633.68" } ] } ] }';
try
......@@ -79,7 +78,14 @@ function outerDiv(outerDivId,type, cssName,parentId)
outerDiv.id = outerDivId+"Div";
if(cssName == null)
{
/*add condition for change css class for drill down level dashboard*/
if(parentId != "chartContainer")
{
outerDiv.className = 'outerChartContainerDrillDown';
}else{
outerDiv.className = 'outerChartContainer';
}
/*end condition for change css class for drill down level dashboard*/
}else
{
outerDiv.className = cssName;
......@@ -101,22 +107,20 @@ function outerDiv(outerDivId,type, cssName,parentId)
outerDiv.appendChild(iDiv);
if(parentId != "chartContainer")
{
var horizontalLine = document.createElement('hr');
//var horizontalLine = document.createElement('hr');
var horizontalLine = document.createElement('div');
horizontalLine.id = outerDivId+"Divhr";
horizontalLine.className = 'line';
mainOuterDiv.appendChild(horizontalLine);
}
mainOuterDiv.appendChild(outerDiv);
//document.getElementById('chartContainer').appendChild(outerDiv);
document.getElementById(parentId).appendChild(mainOuterDiv);
}
function outerDivDrillDown(outerDivId,type, cssName,parentId)
{
alert("in outerDivDrillDown parentId :"+parentId);
//alert("in outerDivDrillDown parentId :"+parentId);
/*added code to remove frame container if exists on change of view by SWATI on 09 May 2016*/
var elem = document.getElementById("frameContainerDiv");
if(elem!==null)
......
......@@ -1410,15 +1410,17 @@ color: #999; !important;
{
width:82%;
position:relative;
MARGIN-TOP: 20PX;
/* MARGIN-TOP: 20PX; */
MARGIN-LEFT: 20PX;
MIN-WIDTH: 300PX;
-webkit-box-shadow: -1px 0px 7px 1px rgba(153,145,153,0.77);
/*remove shadow and add border*/
/* -webkit-box-shadow: -1px 0px 7px 1px rgba(153,145,153,0.77);
-moz-box-shadow: -1px 0px 7px 1px rgba(153,145,153,0.77);
box-shadow: -1px 0px 7px 1px rgba(153,145,153,0.77);
box-shadow: -1px 0px 7px 1px rgba(153,145,153,0.77); */
background-color: #fff;
float: left;
margin-bottom: 15px;
border : 1px solid #ccc;
}
/*END CSS for SmartFilter on Date 28-08-15*/
......@@ -1519,10 +1521,10 @@ color: #999; !important;
height: 25px;
width: 25px;
border-radius: 50%;
background: gray;
background: #f2f2f2;
padding: 2px;
text-align: center;
color: white;
/* text-align: center;
color: white; */
padding-top: 2px;
}
.cardSalesPersonTitle
......@@ -1637,7 +1639,10 @@ color: #999; !important;
cursor: pointer;
text-align: center;
font-weight: bold;
background: #606061
background: #606061;
/*add font-size by dhanendra on date 01-03-2017*/
font-size: 25px;
/*end font-size by dhanendra on date 01-03-2017*/
}
/* Added by Chetan Mahajan [For add multiple chid div into parent div in multiple report and draw border for only parent div] req id:S16EBAS003 on 30-AUG-2016 Start */
.outerChartContainerPos1of1FirstChild
......@@ -1674,11 +1679,11 @@ color: #999; !important;
{
}
.line {
/*Css class commnet and create new css with new change. on date 01-03-2017*/
/* .line {
width:97.5%;
/* margin-top:8px; */
margin-top:8px;
border: 1px dashed #CCC;
margin-bottom: 15px;
}
.line:after {
......@@ -1690,7 +1695,7 @@ color: #999; !important;
display: block;
width: 0;
z-index: 1;
/* top: 8px; */
top: 8px;
left: 50%;
}
.line:before {
......@@ -1702,9 +1707,33 @@ color: #999; !important;
display: block;
width: 0;
z-index: 1;
/* top: 9px; */
top: 9px;
left: 50%;
} */
.line
{
display: inline-block;
position: relative;
top: -7px;
width:97.5%;
}
.line:after {
content: '';
display: block;
position: absolute;
left: 50%;
bottom: 100%;
width: 0;
height: 0;
border-bottom: 12px solid #8bc3fb;
border-top: 12px solid transparent;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
}
/*Css class commnet and create new css with new change. on date 01-03-2017*/
/*End CSS Class for Drill Down Chart by Dhanendra on date 20-10-2016*/
......@@ -1996,3 +2025,47 @@ width:26%;
float: right;
}
/*End css for dispay summary total value on component title panel*/
/*Add css class for drill down level dashboard for change border color by dhanendra on date 01-03-2017*/
.outerChartContainerPos1of1drilldown
{
width:97.5%;
position:relative;
MARGIN-TOP: -10PX;
MARGIN-LEFT: 20PX;
MIN-WIDTH: 300PX;
background-color: #fff;
float: left;
margin-bottom: 15px;
border : 1px solid #8bc3fb;
}
.outerChartContainerDrillDown
{
width:97.5%;
position:relative;
float:left;
background-color: #fff;
MARGIN-TOP: -10PX;
MARGIN-LEFT: 20PX;
margin-bottom: 15px;
border : 1px solid #8bc3fb;
}
.outerChartContainerSmtFltr1of1drilldown
{
width:82%;
position:relative;
MARGIN-TOP: -10PX;
MARGIN-LEFT: 20PX;
MIN-WIDTH: 300PX;
background-color: #fff;
float: left;
margin-bottom: 15px;
border : 1px solid #8bc3fb;
}
.userImageChar
{
padding-top: 5px;
text-align: center;
color: #878787;
}
/*End css class for drill down level dashboard for change border color by dhanendra on date 01-03-2017*/
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment