We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

The width of the chart comes out differently

Hello,

When you do "rowSelected", you configure the screen with the value of "select row" on each tab


If you watch the video '1' and select 'row' from another tab and move on to another tab, the area of the chart will be small.


If you look at the video '2', the width is different every time you make 'sidebar' visible and invisible.


        <ejs-grid id="D_PiperackGrid" gridLines="Both" rowHeight="30" height="760px" toolbar="@(new List<string>() { "Search" })" created="GridDataBinding" rowSelected="rowSelected" dataBound="dataBound">
            <e-grid-selectionsettings type="Single"></e-grid-selectionsettings>
            <e-grid-columns>
                <e-grid-column field="ITEM_NM" width="50" textAlign="Left"></e-grid-column>
            </e-grid-columns>
        </ejs-grid>

If I do "Low Select" here,

                    <ejs-grid id="RackSuppgrid" gridLines="Both" rowHeight="30" height="250px" actionComplete="createChart">
                        <e-grid-selectionsettings type="Single"></e-grid-selectionsettings>
                        <e-grid-columns>
                            <e-grid-column field="IN_DATE" headerText="Date" type="date" Format="yy/MM/dd" width="50" textAlign="Left"></e-grid-column>
                            <e-grid-column field="N" headerText="New" width="50" textAlign="Left"></e-grid-column>
                            <e-grid-column field="C" headerText="NoChange" width="50" textAlign="Left"></e-grid-column>
                            <e-grid-column field="U" headerText="Update" width="50" textAlign="Left"></e-grid-column>
                            <e-grid-column field="D" headerText="Deleted" width="50" textAlign="Left"></e-grid-column>
                            <e-grid-column field="C_SUPP" headerText="Changed Support" width="50" textAlign="Left"></e-grid-column>
                            <e-grid-column field="T_SUPP" headerText="Total Support" width="50" textAlign="Left"></e-grid-column>
                            <e-grid-column field="C_RATE" headerText="Change Rate (%)" width="50" textAlign="Left"></e-grid-column>
                        </e-grid-columns>
                    </ejs-grid>

