title: Setting a dynamic size for an Asp:Chart control
body: <p>I am trying to make my chart width and height dynamic but I can't get it to work. So far what I've tried:</p>
  
  <p>I've set the Chart inside an Asp:Panel and given the panel the desired percentual values.</p>
  
  <pre><code>    &lt;asp:Panel ID="Panel1" runat="server" Width="90%" Height="40%"&gt;
          &lt;asp:Chart ID="Chart1" runat="server" CssClass="chart"&gt;
              &lt;Series&gt;
                  &lt;asp:Series Name="Series1"&gt;&lt;/asp:Series&gt;
              &lt;/Series&gt;
              &lt;ChartAreas&gt;
                   &lt;asp:ChartArea Name="ChartArea1"&gt;&lt;/asp:ChartArea&gt;
              &lt;/ChartAreas&gt;
          &lt;/asp:Chart&gt;
      &lt;/asp:Panel&gt;
  </code></pre>
  
  <p>Then I try to assign those values to the chart in my C# code</p>
  
  <pre><code>    Chart1.Width = Panel1.Width;
      Chart1.Height = Panel1.Height;
  </code></pre>
  
  <p>This however generates an exception, as the chart is receiving the percentual value instead of the amount of pixels. I also tried <em>(int)Panel.Width.Value</em> to no avail. </p>
  
  <p>I tried doing it with CSS as well, fiddling around with position:absolute and other attributes, but again, I can get it to work for a panel but not for a chart.</p>
  
  <p>Could anyone enlighten me with a simple solution which won't require getting into JQuery and such?</p>
  
  <p>EDIT:</p>
  
  <p>The variable value of <strong>Panel1.Width</strong> will output <strong>90%</strong> while <strong>Panel1.Width.Value</strong> will for some reason output <strong>90</strong> (<strong>40%</strong> and <strong>40</strong> for <strong>Panel1.Height</strong>).  </p>
  
  <p><strong>Chart1.Width.Value</strong> will have a default value of 300px assigned by Visual Studio, therefore:</p>
  
  <pre><code>Chart1.Width = new Unit(Chart1.Width.Value * Panel1.Width.Value / 100, UnitType.Pixel);
  </code></pre>
  
  <p>will output the same as if I were to do:</p>
  
  <pre><code>Chart1.Width = new Unit(300 * 90 / 100, UnitType.Pixel);
  </code></pre>
  
  <p><strong>OUTPUT:</strong> a static value of 270px</p>
  
  <p>I NEED to get the pixel value retrieved by the Panel1.Width percentage, but I can't figure out a way of doing that</p>
  
  <p>EDIT 2:</p>
  
  <p>The chart stretching bit with css works correctly but the output is a bit underwhelming, so I am trying to to make the javascript example work but I am having no success... I added a button to force a postback and in the page_load event I inserted:</p>
  
  <pre><code>protected void Page_Load(object sender, EventArgs e)
  {
      if (IsPostBack)
      {
          if (panelWidth.Value != "" &amp;&amp; panelHeight.Value != "")
          {
              Chart1.Visible = true;
              Chart1.Width = int.Parse(panelWidth.Value);
              Chart1.Height = int.Parse(panelHeight.Value);
          }
      }
      else //Initialize the chart with some sample points
      {
          Chart1.Series[0].Points.AddXY(1, 1);
          Chart1.Series[0].Points.AddXY(1, 2);
          Chart1.Series[0].Points.AddXY(2, 1);
          Chart1.Series[0].Points.AddXY(2, 2);
          Chart1.Series[0].Points.AddXY(3, 1);
          Chart1.Series[0].Points.AddXY(3, 2);
      }
  }
  </code></pre>
  
  <p>If I start the page the chart is obviously not visible, so I also added a button</p>
  
  <pre><code>&lt;asp:Button ID="Button1" runat="server" Text="Button" /&gt;
  </code></pre>
  
  <p>to the form to trigger a postback, which does reload the page but the panelWidth.Value and panelHeight.Value are still empty. Am I missing something? Seems like I can't trigger the javascript code :/</p>