CODEWITHSUNDEEP
c#asp.net.netaspchart
Sumi Sharma
Sumi Sharma

Reputation: 51

How to make asp .net chart (with even handling) size responsive

I am using asp .net chart control to create bar chart`. My aspx page does not allow me to set width of in percentage (if set in percentage, it gives error at run time saying it can only be set in pixels).

I am handling click event on my chart (different bars are clickable/hyperlink - clicking on which sends X and Y value to a method in code behind).

Now I tried to set width of the chart in my css to 100%, then what happens is that size of chart changes, but the position of hyperlinks remains same and there becomes a mismatch between the bar hyperlinks and actual visible position of bar. (The reason behind this I think is - asp chart is nothing but an image for a browser - as finally generated html code contains an in place of and hyperlinks in that chart are defined by with the coordinates to keep the different areas in the graphs hyperlinked). So on using css, the size of the image changes, but the hyperlinks remains same.

Why I want to keep the size of my asp chart is because I want to make the size of image responsive to different screen sizes. Please tell what I should do? Help is appreciated. Thanks in advance.

Upvotes: 0

Views: 1479

Answers (1)

ɐlǝx
ɐlǝx

Reputation: 1394

I do not know if this can be of help, I used a simple javascript to resize the graphics based on the size of the page size; the script checks if the window size is greater than 1024px, using an UpdatePanel, here documentation 

 <script type="text/javascript" language="javascript">
        function load() {
            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
        }

        function EndRequestHandler() {
            $(document).ready(function () {
                scale();

            });
            $(window).resize(function () {
                scale();
            });
            function scale() {
                var wi = $(window).width();
                if (wi >= 1024) {
                    var w_wi = $("#ChartID").width();
                    var w_he = $("#ChartID").height();
                    var rpt = w_he / w_wi;
                    $("#ChartID").css("width", $(window).width());
                    $("#ChartID").css("height", wi * rpt);
                } else {
                    scaleDefault();
                }
            }
            function scaleDefault() {

                var wi = $(window).width();
                    var w_wi = $("#ChartID").width();
                    var w_he = $("#ChartID").height();
                    var rpt = w_he / w_wi;
                    $("#ChartID").css("width", 1024);
                    $("#ChartID").css("height", 1024 * rpt);
            }

        }
        $(function () {
            EndRequestHandler();
        });

    </script>

Upvotes: 1

Related Questions