hi I'm going crazy but I can't find a solution or the solution is right before my eyes and I can't see it... I've one page whit 3 pie graphs and 2 column chart. when I open the page on browser the pie Graphs images come out of their conteiner, why ?!?! when i resize the page the Graphs will be resized, so I enlarge full screen the page and the Graphs remain centered. Below my code, thank how can show me wath I can't see.
@page
@model GraphModel
<div>
<ul class="nav nav-pills flex-column">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">@Model.CurYr</a>
<div class="dropdown-menu" style="">
@foreach (var item in Model.ListEYears)
{
<a class="dropdown-item" href="[email protected]">@item.EYear</a>
}
</div>
</li>
</ul>
</div>
<div class="control-section">
<ejs-dashboardlayout id="editableLayout1" columns="9" cellSpacing="@Model.CellSpacing" cellAspectRatio="0.8" allowDragging="false" allowResizing="false" created="onCreated">
<e-dashboardlayout-panels>
<e-dashboardlayout-panel sizeX="3" sizeY="3" row="0" col="0">
<e-content-template>
<div>
<div class="e-panel-container" id="chart1">
<div class="e-panel-header">
<div class="title" id="header1">Presenza di codici negativi</div>
</div>
<div class="e-panel-content">
@* *@
<ejs-accumulationchart style="height: 100%; width: 100%" id="ctn_CodNeg" load="load" pointRender="onPointRender" enableAnimation="true" enableBorderOnMouseMove="false" enableSmartLabels="false" width="100%" height="100%">
<e-accumulationchart-tooltipsettings enable="true" format="${point.tooltip}" enableHighlight="true"></e-accumulationchart-tooltipsettings>
<e-accumulationchart-legendsettings visible="true"></e-accumulationchart-legendsettings>
<e-accumulation-series-collection>
<e-accumulation-series tooltipMappingName="ValoriDesc" dataSource="@Model.ListCodNeg" xName="Valori" yName="Tot_Value" name="Presenza di codici negativi">
<e-accumulationseries-datalabel name="DataLabelMappingName" textWrap="Wrap" visible="true" position="@Syncfusion.EJ2.Charts.AccumulationLabelPosition.Outside">
<e-font fontWeight="100"></e-font>
<e-connectorstyle length="20px" type="@Syncfusion.EJ2.Charts.ConnectorType.Curve"></e-connectorstyle>
</e-accumulationseries-datalabel>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
</div>
</div>
</div>
</e-content-template>
</e-dashboardlayout-panel>
<e-dashboardlayout-panel sizeX="3" sizeY="3" row="0" col="3">
<e-content-template>
<div>
<div class="e-panel-container" id="chart2">
<div class="e-panel-header">
<div class="title" id="header2">Presenza di codici valorizzati ma con quantità zero</div>
</div>
<div class="e-panel-content">
@*pie chart*@
<ejs-accumulationchart style="height: 100%; width: 100%" id="ctn_QtaZero" load="load" pointRender="onPointRender" enableAnimation="true" enableBorderOnMouseMove="true" enableSmartLabels="true" width="100%" height="100%">
<e-accumulationchart-tooltipsettings enable="true" format="${point.tooltip}" enableHighlight="true"></e-accumulationchart-tooltipsettings>
<e-accumulationchart-legendsettings visible="true"></e-accumulationchart-legendsettings>
<e-accumulation-series-collection>
<e-accumulation-series tooltipMappingName="ValoriDesc" dataSource="@Model.ListQtaZero" xName="Valori" yName="Tot_Value" name="Presenza di codici valorizzati ma con quantità zero">
<e-accumulationseries-datalabel name="DataLabelMappingName" visible="true" position="@Syncfusion.EJ2.Charts.AccumulationLabelPosition.Outside">
<e-font fontWeight="100"></e-font>
<e-connectorstyle length="20px" type="@Syncfusion.EJ2.Charts.ConnectorType.Curve"></e-connectorstyle>
</e-accumulationseries-datalabel>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
</div>
</div>
</div>
</e-content-template>
</e-dashboardlayout-panel>
<e-dashboardlayout-panel sizeX="3" sizeY="3" row="0" col="6">
<e-content-template>
<div>
<div class="e-panel-container" id="chart3">
<div class="e-panel-header">
<div class="title" id="header3">Analisi movimentazione del magazzino</div>
</div>
<div class="e-panel-content">
@*pie chart*@
<ejs-accumulationchart style="height: 100%; width: 100%" id="ctn_MovMag" load="load" pointRender="onPointRender" enableAnimation="true" enableBorderOnMouseMove="true" enableSmartLabels="true" width="100%" height="100%">
<e-accumulationchart-tooltipsettings enable="true" format="${point.tooltip}" enableHighlight="true"></e-accumulationchart-tooltipsettings>
<e-accumulationchart-legendsettings visible="true"></e-accumulationchart-legendsettings>
<e-accumulation-series-collection>
<e-accumulation-series tooltipMappingName="MovingDesc" dataSource="@Model.ListMovMag" xName="MovingItem" yName="Tot_Value" innerRadius="40%" radius="75%" name="Analisi movimentazione del magazzino">
<e-accumulationseries-datalabel name="DataLabelMappingName" visible="true" position="@Syncfusion.EJ2.Charts.AccumulationLabelPosition.Outside">
<e-font fontWeight="100"></e-font>
<e-connectorstyle length="20px" type="@Syncfusion.EJ2.Charts.ConnectorType.Curve"></e-connectorstyle>
</e-accumulationseries-datalabel>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
</div>
</div>
</div>
</e-content-template>
</e-dashboardlayout-panel>
<e-dashboardlayout-panel sizeX="6" sizeY="3" row="3" col="0">
<e-content-template>
<div>
<div class="e-panel-container" id="chart5">
<div class="e-panel-header">
<div class="title" id="header4">Analisi variance impact</div>
</div>
<div class="e-panel-content">
@*pie chart*@
<ejs-chart style="height: 100%; width: 100%" id="ctn_Variance" load="load" pointRender="onPointRender" enableAnimation="true" enableBorderOnMouseMove="True" enableSmartLabels="false" width="100%" height="100%">
<e-chart-tooltipsettings enable="true" shared="true" header="<b>${point.tooltip}</b>"> </e-chart-tooltipsettings>
<e-chart-legendsettings visible="true" enableHighlight="true">
</e-chart-legendsettings>
<e-chart-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.Category" interval="1">
<e-majridlines width="0"></e-majridlines>
<e-majorticklines width="0"></e-majorticklines>
</e-chart-primaryxaxis>
<e-chart-primaryyaxis title="Medal Count" maximum="@Model.Max_Value_Variance" interval="@Model.Scale_Value_Variance">
<e-majorticklines width="0"></e-majorticklines>
<e-linestyle width="0"></e-linestyle>
</e-chart-primaryyaxis>
<e-chart-chartarea>
<e-chartarea-border width="0"></e-chartarea-border>
</e-chart-chartarea>
<e-series-collection>
<e-series dataSource="@Model.ListVariance" xName="VarianceBelt" yName="VarianceImpact" tooltipMappingName="VarianceBelt" name="Variance" columnSpacing="0.1" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column">
</e-series>
</e-series-collection>
</ejs-chart>
</div>
</div>
</div>
</e-content-template>
</e-dashboardlayout-panel>
<e-dashboardlayout-panel sizeX="9" sizeY="3" row="6" col="0">
<e-content-template>
<div>
<div class="e-panel-container" id="chart5">
<div class="e-panel-header">
<div class="title" id="header5">Analisi Price impact</div>
</div>
<div class="e-panel-content">
@*pie chart*@
<ejs-chart style="height: 100%; width: 100%" id="ctn_Price" load="load" pointRender="onPointRender" enableAnimation="true" enableBorderOnMouseMove="true" enableSmartLabels="false" width="100%" height="100%">
<e-chart-tooltipsettings enable="true" shared="true" header="<b>${point.tooltip}</b>">
</e-chart-tooltipsettings>
<e-chart-legendsettings visible="true" enableHighlight="true">
</e-chart-legendsettings>
<e-chart-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.Category" interval="1">
<e-majridlines width="0"></e-majridlines>
<e-majorticklines width="0"></e-majorticklines>
</e-chart-primaryxaxis>
<e-chart-primaryyaxis title="Medal Count" maximum="@Model.Max_Value_Price" interval="@Model.Scale_Value_Price">
<e-majorticklines width="0"></e-majorticklines>
<e-linestyle width="0"></e-linestyle>
</e-chart-primaryyaxis>
<e-chart-chartarea>
<e-chartarea-border width="0"></e-chartarea-border>
</e-chart-chartarea>
<e-series-collection>
<e-series dataSource="@Model.ListPrice" xName="PriceBelt" yName="PricePrev" tooltipMappingName="PriceDesc" name="@Model.PrevYr" columnSpacing="0.1" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column">
</e-series>
<e-series dataSource="@Model.ListPrice" xName="PriceBelt" yName="PriceCur" tooltipMappingName="PriceDesc" name="@Model.CurYr" columnSpacing="0.1" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column">
</e-series>
</e-series-collection>
</ejs-chart>
</div>
</div>
</div>
</e-content-template>
</e-dashboardlayout-panel>
</e-dashboardlayout-panels>
</ejs-dashboardlayout>
</div>
<script type="text/javascript">
function onCreated(args) {
var dashboardObject = document.getElementById("editableLayout1").ej2_instances[0];
var panels = [ { "sizeX": 1, "sizeY": 1, "row": 0, "col": 0 },
{ "sizeX": 1, "sizeY": 1, "row": 0, "col": 1 },
{ "sizeX": 2, "sizeY": 1, "row": 1, "col": 0 }
]
if (ej.base.Browser.isDevice) {
dashboardObject.panels = panels;
dashboardObject.columns = 2;
dashboardObject.cellAspectRatio = 1;
setTimeout(() => {
dashboardObject.refresh();
}, 100);
}
}
var layoutColor;
function onPointRender(args){
var selectedTheme = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Fluent2';
if (selectedTheme.indexOf('dark') > -1) {
if (selectedTheme.indexOf('material') > -1) {
args.border.color = '#303030';
this.layoutColor = '#303030';
}
else if (selectedTheme.indexOf('bootstrap5') > -1) {
args.border.color = '#212529';
this.layoutColor = '#212529';
}
else if (selectedTheme.indexOf('bootstrap') > -1) {
args.border.color = '#1A1A1A';
this.layoutColor = '#1A1A1A';
}
else if (selectedTheme.indexOf('fabric') > -1) {
args.border.color = '#201f1f';
this.layoutColor = '#201f1f';
}
else if (selectedTheme.indexOf('fluent') > -1) {
args.border.color = '#252423';
this.layoutColor = '#252423';
}
else if (selectedTheme.indexOf('bootstrap') > -1) {
args.border.color = '#1A1A1A';
this.layoutColor = '#1A1A1A';
}
else if (selectedTheme.indexOf('tailwind') > -1) {
args.border.color = '#1F2937';
this.layoutColor = '#1F2937';
}
else {
args.border.color = '#222222';
this.layoutColor = '#222222';
}
}
else if (selectedTheme.indexOf('highcontrast') > -1) {
args.border.color = '#000000';
this.layoutColor = '#000000';
}
else if (selectedTheme.indexOf('fluent2-highcontrast') > -1) {
args.border.color = '#000000';
this.layoutColor = '#000000';
}
else {
args.border.color = '#FFFFFF';
this.layoutColor = '#FFFFFF';
}
if (selectedTheme.indexOf('highcontrast') > -1 || selectedTheme.indexOf('dark') > -1) {
var element = document.querySelector('#header1');
element.style.color = '#F3F2F1';
var chart1= document.getElementById('chart1');
chart1.style.setProperty('background', this.layoutColor);
var chart2= document.getElementById('chart2');
chart2.style.setProperty('background', this.layoutColor);
var chart3= document.getElementById('chart3');
chart3.style.setProperty('background', this.layoutColor);
var elementBody = document.getElementById('linechart');
elementBody.style.setProperty('background', this.layoutColor);
var element1 = document.querySelector('#header2');
element1.style.color = '#F3F2F1';
var element1Body = document.getElementById('pie');
element1Body.style.setProperty('background', this.layoutColor);
var element2 = document.querySelector('#header3');
element2.style.color = '#F3F2F1';
var element2Body = document.getElementById('spline');
element2Body.style.setProperty('background', this.layoutColor);
}
}
function load(args) {
var selectedTheme = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Fluent2';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast').replace(/-highContrast/i, 'HighContrast').replace(/5.3/i, '5'));
};
function onPieLoad(args) {
var indexedTheme = location.hash.split('/')[1];
indexedTheme = indexedTheme ? indexedTheme : 'Fluent2';
args.accumulation.theme = (indexedTheme.charAt(0).toUpperCase() + indexedTheme.slice(1).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast').replace(/-highContrast/i, 'HighContrast').replace(/5.3/i, '5'));
};
document.addEventListener('DOMContentLoaded', function () {
var lineObj = document.getElementById('linechart').ej2_instances[0];
var pieObj = document.getElementById('pie').ej2_instances[0];
var splineObj = document.getElementById('spline').ej2_instances[0];
lineObj.refresh(); pieObj.refresh(); splineObj.refresh();
});
</script>
<style>
.e-dashboardlayout {
padding: 10px;
z-index: 0;
/*background: none;*/
}
.e-panel {
cursor: auto !important;
/*background: none;*/
}
.e-panel-content {
height: calc(100% - 2px) !important;
overflow: hidden;
width: 100%;
}
.e-chart, .e-accumulationchart{
height: inherit !important;
width: inherit !important;
}
.e-panel-header {
background: none;
border: none !important;
height: 10px !important;
display: flex;
align-items: center;
justify-content: center;
}
.template {
height: 100%;
width: 100%;
}
#control-container {
/*background: none;*/
padding: 0px !important;
}
#gradient-chart stop {
stop-color: #2485FA;
}
#gradient-chart1 stop {
stop-color: #FEC200;
}
.ellipse[id*=_Trackball_1] {
stroke-width: 1 !important;
}
.e-chart-focused:focus {
outline: none !important;
}
.title {
font-size: 15px;
font-weight: bold;
color: #737373;
}
</style>
<svg style={{height:0}}>
<defs>
<linearGradient id="gradient-chart" style={{opacity:0.75}} className="chart-gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0"></stop>
<stop offset="1"></stop>
</linearGradient>
<linearGradient id="gradient-chart1" style={{opacity:0.75}} className="chart-gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0"></stop>
<stop offset="1"></stop>
</linearGradient>
</defs>
</svg>
@section Scripts {
}
<style>
#control-container {
padding: 0px !important;
}
</style>