The values are specified in each tab


 function createChart(grid) {
        var chartData = new Array();
        var chart = null;


        if (grid.rows != null) {
            for (var i = 0; i < grid.rows.length; i++) {
                var data = new Object();


                var date = grid.rows[i].data.IN_DATE;
                date = formatDate(date);
                date = date.split("-");


                date = date[1] + "/" + date[0];


                data.IN_DATE = date;
                data.T_SUPP = grid.rows[i].data.T_SUPP;
                data.C_RATE = grid.rows[i].data.C_RATE;


                chartData.push(data);
            }


            chart = new ej.charts.Chart({
                id: 'supportChart',
                width: '98%',
                hidden: false,
                palettes: ["red", "green"],
                tooltip: {
                    enable: true
                },
                //Initializing Primary X Axis
                primaryXAxis: {
                    valueType: 'Category',
                         },
            primaryYAxis:
            {
                title: 'Total support',
                    rangePadding: 'None',
                        minimum: 0,
                            maximum: 1500,
                                interval: 300,
                                    lineStyle: { width: 0 },
                majorTickLines: { width: 0 },
                minorTickLines: { width: 0 }
            },
            axes:
            [
                {
                    title: 'Change rate (%)',
                    majorGridLines: { width: 0 },
                    rowIndex: 0, opposedPosition: true,
                    lineStyle: { width: 0 }, majorTickLines: { width: 0 },
                    minimum: 0, maximum: 30, interval: 5,
                    name: 'yAxis', minorTickLines: { width: 0 },
                    labelFormat: '{value}%'
                }
            ],
              
            series: [
                {
                    type: 'Line',
                    dataSource: chartData,
                    xName: 'IN_DATE', width: 2, marker: {
                        visible: false,
                        width: 10,
                        height: 10
                    },
                    yName: 'T_SUPP', name: 'Support',
                },
                {
                    type: 'Line',
                    dataSource: chartData,
                    xName: 'IN_DATE', width: 2, marker: {
                        visible: false,
                        width: 10,
                        height: 10
                    },
                    yName: 'C_RATE', name: 'Change rate',
                    yAxisName: 'yAxis',
                }
            ],
            }, '#chartContainer');
        }
        else {
            chartData = null;
               chart = new ej.charts.Chart({
                id: 'supportChart',
                width: '98%',
                series: [
                    {
                        type: 'Line',
                        dataSource: null,
                    },
                ],


            }, '#chartContainer');
        }

6 Replies

TK TaeWook Kang November 9, 2022 03:33 AM UTC

attachment


Attachment: syncfusion_Chart_390e6e0b.zip


DG Durga Gopalakrishnan Syncfusion Team November 9, 2022 03:28 PM UTC

Hi TaeWook,


We suggest you to re-render the chart control in change event of side bar control and selected event of tab control using chart refresh method. Please check with the below snippet.


<ejs-chart id="container"> </ejs-chart>

<script type="text/javascript">

    // tab event

    function selected() {

                var chart = document.getElementById('container').ej2_instances[0];

                chart.refresh();

    }

   // sidebar event

     function change() {

                var chart = document.getElementById('container').ej2_instances[0];

                chart.refresh();

    }

</script>


API Reference

https://ej2.syncfusion.com/documentation/api/tab/#selected

https://ej2.syncfusion.com/documentation/api/sidebar/#change


Please let us know if you have any concerns.


Regards,

Durga Gopalakrishnan.



TK TaeWook Kang November 10, 2022 06:04 AM UTC

I checked the answer well, but there is still a problem.

 

It made 'refresh' possible when you clicked 'button' in 'layout'.

 

Still, the size of the chart remains unchanged.

 

 

    //Layout의 sidebar toggle button click event
    document.getElementById('toggle').addEventListener('click', function () {
        var chart = document.getElementsByClassName('e-chart')[0].ej2_instances[0];
        chart.refresh();
    });

Attachment: refresh_775c58fb.zip


DG Durga Gopalakrishnan Syncfusion Team November 11, 2022 02:46 PM UTC

Hi Taewook,


We are validating your reported scenario. We will update the status within two business days(15th November 2022). We appreciate your patience until then.


Regards,

Durga Gopalakrishnan.



DG Durga Gopalakrishnan Syncfusion Team November 15, 2022 03:13 PM UTC

Hi Taewook,


Thanks for being patience. Please check with the below suggestions.


# 1 : The width is different every time you make 'sidebar' visible and invisible.


We have considered your reported scenario as bug and logged a defect report for this issue. This fix will be available in our weekly patch release which is scheduled to be rolled out on 29th November 2022. We appreciate your patience until then. You can keep track of the bug from the below feedback link.


Feedback Link :  https://www.syncfusion.com/feedback/39112/chart-is-not-resized-properly-when-toggling-sidebar


If you have any more specification/precise replication procedure or a scenario to be tested, you can add it as a comment in the portal.


# 2 : Select 'row' from another tab and move on to another tab, the area of the chart will be small.


We have prepared sample with tab control and used selected event to refresh the chart while choosing the tab. Please check with the below snippet and screenshot.


<ejs-tab id="defaultTab" selected="onTabSelect">

</ejs-tab>

<script>

    function onTabSelect(args) {

        var chartObj = document.getElementById("container").ej2_instances[0];

        chartObj.refresh();

        var chartObj1 = document.getElementById("container1").ej2_instances[0];

        chartObj1.refresh();

    }

</script>



Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/TabResize1936389216.zip


Kindly revert us if you have any concerns.


Regards,

Durga Gopalakrishnan.



DG Durga Gopalakrishnan Syncfusion Team November 29, 2022 02:13 PM UTC

Hi Taewook,


We have resolved the reported problem in sample level itself. We suggest you to call chart refresh method to overcome the reported scenario. Please check with the below snippet and sample.


<ejs-toolbar id="resToolbar" clicked="toolbarCliked"> </ejs-toolbar>

<script>

function toolbarCliked(args) {

        if (args.item.tooltipText == "Menu") {

          sidebarObj.toggle();

          var lineObj = document.getElementById('container').ej2_instances[0];

          lineObj.refresh();     

        }

    }

</script>


Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/ChartSidebar-1916210975.zip


Kindly revert us if you have any concerns.


Regards,

Durga Gopalakrishnan.


Loader.
Live Chat Icon For mobile
Up arrow icon