Hi,
I am using Infragistics Version 12.1.20121.2020.
I have a requirement where I need to display charts , and make it occupy the entire available space. I have seen the setting the UltraChart's Height and Width to 100% is not helping. It is still displaying the chart as an approximately 400 px * 300 px image.
Can anyone tell me the best way to achieve this functionality?
I also tried another approach but failed to achieve the result:
By placing my UltraChart inside an Html Table and dynamically setting the chart's width and height to the Table column's width and height . However I am not able to call the right function to set width and height on client side. Can anyone tell me how to set the UltraChart width and height client side? Also, it would help if you give me a link for the client side data model of UltraChart.
Here is the code for the above:
<table id="tbl" runat="server" style="width:100%; height:100%;"> <tr style="width:100%; height:100%;"> <td style="width:100%; height:100%;"> <ig:UltraChart ID="chart" runat="server" BackColor="#EBEBEB" EmptyChartText="Data Not Available." EnableCrossHair="False" ChartType="ColumnChart" Version="12.1" Width="100%" Border-Color="White" Height="100%" Data-MaxValue = "100000000" Data-MinValue = "0" Data-UseMinMax = "true"> <Tooltips FontColor="Black" Font-Size="Small" BorderColor="White" BackColor="Gray" /> <TitleLeft VerticalAlign="Center" Orientation="VerticalLeftFacing" HorizontalAlign="Center"> </TitleLeft> <ColumnChart ChartTextValueAlignment = "Positive" ColumnSpacing="2" SeriesSpacing="2"></ColumnChart> <LineChart TreatDateTimeAsString="true" DrawStyle="Dot" EndStyle="ArrowAnchor" HighLightLines="false" MidPointAnchors="true" StartStyle="Round" Thickness="1"></LineChart> <Legend Visible="true"></Legend> <DeploymentScenario Scenario="FileSystem" ImageURL="/Images/Chart_#SEQNUM(100).png" ImageType="Png" FilePath="/Images" RenderingType="Image"></DeploymentScenario> </ig:UltraChart> </td> </tr> </table>
<script type="text/javascript">window.onload = updateChartWidthandHeight; function updateChartWidthandHeight() { var chart = document.getElementById('<%= chart.ClientID %>'); var width = document.getElementById('<%= tbl.ClientID %>').offsetWidth; var height = document.getElementById('<%= tbl.ClientID %>').offsetHeight; chart.runtimeStyle.height = height; chart.runtimeStyle.width = width;//The following also does not work //chart.clientWidth = width; //chart.clientHeight = height; }</script>
Hi Nancy,
I'm just checking if you need any further assistance with the matter.
Hello Nancy,
Using RenderingType Flash you should be able to set percentage height, too. There is a known limitation which does not allow to display tooltips when using flash. If you use RenderingType=”Image” I can suggest a workaround to set the size in percentage – place the chart in a div having the desired size of the chart (in %). Then you can use the following script to set the width and height of the chart:
<div id="chartContainer" style="width: 50%; height: 50%;">
Place chart here
</div>
$(document).ready(function () {
var width = $('#chartContainer').width();
var height = $('#chartContainer').height();
$('#UltraChart1_BaseImage').css({
'width': width,
'height': height
});
However, the tooltips won’t be correctly displayed as they rely on image map, which is created on the server depending on a default size of the chart, and you are changing the size on the client after that.
Hi Nikolay,
Thanks for the reply.
I already tried the approach mentioned in the link. I would not want to go with RenderingType="Svg" as it needs SVG viewer. However, with RenderingType="Flash" the height is still fixed and is around 372 px. The chart's height is still not covering the full available height. Also, with Flash mode, tool tips are not coming up.
Hence, is there any other way of achieving the same?
In order to be able to set the size of UltraChart in percentage, you should set RenderingType property to "Svg" or "Flash" - http://help.infragistics.com/Help/NetAdvantage/ASPNET/2012.1/CLR4.0/html/Chart_Change_a_WebCharts_Height_and_Width_Using_Percentage_Values.html.
Hope this helps.