0

I have an asp chart which looks like this:

<asp:Chart ID="Chart1" runat="server" BorderlineColor="Black"
  BorderlineDashStyle="Solid" BackColor="#B6D6EC" BackGradientStyle="TopBottom"
  BackSecondaryColor="White" Height="700px" Width="1800px" onload="Chart1_Load" 
                    style="margin-top: 0px; margin-left: 10px; OVERFLOW-X:scroll;">

    <ChartAreas>
        <asp:ChartArea Name="ChartArea1">
        </asp:ChartArea>      
    </ChartAreas>
    <Titles>
        <asp:Title Alignment="TopCenter" Font="Verdana, 12pt, style=Bold" Name="Title1" 
                                    Text="Graph" ForeColor="Blue">
        </asp:Title>
    </Titles>
</asp:Chart>

as you can see I've added some css which I thought would make my chart scrollable:

OVERFLOW-X:scroll;

However, this doesn't work. I've also tried to encapsulate this chart in a div and make the div scrollable but that makes the chart extend out of the page. How can I make this chart scrollable within the page and still keep my chart dimensions (700px by 1800px)

DannyD
  • 2,732
  • 16
  • 51
  • 73
  • If you place the chart into a scrollable DIV *and* give the div fixed dimentions e.g. "700x700" does it work? – Yuriy Galanter Apr 15 '14 at 20:15
  • I did try that. It works when I set fixed dimensions. However, I want the chart to be expandable based on the size of the screen. So I would want to make my div have a width and height of 100% – DannyD Apr 15 '14 at 20:23
  • 1
    Don't set it to percentage. Catch window's `resize` event and set DIV's dimensions accordingly - in pixels. – Yuriy Galanter Apr 15 '14 at 20:26
  • would i do this with jQuery? and how do I know what pixel size to set? – DannyD Apr 15 '14 at 20:28
  • an answer rather than a comment would be greatly appreciated :) – DannyD Apr 15 '14 at 20:30
  • So you want your chart to cover the full width and height of the screen with scrolling capability ? – Karim AG Apr 15 '14 at 20:45
  • @KarimAG I have another div on the left of my chart. However, I would want the chart to cover the area that is to the right of this div – DannyD Apr 15 '14 at 20:58

3 Answers3

2

I was able to add this jquery in order to add a scroll and it worked great:

<script class="code" language="javascript" type="text/javascript">
    $(document).ready(function () {
        var window_width = $(window).width() - 280;
        $("#chartdiv").css("width", window_width + "px");
    });

    $(window).resize(function () {
        var window_width = $(window).width() - 280;
        $("#chartdiv").css("width", window_width + "px");
    });
</script>

I also included my chart in a div like this:

<div id="chartdiv" style="overflow-x: scroll;">
    CHART GOES HERE
</div>
DannyD
  • 2,732
  • 16
  • 51
  • 73
0

First of all, overflow will not work with the chart because charts are rendered into img tags and you can't set overflow to an image.

If I got you correctly I think this would be what you're looking for, try it:

First you have to set the viewport meta tag in your page heading:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />

And in the aspx page:

//The left div you mentioned in the comment
<div id="lefty" style="float:left;width:18vw;height:100vh;border:1px solid #000;"></div>
//The wrapper div of the chart
<div id="wrap" style="width:80vw;height:100vh;overflow:scroll;">
    <asp:Chart ID="Chart1" runat="server" BorderlineColor="Black"
                BorderlineDashStyle="Solid" BackColor="#B6D6EC" BackGradientStyle="TopBottom"
                BackSecondaryColor="White" Height="600px" Width="1800px"  Style="height:100%;">

                <ChartAreas>
                    <asp:ChartArea Name="ChartArea1">
                    </asp:ChartArea>
                </ChartAreas>
                <Titles>
                    <asp:Title Alignment="TopCenter" Font="Verdana, 12pt, style=Bold" Name="Title1"
                        Text="Graph" ForeColor="Blue">
                    </asp:Title>
                </Titles>
            </asp:Chart>
</div>

Briefly, what I did is that I set the width and height of the wrapper div as a percentage of the width and height of the viewport width and height and I set the wrapper to scroll the overflown part of the chart.

Hope this helps...

Karim AG
  • 2,166
  • 15
  • 29
  • Thanks for the response @KarimAG. When I tried using your approach with the viewport meta tag, It applied a scroll in the x direction. However, I'm still setting the width and height of the chart. Because of this, the chart runs off the side of the screen still and the scroll only scrolls a small amount. How can I fit the chart to fit the dynamic div that you're suggesting. Thanks – DannyD Apr 18 '14 at 16:23
-1

Just add the

overflow-x: scroll;

to your div

Jean
  • 5,201
  • 11
  • 51
  • 87