Sign in to follow this  
Damon

How To Set The Percentage Width To The Chart

Recommended Posts

Hi,

 

I want to change my charts width and height according to the brower's size. I was following the demos' step to do settings. But it seems like that it doesn't work.

 

The browser is still going but no chart shows.

 

Following is my sourcecode. Hope for your help. Thanks very much.

 

BTW, I have gonethrough the code and found that the problem is caused by the user control. If the width of container(div) in the user control is set to px widht, there is no such problem. If the width is set using percentage width,the problem is shown. I have no solution about it. Could any one give me a hand. This is urgent. Thanks in advance.

 

1.UserControl File

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="CutomizedChart.ascx.cs" Inherits="CutomizedChart" %>

<script type="text/javascript" src="<%=AppRoot %>FusionCharts/FusionCharts.js"></script>

<div id="<%=ContainerId %>" style="height: 100%;">FusionCharts will load
       here!</div>

<script type="text/javascript" language="javascript">
       <!--
       FusionCharts.setCurrentRenderer('javascript');
       var myChart = new FusionCharts("FusionCharts/<%=ChartType.ToString() %>.swf","<%=ChartId %>", "<%=Width %>", "<%=Height %>","<%=DebugModeOn %>", "<%=RegisterWithJS %>" );
       myChart.setJSONData('<%=JsonData %>');
       myChart.render("<%=ContainerId %>");    
       -->
</script>

2.Default.aspx Page which use the user control

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<%@ Register Src="~/UserControl/CutomizedChart.ascx" TagPrefix="fc" TagName="CutomizedChart" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
       <title>sub Page</title>
</head>
<body style="height: 100%;">
       <asp:Label runat="server" ID="lbl1"></asp:Label>
       <fc:CutomizedChart runat="server" ID="chart" />
</body>
</html>

3.Default.aspx.cs Code behind

protected void Page_Load(object sender, EventArgs e)
       {
       if (!IsPostBack)
       {
               if (Request.QueryString["aa"] != null)
               {
               string strReuqest = Request.QueryString["aa"].ToString();
               lbl1.Text = strReuqest;
               }

               chart.ChartId = "3DpieChart1"; 
               chart.ContainerId = "container1";
               chart.ChartType = ChartTypeEnum.Column3D; 
               chart.DebugModeOn = 0;
               chart.Width = "50%";
               chart.Height = "50%";

               SingleSeriesChartJsonObject data = GenerateSingleSeriesData();

               chart.JsonData = JavaScriptConvert.SerializeObject(data);
       }
       }

Edited by Damon

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this