Hi Lazar,

Width problem is solved. I have one more problem related to width.

I have 2 Divs, left DIV contains a some controls and a SideBar. Right DIV contains the igDataChart.

When I click on the SideBar, the left DIV is collapsed and Right DIV gets expanded.

Now the PROBLEM is igDataChart width remains the same as it was before the DIV expanded.

Is there any way to increase width of igDataChart ??

Hi, sanjaysutar

When you set the width to "100%" the underlying Canvas expands or shrinks together with the parent container but it doesn't scale its content. If we want the chart plotted on the Canvas to expand we need to effectively redraw everything: axes, series, and any other visual elements. This can be achieved very easily by destroying the chart widget and create it again with the same settings. You can do something like this:

Cheers, Lazar

Hi Lazar,

I am using Asp.Net MVC. So can I use the code you provided or I need to use MVC Helpers for Chart ??

Most browsers will not notify an element when it is being resized. Built in DOM elements have way's of reformatting their content, but a custom canvas element will, by default, not receive any kind of notification that a resize event has occurred.
The canvas actuall consists of a DOM element and the actual bitmap output of the rendering operations. When you set a canvas to be 100%, this has only effected the container, and not the bitmap content.
The chart supports being told when its container has resized though, but it is, currently, your responsibility to notify it of this eventuality.
The below example shows how you can notify the chart that it's size has changed when the document is resized. Note, though, that depending on your page, this may not be the only circumstance that can cause the size of the chart's container to be adjusted. So you may need to notify the chart of other resize events.

   <script type="text/javascript" charset="utf-8">
        var lineDataSource = [
                                    { Label: 2045, Label2: 'a0', val1: 0, val2: 20, Index: 1},
                                    { Label: 2046, Label2: 'a1', val1: 10, val2: 20 , Index: 2},
                                    { Label: 2047, Label2: 'a2', val1: 110, val2: 70, Index: 3 },
                                    { Label: 2048, Label2: 'a3', val1: 121, val2: 10, Index: 4 },
                                    { Label: 2050, Label2: 'a4', val1: 131, val2: 40, Index: 5 },
                                    { Label: 2051, Label2: 'a5', val1: 141, val2: 50, Index: 6 },
                                    { Label: 2052, Label2: 'a6', val1: 151, val2: 60, Index: 7 },
                                    { Label: 2053, Label2: 'a7', val1: 151, val2: 90, Index: 8 },
                                    { Label: 2054, Label2: 'a8', val1: 151, val2: 80, Index: 9 },
                                    { Label: 2055, Label2: 'a9', val1: 151, val2: 90, Index: 10 } 
                            ];
</script>

<script type="text/javascript">
        $(function () {
                                                var width = $("#chartArea").width();
                                                var height = $("#chartArea").height();
                                                
                                                var lastWidth = width;
                                                var lastHeight = height;
                                                $(window).resize(function () {
                                                                var width = $("#chartArea").width();
                                                                var height = $("#chartArea").height();
                                                                
                                                                if (width != lastWidth || height != lastHeight) {
                                                                                $("#lineChart").igDataChart("option", "size", { width: width, height: height });
                                                                                $("#lineChart").igDataChart("flush");
                                                                                lastWidth = width;
                                                                                lastHeight = height;
                                                                }
                                                });
                                
            $("#lineChart").igDataChart({
                width: width + "px",
                height: height + "px",
                dataSource: lineDataSource,
                dataSourceType: "array",
                                                                horizontalZoomable: true,
                                                                verticalZoomable: true,
                axes: [
                                                                                {
                                                                                                name: "xAxis",
                                                                                                type: "categoryX",
                                                                                                label: "Label",
                                                                                                labelExtent: 50
                                                                                },
                                                                                {
                                                                                                name: "yAxis",
                                                                                                type: "numericY",
                                                                                }
                                                                ],
                series: [
                    {
                        name: "series1",
                        type: "column",
                        xAxis: "xAxis",
                        yAxis: "yAxis",
                                                                                                valueMemberPath: "val1"
                    },
                                                                                {
                        name: "series2",
                        type: "column",
                        xAxis: "xAxis",
                        yAxis: "yAxis",
                                                                                                valueMemberPath: "val1"
                    }
                ]
            });
        });
    </script>
</head>

<style>
html,body {
                margin: 0;
                width: 100%;
                height: 100%;
}

#chartArea {
                width: 50%;
                height: 50%;
                background-color: red;
}
</style>

<body>
                <div id="chartArea">
                <div id="lineChart"></div>
                </div>
                
</body>

Hope this helps!

-Graham

Hi Lazar,

Can I provide me some sample code how to initialize and create chart ?? I know how to do things with MVC helper, but not sure about javascript way of doing things.

Hi, sanjaysutar

My code example above just demonstrates the principle, and it is not a full example on how to create an igDataChart. You cannot use the MVC helpers for the logic that recreates your chart - you will have to code the chart initialization logic in JavaScript.

Cheers, Lazar