How to set Chart control width into percentage

0
votes

In asp.net chart control, how do we set chart width into percentage, below scenario is chart width needs to be set with the panel width. As the chart takes only pixel. Help on this.

<table style="width:100%;">
<tr>
<td style="width:50%;border:1px solid black;"> 
<asp:Panel ID="pnl" runat="server" Width="100%">
<asp:Chart ID="Chart2" runat="server" >
<Titles><asp:Title Text="ChartSample1"></asp:Title></Titles>
<Series>
<asp:Series Name="Series1"></asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="ChartArea1"></asp:ChartArea>
</ChartAreas>
</asp:Chart>
</asp:Panel>
</td>
<td style="width:50%;border:1px solid black;"> 
<asp:Panel ID="pnl2" runat="server" Width="100%">
<asp:Chart ID="Chart3" runat="server">
<Titles><asp:Title Text="ChartSample2"></asp:Title></Titles>
<Series>
<asp:Series Name="Series1"></asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="ChartArea1"></asp:ChartArea>
</ChartAreas>
</asp:Chart>
</asp:Panel>
</td>
</tr>
</table>

code behind: protected void Page_Load(object sender, EventArgs e) { 

Chart2.Series[0].Points.AddXY(1, 1);
Chart2.Series[0].Points.AddXY(1, 2);
Chart2.Series[0].Points.AddXY(2, 1);
Chart2.Series[0].Points.AddXY(2, 2);
Chart2.Series[0].Points.AddXY(3, 1);
Chart2.Series[0].Points.AddXY(3, 2);

Chart3.Series[0].Points.AddXY(1, 10);
Chart3.Series[0].Points.AddXY(1, 20);
Chart3.Series[0].Points.AddXY(2, 10);
Chart3.Series[0].Points.AddXY(2, 20);
Chart3.Series[0].Points.AddXY(3, 10);
Chart3.Series[0].Points.AddXY(3, 20);

}

enter image description here

1
asp.net
Can you do <asp:Chart ID="Chart3" runat="server" style="width:100%"> and dispense with the panel? (Or, better still, dispense with using tables for layout - it's the 21st century - and use floating panels instead to put things side by side) - ADyson
Thanks, but when add style="width:100%", then the chart width is stretched (because, here chart is an image). - Sahana
you said "the chart width should be set to the panel width". The panel width is 100%. So if you set the chart to 100%, the same as the panel, it will inevitably stretch. What else would happen? But that is what you asked for :-) - ADyson
I need the chart should not be stretched, how can I achieve this. pls help - Sahana
well what do you want then? If you expand it to the full width, it will be stretched. If you don't, it won't be stretched but there will be a gap. Do you want it centered in the div? - ADyson

1 Answers

0
votes

If you have not found a solution, you may try getting the width and height properties of the panel in codebehind. I preferred using panels in the website instead of table.

double heightTable = panel1.height.value;

chart2.height = new unit(heighttable);