Charts Keep Disappearing In Updatepanel

[fedorovmatt]

I am having a problem with adding links to a column chart. . The link is intended to change the text of a label. I use a javascript _doPostBack call to call a asp.net function. The function executed successfully, but then the chart disappears.

 

This is the screenshot of the chart before we click on a column

 

 

This is the screenshot of the chart after a column is clicked. If we click on the 'Bachelor of Arts', the label correctly displays what is clicked, however the chart disappears.

 

 

Here is my javascript

 

<script language="JavaScript" type="text/javascript"><!--

function myJS(myVar) {

// window.alert(myVar);

__doPostBack("CollegeChartsUp", "drillDown$" + myVar);

 

 

}

// --></script>

 

Here is page_load

 

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

// Show a blank Column2D Chart at first

updateChart();

 

}

else

{

// updateChart();

// Handle Ajax PostBack Call

// store Asp.Net Ajax special HTTP request

// __EVENTARGUMENT holds value passed by JS function -__doPostBack

//The value can be like "drillDown$1"

//We take $ as delimiter so we get drillDown as the function to call

//and 1 as the factory id. It can vary depending on the pie slice clicked.

 

String sEventArguments = Request["__EVENTARGUMENT"];

if (sEventArguments != null)

{

//extract arguments passed to the HTTP Request

Int32 iDelimiter = sEventArguments.IndexOf('$');

String sArgument = sEventArguments.Substring(iDelimiter + 1);

// extract the name of the post back function

if (sEventArguments.StartsWith("drillDown"))

{

// call the post back function passing the argument(s)

drillDown(sArgument);

 

}

}

}

 

}

 

Here is the chart creation function that creates the javascript links

 

private void updateChart()

{

GridView1.DataSource = SqlDataSource2;

 

GridView1.DataBind();

 

 

StringBuilder strXML = new StringBuilder();

 

strXML.AppendFormat("<chart caption='Top Degrees' showborder='0' bgcolor='FFFFFF' bgalpha='100' subcaption='Daily Production' xAxisName='Day' yAxisName='Units' rotateLabels='1' placeValuesInside='1' rotateValues='1' >");

 

foreach (DataRow dataRow in ((DataView)SqlDataSource2.Select(DataSourceSelectArguments.Empty)).Table.Rows)

{

//string link = "j-myJS-" + dataRow["DegreeType"].ToString();

string link = "javascript:myJS("" + dataRow["DegreeType"].ToString() + "")";

 

strXML.AppendFormat("<set label='{0}' value='{1}' Link='{2}'/>", dataRow["DegreeType"].ToString(), dataRow["Students"].ToString(),link);

}

strXML.Append("</chart>");

// Set Proper output content-type

 

 

 

string outPut = "";

 

 

//when a ajax call is made we use RenderChartHTML method

outPut = FusionCharts.RenderChartHTML("FusionCharts/Column3D.swf", "", strXML.ToString(), "chart1", "445", "350", false, false);

 

//Clear Panel control which will contain the chart

Panel2.Controls.Clear();

 

 

 

//Add Litaral control to Panel which adds the chart from outPut string

Panel2.Controls.Add(new LiteralControl(outPut));

 

}

[Rahul Kumar]

Hi,

 

Could you please also send us the generated HTML code for both the conditions (1. Before Drill-Down, 2. After Drill-Down)?

[fedorovmatt]

Hi,

 

Could you please also send us the generated HTML code for both the conditions (1. Before Drill-Down, 2. After Drill-Down)?

 

 

 

The drillDown function just displays a label with the 'arg' passed.

 

For example if I click the 'Bachelor of Arts' column the label will read 'Bachelor of Arts'

 

 

private void drillDown(string arg)

{

Label1.Visible = true;

Label1.Text = arg;

}