- Home
- Forum
- ASP.NET Core
- Chart in dashboardlayout not rendering correctly on first load
Chart in dashboardlayout not rendering correctly on first load
I'm trying to add a chart to a dashboardlayout (in a sidebar). On first load the chart is rendered below the dashboardlayout at 100% width of the page. If I then resize the browser window the chart pops to the right position and size. Could anyone tell me what the problem is?
Link to video
Code used:
<div class="control-section" id="section">
<div class="control-section" style="padding-left: 25px; padding-right: 25px;">
<div class="control-wrapper">
<div class="content-wrapper">
<div id="head">
<div class="header">
<div class="menu"><span class="e-icons expand" onclick="toolbarCliked();"></span></div>
<div class="searchContent">
<div class="analysis">Analysis Dashboard</div>
</div>
<div class="right-content">
<div class="information">
@* <span class="e-avatar e-avatar-medium e-avatar-circle image"></span> *@
<div class="text-content">Welkom @ViewBag.UserName</div>
</div>
</div>
</div>
</div>
<!-- sidebar element declaration -->
<ejs-sidebar id="dockSidebar" type="Over" enableDock="true" dockSize="60px" target="#target" width="220px" isOpen="false" type="Auto" class="sidebar-menu">
<e-content-template>
<div class="content-area">
<div class="dock">
<ejs-menu id="dockMenu" items="@ViewBag.MainMenuItems" orientation="Vertical" cssClass="dock-menu">
</ejs-menu>
</div>
</div>
</e-content-template>
</ejs-sidebar>
<!-- end of sidebar element -->
<div id="target">
<div class="sidebar-content">
<div class="dashboardParent">
<ejs-dashboardlayout id="dynamicLayout" columns="4" cellAspectRatio="@Model.aspectRatio" cellSpacing="@Model.cellSpacing" allowDragging="false" allowResizing="false">
<e-dashboardlayout-panels>
<e-dashboardlayout-panel row="0" col="0" sizeX="1" sizeY="1">
<e-content-template>
<div>
<div class="e-panel-container">
<ejs-accumulationchart style="height: 100%; width: 100%" id="pie" 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="false">
</e-accumulationchart-legendsettings>
<e-accumulation-series-collection>
<e-accumulation-series tooltipMappingName="Product" dataSource="@Model.PieData" xName="Product" yName="Percentage" innerRadius="40%" radius="75%" startAngle="270" endAngle="270" palettes="@Model.Palettes">
<e-accumulationseries-datalabel name="text" visible="true" position="@Syncfusion.EJ2.Charts.AccumulationLabelPosition.Outside">
<e-connectorstyle length="10px" type="@Syncfusion.EJ2.Charts.ConnectorType.Curve"></e-connectorstyle>
</e-accumulationseries-datalabel>
<e-accumulationseries-border width="3"></e-accumulationseries-border>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
@* <ejs-circulargauge id="circular" width="100%" height="80%" load="gaugeLoad()" title="medewerkers met voldoende aantal toolbox registraties afgelopen jaar">
<e-circulargauge-axes>
<e-circulargauge-axis startAngle="270" endAngle="90" minimum="0" maximum="100" radius="100%">
<e-axis-linestyle width="0"></e-axis-linestyle>
<e-axis-labelstyle offset="-40" position="Outside">
</e-axis-labelstyle>
<e-axis-majorticks height="12" width="1.5" interval="20" offset="25"></e-axis-majorticks>
<e-axis-minorticks height="0" color="transparent"></e-axis-minorticks>
<e-circulargauge-annotations>
<e-circulargauge-annotation content='<div style="align-content: center; font-size:15px;margin-top:10px;font-family:inherit;">80 %</div>' angle="0" radius="-10%" zIndex="1"></e-circulargauge-annotation>
</e-circulargauge-annotations>
<e-circulargauge-pointers>
<e-circulargauge-pointer radius="70%" needleEndWidth="2" pointerWidth="5" value="80">
<e-pointer-cap radius="8">
<e-pointers-cap-border width="2"></e-pointers-cap-border>
</e-pointer-cap>
</e-circulargauge-pointer>
</e-circulargauge-pointers>
<e-circulargauge-ranges>
<e-circulargauge-range start="0" end="100" startWidth="20" endWidth="20" color="#F0FF00" radius="80%" legendText="Poor"></e-circulargauge-range>
</e-circulargauge-ranges>
</e-circulargauge-axis>
</e-circulargauge-axes>
</ejs-circulargauge> *@
</div>
</div>
</e-content-template>
</e-dashboardlayout-panel>
<e-dashboardlayout-panel row="0" col="1" sizeX="1" sizeY="1">
<e-content-template>
<div>
<div class="e-panel-container">
<div>
</div>
</div>
</div>
</e-content-template>
</e-dashboardlayout-panel>
<e-dashboardlayout-panel row="0" col="2" sizeX="1" sizeY="1">
<e-content-template>
<div style="background: #f0ff00;">
<div class="e-panel-container" style="align-content: center;">
<div style="margin: auto; text-align: center;">
<div>
<label style="font-weight:bold; font-size: 3vw;">@Model.MeetingsLastYear</label>
</div>
<div>
<label style="font-size: 1.2vw;">bijeenkomsten in het afgelopen jaar</label>
</div>
</div>
</div>
</div>
</e-content-template>
</e-dashboardlayout-panel>
<e-dashboardlayout-panel row="0" col="3" sizeX="1" sizeY="1">
<e-content-template>
<div style="background: #f0ff00;">
<div class="e-panel-container" style="align-content: center;">
<div style="margin: auto; text-align: center;">
<div>
<label style="font-weight:bold; font-size: 3vw;">@Model.ToolboxMeetingsLastYear</label>
</div>
<div>
<label style="font-size: 1.2vw;">toolboxen tijdens bijeenkomsten</label>
</div>
</div>
</div>
</div>
</e-content-template>
</e-dashboardlayout-panel>
<e-dashboardlayout-panel row="1" col="0" sizeX="2" sizeY="1">
<e-content-template>
<div>
<div class="e-panel-container">
<div class="e-panel-header" style="background: #f0ff00">
<div>
Voldoende uitgevoerde inspecties en toolboxregistraties
</div>
</div>
<div>
</div>
</div>
</div>
</e-content-template>
</e-dashboardlayout-panel>
<e-dashboardlayout-panel row="1" col="2" sizeX="2" sizeY="1">
<e-content-template>
<div>
<div class="e-panel-container">
<div class="e-panel-header" style="background: #f0ff00">
<div>
Aantal inspecties en registraties
</div>
</div>
<div>
</div>
</div>
</div>
</e-content-template>
</e-dashboardlayout-panel>
<e-dashboardlayout-panel row="2" col="0" sizeX="4" sizeY="5">
<e-content-template>
<div>
<div class="e-panel-container">
<div class="e-panel-header" style="background: #f0ff00">
<div>
Statistieken per bedrijfsonderdeel
</div>
<div id="gridContainer" style="margin-top: 15px;">
<ejs-grid id="default-aggregate-grid" dataSource="@Model.stats" enableHover="false" allowSorting="true" allowMultiSorting="true" gridLines="Vertical" allowFiltering="true" style="overflow-y: auto;">
<e-grid-aggregates>
<e-grid-aggregate>
<e-aggregate-columns>
<e-aggregate-column field="Bedrijfsonderdeel" type="Count" footerTemplate="Totaal:"></e-aggregate-column>
<e-aggregate-column field="Gebruikers" type="Sum" footerTemplate="${Sum}"></e-aggregate-column>
<e-aggregate-column field="Ongevalllen" type="Sum" footerTemplate="${Sum}"></e-aggregate-column>
<e-aggregate-column field="OnveiligeSituaties" type="Sum" footerTemplate="${Sum}"></e-aggregate-column>
<e-aggregate-column field="Aanrijdingen" type="Sum" footerTemplate="${Sum}"></e-aggregate-column>
<e-aggregate-column field="Defecten" type="Sum" footerTemplate="${Sum}"></e-aggregate-column>
<e-aggregate-column field="Agressie" type="Sum" footerTemplate="${Sum}"></e-aggregate-column>
<e-aggregate-column field="VeiligeSituaties" type="Sum" footerTemplate="${Sum}"></e-aggregate-column>
<e-aggregate-column field="ToolboxRegistraties" type="Sum" footerTemplate="${Sum}"></e-aggregate-column>
<e-aggregate-column field="Bijeenkomsten" type="Sum" footerTemplate="${Sum}"></e-aggregate-column>
</e-aggregate-columns>
</e-grid-aggregate>
</e-grid-aggregates>
<e-grid-filterSettings type="Excel"></e-grid-filterSettings>
<e-grid-columns>
<e-grid-column field="Bedrijfsonderdeel" isPrimaryKey="true" headerText="Bedrijfsonderdeel" clipMode="EllipsisWithTooltip"></e-grid-column>
<e-grid-column field="Gebruikers" headerText="Gebruikers" clipMode="EllipsisWithTooltip"></e-grid-column>
<e-grid-column field="Ongevalllen" headerText="Ongevalllen" clipMode="EllipsisWithTooltip"></e-grid-column>
<e-grid-column field="OnveiligeSituaties" headerText="Onveilige Situaties" clipMode="EllipsisWithTooltip"></e-grid-column>
<e-grid-column field="Aanrijdingen" headerText="Aanrijdingen" clipMode="EllipsisWithTooltip"></e-grid-column>
<e-grid-column field="Defecten" headerText="Defecten" clipMode="EllipsisWithTooltip"></e-grid-column>
<e-grid-column field="Agressie" headerText="Agressie" clipMode="EllipsisWithTooltip"></e-grid-column>
<e-grid-column field="VeiligeSituaties" headerText="Veilige Situaties" clipMode="EllipsisWithTooltip"></e-grid-column>
<e-grid-column field="ToolboxRegistraties" headerText="Toolbox Registraties" clipMode="EllipsisWithTooltip"></e-grid-column>
<e-grid-column field="Bijeenkomsten" headerText="Bijeenkomsten" clipMode="EllipsisWithTooltip"></e-grid-column>
</e-grid-columns>
</ejs-grid>
</div>
</div>
</div>
</div>
</e-content-template>
</e-dashboardlayout-panel>
</e-dashboardlayout-panels>
</ejs-dashboardlayout>
</div>
</<div>
</div>
</div>
</div>
</div>
</div>
Hi Marc Walen,
Greetings from Syncfusion
We have ensured your reported scenario by creating a donut chart within the dashboard layout and placing both in the sidebar. We verified that the pie chart renders correctly during both window resizing and sidebar navigation. We have attached sample, GIF for your reference.
GIF:
Since we are unable to replicate an issue from our end, we request you to share the following information.
- Try to reproduce the reported scenario in above sample.
- Share the details if you have done any other customization in your sample.
We sincerely appreciate your understanding and cooperation in helping us troubleshoot this. Your input will help us provide the most accurate solution.
Regards,
Nishanthi
Attachment: dashboard_990cc63e.zip
Hello Nishanthi,
It is not the resizing that is the problem. That works fine. It is the initial load of the page. I have attached a sample project. If yoo first start the project, the chart will be behind the dashboard layout. Then when you resize the window it will pop to the designated layout and size.
Attachment: VeiligWerk_857bb195.zip
Hi Marc Walen,
We have
analyzed the sample you shared. Based on that, the reported scenario occurs
because the chart is rendered before the panel in the DashboardLayout is fully
initialized. As a result, the chart takes its default height and width during
the initial load. To resolve this, we recommend refreshing the chart after the panel has been fully created and initialized. This can be achieved by refreshing the chart with a slight delay using the setTimeout() method in the created event of the DashboardLayout.
We have also modified sample, code-snippet and screenshot for your reference.
Code-snippet:
|
function onCreated(args) { var chart = document.getElementById("ToolboxPie").ej2_instances[0]; setTimeout(() => { chart.refresh(); }, 100); } |
GIF:
Kindly revert us if you have any concerns.
Regards,
Nishanthi
Attachment: VeiligWerk_2789aa96.zip
Thank ypu, that solved it.
Marc,
We are glad to know that the reported scenario got resolved. Please get back to us if you need further assistance.
Regards,
Nishanthi
- 5 Replies
- 2 Participants
-
MW Marc Walen
- Jan 17, 2025 03:00 PM UTC
- Jan 27, 2025 04:35 AM UTC
