showing only two Treemap in dashboard
Hey,
I'm trying to insert some Treemaps graphics into my dashboard but it's only showing two .
No matter what I do, only two graphs are shown. I already tried several combinations , for example , if I insert a simple text that text is shown in the panel dash , but if I insert a treemap component
nothing happens.
<div class=" control-section">
<!-- DashboardLayout element declaration -->
<ejs-dashboardlayout id="defaultLayout" columns="4" cellSpacing="modelValue.cellSpacing">
<e-content-template>
<div id="one" class="e-panel" data-row="0" data-col="0" data-sizeX="1" data-sizeY="1">
<div class="e-panel-container">
<div id="container" style="width:400px ; height: 400px;">
<ejs-treemap id="treemap1" width="90%" height="90%" weightValuePath="totalHoras" dataSource="@ViewBag.motivosParadaSumarizado_CAMDER" equalColorValuePath="totalHoras" useGroupingSeparator="true" rangeColorValuePath="totalHoras">
<e-treemap-titlesettings text="CAMDER" textStyle="titleFont"></e-treemap-titlesettings>
<e-treemap-leafitemsettings labelPath="totalHoras">
<e-leafitemsettings-colormappings>
<e-leafitemsettings-colormapping from="1" to="5" label="1 - 5hs" color="@("#547C84")"></e-leafitemsettings-colormapping>
<e-leafitemsettings-colormapping from="5" to="20" label="5hs - 20hs" color="@("#37AFAB")"></e-leafitemsettings-colormapping>
<e-leafitemsettings-colormapping from="20" to="50" label="20hs - 50hs" color="@("#A4D6AD")"></e-leafitemsettings-colormapping>
<e-leafitemsettings-colormapping from="50" to="100" label="50hs - 100hs" color="@("#DEEBAE")"></e-leafitemsettings-colormapping>
<e-leafitemsettings-colormapping from="100" to="1000" label=">100" color="@("#2C7EF2")"></e-leafitemsettings-colormapping>
</e-leafitemsettings-colormappings>
<e-leafitemsettings-border color="white" width="0.5"></e-leafitemsettings-border>
</e-treemap-leafitemsettings>
<e-treemap-levels>
<e-treemap-level groupPath="TipoParada" border="border"></e-treemap-level>
</e-treemap-levels>
<e-treemap-tooltipsettings visible="true" format='MP: ${TipoParada}' opacity="0.8" textStyle="titleFont"></e-treemap-tooltipsettings>
<e-treemap-legendsettings visible="true" position="@LegendPosition.Bottom" height="10" mode="@LegendMode.Interactive"></e-treemap-legendsettings>
</ejs-treemap>
</div>
</div>
</div>
</e-content-template>
<e-content-template>
<div id="two" class="e-panel" data-row="0" data-col="1" data-sizeX="1" data-sizeY="1">
<div class="e-panel-container">
<div class="e-panel-content">
<div id="container" style="width:400px ; height: 400px;">
<ejs-treemap id="treemap2" width="90%" height="90%" weightValuePath="totalHoras" dataSource="@ViewBag.motivosParadaSumarizado_FVP1000" equalColorValuePath="totalHoras" useGroupingSeparator="true" rangeColorValuePath="totalHoras">
<e-treemap-titlesettings text="FEELER" textStyle="titleFont"></e-treemap-titlesettings>
<e-treemap-leafitemsettings labelPath="totalHoras">
<e-leafitemsettings-colormappings>
<e-leafitemsettings-colormapping from="1" to="5" label="1 - 5hs" color="@("#547C84")"></e-leafitemsettings-colormapping>
<e-leafitemsettings-colormapping from="5" to="20" label="5hs - 20hs" color="@("#37AFAB")"></e-leafitemsettings-colormapping>
<e-leafitemsettings-colormapping from="20" to="50" label="20hs - 50hs" color="@("#A4D6AD")"></e-leafitemsettings-colormapping>
<e-leafitemsettings-colormapping from="50" to="100" label="50hs - 100hs" color="@("#DEEBAE")"></e-leafitemsettings-colormapping>
<e-leafitemsettings-colormapping from="100" to="1000" label=">100" color="@("#2C7EF2")"></e-leafitemsettings-colormapping>
</e-leafitemsettings-colormappings>
<e-leafitemsettings-border color="white" width="0.5"></e-leafitemsettings-border>
</e-treemap-leafitemsettings>
<e-treemap-levels>
<e-treemap-level groupPath="TipoParada" border="border"></e-treemap-level>
</e-treemap-levels>
<e-treemap-tooltipsettings visible="true" format='MP: ${TipoParada}' opacity="0.8" textStyle="titleFont"></e-treemap-tooltipsettings>
<e-treemap-legendsettings visible="true" position="@LegendPosition.Bottom" height="10" mode="@LegendMode.Interactive"></e-treemap-legendsettings>
</ejs-treemap>
</div>
</div>
</div>
</div>
</e-content-template>
<e-content-template>
<div id="tree" class="e-panel" data-row="0" data-col="2" data-sizeX="1" data-sizeY="1">
<div class="e-panel-container">
<div id="container" style="width:400px ; height: 400px;">
<ejs-treemap id="treemap3" width="90%" height="90%" weightValuePath="totalHoras" dataSource="@ViewBag.motivosParadaSumarizado_CV19" equalColorValuePath="totalHoras" useGroupingSeparator="true" rangeColorValuePath="totalHoras">
<e-treemap-titlesettings text="SFYCV19" textStyle="titleFont"></e-treemap-titlesettings>
<e-treemap-leafitemsettings labelPath="totalHoras">
<e-leafitemsettings-colormappings>
<e-leafitemsettings-colormapping from="1" to="5" label="1 - 5hs" color="@("#547C84")"></e-leafitemsettings-colormapping>
<e-leafitemsettings-colormapping from="5" to="20" label="5hs - 20hs" color="@("#37AFAB")"></e-leafitemsettings-colormapping>
<e-leafitemsettings-colormapping from="20" to="50" label="20hs - 50hs" color="@("#A4D6AD")"></e-leafitemsettings-colormapping>
<e-leafitemsettings-colormapping from="50" to="100" label="50hs - 100hs" color="@("#DEEBAE")"></e-leafitemsettings-colormapping>
<e-leafitemsettings-colormapping from="100" to="1000" label=">100" color="@("#2C7EF2")"></e-leafitemsettings-colormapping>
</e-leafitemsettings-colormappings>
<e-leafitemsettings-border color="white" width="0.5"></e-leafitemsettings-border>
</e-treemap-leafitemsettings>
<e-treemap-levels>
<e-treemap-level groupPath="TipoParada" border="border"></e-treemap-level>
</e-treemap-levels>
<e-treemap-tooltipsettings visible="true" format='MP: ${TipoParada}' opacity="0.8" textStyle="titleFont"></e-treemap-tooltipsettings>
<e-treemap-legendsettings visible="true" position="@LegendPosition.Bottom" height="10" mode="@LegendMode.Interactive"></e-treemap-legendsettings>
</ejs-treemap>
</div>
</div>
</div>
</e-content-template>
<e-content-template>
<div id="four" class="e-panel" data-row="0" data-col="3" data-sizeX="1" data-sizeY="1">
<div class="e-panel-container">
Test
</div>
</div>
</e-content-template>
</ejs-dashboardlayout>
<!-- end of dashboardlayout element -->
</div>
Hi Jose,
When we analyzed the provided code, we came to know that you have used “div” element to create the panel in the dashboard layout, which causes the reported issue. However, we can resolve the issue in the application level by adding “e-dashboardlayout-panel” tag instead of “div” element to create the dashboard layout panels. Now, when the TreeMap component is placed inside the panel, it will be displayed correctly within each panel. Please find the code snippet for the same below.
Code Snippet:
|
<div class=" control-section"> <!-- DashboardLayout element declaration --> <ejs-dashboardlayout id="defaultLayout" columns="4" cellSpacing="@Model.cellSpacing"> <e-dashboardlayout-panels> <e-dashboardlayout-panel sizeX="1" sizeY="1" row="0" col="1"> <e-content-template> <div class="e-panel-container"> <div id="containerone" style="width:250px ; height: 250px;"> <ejs-treemap id="treemap1" > </ejs-treemap> </div> </div> </e-content-template> </e-dashboardlayout-panel> //.. </e-dashboardlayout-panels> </ejs-dashboardlayout> <!-- end of dashboardlayout element --> </div> |
We have created a sample to demonstrate the same and it can be downloaded from the below link.
https://www.syncfusion.com/downloads/support/directtrac/general/ze/CoreSample601161699
NOTE: The data source and values for some of the variables are not available in your provided code snippet. So, we have modified the provided code to make it runnable.
Please let us know if the above solution meets
your requirement. If not, please provide brief details of your requirement. It
will be helpful for us to analyze and assist you further.
thank you very much for the quick reply.
It worked as per your example.
