Insert Chart from ViewComponent into Percentage Based Div via Ajax

[Vladimir]

I have a general View with simple content:

<div id="ChartContent" style="height:35%; width:100%; float:left ">

    <div id="Placeholder" style="height:100%; width:33.3%; float:left; "></div>
    <div style="height:100%; width:33.3%; float:left; "></div>
    <div style="height:100%; width:33.3%; float:left;"></div>
</div>

I want to insert into "Placeholder" my ViewComponent Chart that must fill all "Placeholder" space (100% height and 100% width of "Placeholder"):

<ej-chart id="charttt" >

<e-size height="100%" width="100%"></e-size>

    <e-chart-series>

        <e-series datasource="ViewBag.ChartData" x-name="Month" y-name="Sales" type="Line"></e-series>

    </e-chart-series>   

</ej-chart>

<ej-script-manager></ej-script-manager>

And call it via Ajax:

$.ajax({
                type: "POST",
                url: "/MMSUUTP/GetStatisticChart",
                data: $.param({
                    dateStart: $('#DatetimeStatStart').val(),
                    dateEnd: $('#DatetimeStatEnd').val(),
                    id: selectedNodeID,
                    level: selectedDepth,
                  
                }),
                dataType: 'text',
                success: function (data) {

                    $("#Placeholder").html(data);
                    hideProgress();

                }

            });

Browser receive a content, but Chart is not render.

If i remove <e-size height="100%" width="100%"></e-size> or set  "height" and "width" in pixels Chart renders but incorrect dimensions (not full space of "Placeholder").

Can i achieve this "full space rendering" behaviour?

Thanks.

[Dharanidharan Dharmasivam]

Hi Vladimir, 

 

Greetings from Syncfusion. 

 

We have analyzed your query with your code snippet and found that you have specified height to the div element in percentage to the parent element itself. So, until an element getting append into the div element, its height will be zero only. 

 

And in the case of chart, if you are giving the size in percentage, then it will consider the div element in which the chart is going to be rendered. For example, consider the below scenario. 

 

 

<div id="chart" style="width:800px; height:500px"> 

 

    <ej-chart id="chart"> 

        <e-size height="50%" width="50%"></e-size> 

    </ej-chart> 

 

</div> 

 

 

 

Now the container size in which the chart rendered is 800 pixels in width and 500 pixels in height, and the chart size is 50% in height/width. Now chart will render with 400 pixels in width and 250 pixels in height. 

Screenshot: 

 

So, in your case the chart height is set to zero, this is why chart seems to be not rendered. To avoid this you need to specify the height to parent element (div element with id ChartContent) in pixel and the specify the size to chart container so that chart will render properly Find the code snippet below to achieve this scenario.  

 

 

[index.chstml] 

 

<div id="ChartContent" style="height:300px; width:100%; float:left "> 

 

    <div id="Placeholder" style="height:100%; width:33.3%; float:left; "></div> 

     

</div> 

 

[_ViewChart.cshtml] 

 

<div id="chart" style="height:100%; width:100%;"> 

 

    <ej-chart id="chart"> 

        <e-size height="100%" width="100%"></e-size> 

    </ej-chart> 

 

</div> 

 

 

 

 

Screenshot: 

 

Sample for reference can be find from below link 

http://www.syncfusion.com/downloads/support/forum/139796/ze/partialChart1735918122  

 

Thanks, 

Dharani. 

[Vladimir]

Thank you, Dharani. It works.

But i cant understand why JS function (that renders a control) cant get  calculated  dimensions of parent container (i set CSS on Body "height:100vh" and browser can calculate "Placeholder" dimensions from percent to pixels) and then scale chart dimensions from it ?

[Dharanidharan Dharmasivam]

Hi Vladimir, 

 

Thanks for information. You have specified height to parent container (set CSS in Body), we suspect that you might have missed to specify the size(height) to the parent element of the element with id ChartContent. We have prepared a sample by specifying the height as 100vh. Find the code snippet below to achieve this. 

 

[_Layout.cshtml] 

 

<body style="height:100vh"> 

     The below is the parent of element with id ChartContainer, here also we need to specify the height        

       so that chart will be rendered properly. 

    <div class="container body-content" style="height:100vh"> 

    </div> 

</body> 

 

[index.cshtml] 

 

<div id="ChartContent" style="height:100%; width:100%; float:left "> 

    <div id="Placeholder" style="height:100%; width:33.3%; float:left; "></div> 

    <div style="height:100%; width:33.3%; float:left; "></div> 

    <div style="height:100%; width:33.3%; float:left;"></div> 

</div> 

 

 

The sample for reference can be find from below. 

http://www.syncfusion.com/downloads/support/forum/139796/ze/ChartPartial-577986848  

 

If you face still any concerns, kindly revert us by modifying the sample or provide your sample with replication steps, this will be helpful in further analysis and provide you the solution sooner. 

 

Thanks, 

Dharani.