- Home
- Forum
- ASP.NET Core - EJ 2
- Inquiry about blank in Accumulation chart
Inquiry about blank in Accumulation chart
Hi :)
I want to eliminate the blank that occurs when I create an Accumulation chart.
The attached file was not uploaded, so I am sending it to you by e-mail. Please check it.
.cshtml
@{
ViewData["Title"] = "Home Page";
var labelFont = new Syncfusion.EJ2.CircularGauge.CircularGaugeFont { FontFamily = "Segoe UI", Opacity = 1, Size = "12px", FontWeight = "Regular" };
}
<div class="row">
<div class="col-xl-9">
<div class="row">
<div class="col-xl-12">
<h5>DESIGN BASIS</h5>
</div>
</div>
<div class="row">
<div class="col-xl-4">
<div class="card">
<div class="card-header">
<a class="card-title">Rainfall intensity</a>
</div>
<div class="card-body" style="padding: 5px; ">
<div class="row">
<div class="col-6">
<center>
<img src="~/content/icon/Rainy.png" height="110" />
</center>
</div>
<div class="col-6" style="margin-top:30px;">
<a class="card-text" style="color: #0c4da2; font-weight: bold; font-size: 30px;">@ViewBag.Rainfall</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-4">
<div class="card">
<div class="card-header">
<a class="card-title">Wind Speed</a>
</div>
<div class="card-body" style="padding: 5px;">
<div class="row">
<div class="col-6">
<center>
<img src="~/content/icon/Wind speed.PNG" height="110" />
</center>
</div>
<div class="col-6" style="margin-top:30px;">
<a class="card-text" style="color: #0c4da2; font-weight: bold; font-size: 30px;">@ViewBag.Wind</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-4">
<div class="card">
<div class="card-header">
<a class="card-title">Seismic Design Catagory</a>
</div>
<div class="card-body" style="padding: 5px;">
<div class="row">
<div class="col-6">
<center>
<img src="~/content/icon/Seismic Site class.PNG" height="110" />
</center>
</div>
<div class="col-6" style="margin-top:30px;">
<a class="card-text" style="color: #0c4da2; font-weight: bold; font-size: 30px; margin-left:45px;">@ViewBag.Seismic</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row" style="margin-top:10px;">
<div class="col-xl-12">
@*<ejs-pdfviewer id="pdfviewer" serviceUrl="/api/Viewer" documentPath="\\66.10.53.40\cap\Project_PDF\TEST_PDF_01.pdf" height="650px"></ejs-pdfviewer>*@
<ejs-pdfviewer id="pdfviewer" serviceUrl="/api/Viewer" documentPath="~/BOARD/130700/R2B-P2-207-02-E-PL-00001_A3_REF_UNIT PLOTPLAN_210312.pdf" height="650px"></ejs-pdfviewer>
</div>
</div>
</div>
<div class="col-xl-3" style="border-left: 1px solid #cecece;">
<div class="row">
<div class="col-xl-12">
<h5>INFORM STATUS</h5>
</div>
</div>
<div class="row">
<div class="col-xl-12">
<ejs-accordion id="defaultAccordion" expandMode="Single" clicked="DashAccordionClicked">
<e-accordion-accordionitems>
<e-accordion-accordionitem expanded="true" header="#HeaderTemplateVV" content="#Content_VV"></e-accordion-accordionitem>
<e-accordion-accordionitem header="#HeaderTemplateHV" content="#Content_HV"></e-accordion-accordionitem>
<e-accordion-accordionitem header="#HeaderTemplateHE" content="#Content_HE"></e-accordion-accordionitem>
<e-accordion-accordionitem header="#HeaderTemplateAP" content="#Content_AP"></e-accordion-accordionitem>
<e-accordion-accordionitem header="#HeaderTemplateSS" content="#Content_SS"></e-accordion-accordionitem>
</e-accordion-accordionitems>
</ejs-accordion>
</div>
</div>
</div>
</div>
@*Accordion Header Template*@
<div id="HeaderTemplateVV" class="row" style="display:none;">
<div class="col-xl-8">
Vertical Veseel
</div>
<div class="col-xl-4 badge-default">
<span class="e-badge">New : @ViewBag.CountVV</span>
</div>
</div>
<div id="HeaderTemplateHV" class="row" style="display:none;">
<div class="col-xl-8">
Horizontal Vessel
</div>
<div class="col-xl-4 badge-default">
<span class="e-badge">New : @ViewBag.CountHV</span>
</div>
</div>
<div id="HeaderTemplateHE" class="row" style="display:none;">
<div class="col-xl-8">
Heat exchanger
</div>
<div class="col-xl-4 badge-default">
<span class="e-badge">New : @ViewBag.CountHE</span>
</div>
</div>
<div id="HeaderTemplateAP" class="row" style="display:none;">
<div class="col-xl-8">
API Pump
</div>
<div class="col-xl-4 badge-default">
<span class="e-badge">New : @ViewBag.CountAP</span>
</div>
</div>
<div id="HeaderTemplateSS" class="row" style="display:none;">
<div class="col-xl-8">
Steel Structure
</div>
<div class="col-xl-4 badge-default">
<span class="e-badge">New : @ViewBag.CountSS</span>
</div>
</div>
@*Accordion Content*@
<div id="Content_VV" style="display:none; width:auto; height:auto;">
<div class="row">
<div class="col">
<ejs-accumulationchart id="Chart_VV" enableAnimation="false">
<e-accumulation-series-collection>
<e-accumulation-series dataSource="@ViewBag.ChartData" xName="xValue" yName="yValue" name="Vertical Vessel" startAngle="0" endAngle="360" innerRadius="70%" radius="">
<e-accumulationseries-datalabel visible="true" name="text" position="Outside">
<e-font fontWeight="500"></e-font>
</e-accumulationseries-datalabel>
</e-accumulation-series>
</e-accumulation-series-collection>
<e-accumulationchart-legendsettings visible="false"></e-accumulationchart-legendsettings>
<e-accumulationchart-tooltipsettings enable="false"></e-accumulationchart-tooltipsettings>
</ejs-accumulationchart>
</div>
</div>
<div class="row">
<div class="col">
<ejs-grid id="Grid_VV" gridLines="Both" allowTextWrap="true" rowHeight="30" created="DataBinding" height="200">
<e-grid-filterSettings type="Excel"></e-grid-filterSettings>
<e-grid-textwrapsettings wrapMode="Header"></e-grid-textwrapsettings>
<e-grid-selectionsettings mode="Cell" type="Single"></e-grid-selectionsettings>
<e-grid-columns>
<e-grid-column field="ITEM" headerText="Item No." textAlign="Center" width="80"></e-grid-column>
<e-grid-column headerText="Search" textAlign="Center" width="70" template="#SearchTemplate"></e-grid-column>
</e-grid-columns>
</ejs-grid>
</div>
</div>
</div>
<div id="Content_HV" style="display:none;">
<div class="row" style="background-color:palegoldenrod; height:290px;">
<div class="col-xl-12">
1
</div>
</div>
<div class="row" style="background-color: aquamarine; height: 290px;">
<div class="col-xl-12">
2
</div>
</div>
</div>
<div id="Content_HE" style="display:none;">
<div class="row" style="background-color:palegoldenrod; height:290px;">
<div class="col-xl-12">
1
</div>
</div>
<div class="row" style="background-color: aquamarine; height: 290px;">
<div class="col-xl-12">
2
</div>
</div>
</div>
<div id="Content_AP" style="display:none;">
<div class="row" style="background-color:palegoldenrod; height:290px;">
<div class="col-xl-12">
1
</div>
</div>
<div class="row" style="background-color: aquamarine; height: 290px;">
<div class="col-xl-12">
2
</div>
</div>
</div>
<div id="Content_SS" style="display:none;">
<div class="row" style="background-color:palegoldenrod; height:290px;">
<div class="col-xl-12">
1
</div>
</div>
<div class="row" style="background-color: aquamarine; height: 290px;">
<div class="col-xl-12">
2
</div>
</div>
</div>
<script id="SearchTemplate" type="text/x-template">
<span id="Search" class="btn btn-mini e-icons e-circle-info"></span>
</script>
<script>
document.addEventListener('DOMContentLoaded', function () {
var pieObj = document.getElementById('Chart_VV').ej2_instances[0];
pieObj.refresh();
});
function DataBinding(GridId) {
if (GridId == null) GridId = "Grid_VV";
var Grid = document.getElementById(GridId).ej2_instances[0];
Grid.dataSource = new ej.data.DataManager({
url: "/Home/GridDataBinding?sJobNo=" + sessionStorage.getItem('JobKey') + "&sType=" + GridId,
adaptor: new ej.data.UrlAdaptor()
});
}
function DashAccordionClicked(args) {
if (args.item.content != null && args.item.content != undefined && args.item.content != "") {
var GridId = "Grid_" + args.item.content.substr(9);
DataBinding(GridId);
}
}
</script>
<style>
.card-header {
padding: 3px;
}
@*Chart size*@
.e-accumulationchart {
height: 50% !important;
width: 80% !important;
}
/*badge Style*/
.badge-default .e-btn {
position: relative;
}
.e-badge {
background-color: #CC3D3D;
color: #ffffff;
}
.e-acrdn-header-content {
width:100%;
}
</style>
SIGN IN To post a reply.
1 Reply
SB
Swetha Babu
Syncfusion Team
March 29, 2022 09:04 AM UTC
Hi TaeWook,
Greetings from Syncfusion.
Radius for the pie will be calculated based on the minimum of Width and Height for the chart . In your sample example, we can see height is greater than width, so its showing like this. So please set the height and width of the parent div based on your requirement. Please find the below code snippet for your reference.
Code Snippet:
|
<div style="height: 500px;width: 400px"> <ejs-accumulationchart id="Chart_VV" enableAnimation="false"> <e-accumulation-series-collection> <e-accumulation-series dataSource="@ViewBag.ChartData" xName="xValue" yName="yValue" name="Vertical Vessel" startAngle="0" endAngle="360" innerRadius="70%" radius=""> <e-accumulationseries-datalabel visible="true" name="text" position="Outside"> <e-font fontWeight="500"></e-font> </e-accumulationseries-datalabel> </e-accumulation-series> </e-accumulation-series-collection> <e-accumulationchart-legendsettings visible="false"></e-accumulationchart-legendsettings> <e-accumulationchart-tooltipsettings enable="false"></e-accumulationchart-tooltipsettings> </ejs-accumulationchart> </div> |
Kindly, revert us if you have any concerns.
Regards,
Swetha
SIGN IN To post a reply.
- 1 Reply
- 2 Participants
-
TK TaeWook Kang
- Mar 28, 2022 10:30 PM UTC
- Mar 29, 2022 09:04 AM UTC
