RE: How do I make Pie Chart links pass parameters to a GridView - HELP

thoth — Thu, 08 May 2008 12:55:18 GMT

Hi thanks so much! Your example works great but when I try to implement it into my own page I have a problem. When I click on the pie chart, the grid changes but its a full page refresh and the progress template doesn't fire. Im not sure as to why this is. I have other charts on the page and another update panel and a few controls...could these be interfering with the __doPostBack function somehow?

Here is the code to the page:

[code]

<%@ Page Language="C#" MasterPageFile="~/Ohio/OhioMaster.master" AutoEventWireup="true" CodeFile="Frequencies2.aspx.cs" Inherits="Ohio_Straights_Frequencies2" Title="Untitled Page" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

<asp:SiteMapPath ID="SiteMapPath1" PathSeparator=" ¯ " runat="server" EnableViewState="False">

</asp:SiteMapPath>

<asp:ScriptManager ID="ScriptManager1" runat="server" />

</div>

<h1>Straight Frequency</h1>

<tr>

<td class="HeaderLeft">LIFETIME FREQUENCY</td>

<tr>

<asp:RadioButtonList ID="RadioButtonList1" runat="server" RepeatDirection="Horizontal">

<asp:ListItem Selected="True" Value="10">10</asp:ListItem>

<asp:ListItem Value="20">20</asp:ListItem>

<asp:ListItem Value="30">30</asp:ListItem>

</asp:RadioButtonList>

</td>

<asp:DropDownList ID="DropDownList1" runat="server">

<asp:ListItem Selected="True" Value="DESC">HIGHEST</asp:ListItem>

<asp:ListItem Value="ASC">LOWEST</asp:ListItem>

</asp:DropDownList>

</td>

<td>

<asp:Button ID="Button1" runat="server" Text="Go" OnClick="Button1_Click" Width="30px" />

</td>

</tr>

</table>

</td>

</tr>

<tr>

<asp:UpdatePanel ID="FusionChartsUP" runat="server" UpdateMode="Conditional">

<asp:Panel ID="Panel1" runat="server" Height="300px" Width="600px">

</asp:Panel>

</ContentTemplate>

<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />

</Triggers>

</asp:UpdatePanel>

</td>

</tr>

</table>

<tr>

<td>

<tr>

<td class="Header">HIT COUNT TOTALS: LAST 1000 GAMES</td>

</tr>

<tr>

//Call Ajax PostBack Function

function updateChart(HITS){

// Call drillDown C# function by Ajax

//we pass the name of the function ('drillDown') to call

//and the parameter (i.e. factoryId) to be passed to it

//both separated by a delimiter(here we use $, you can use anything)

__doPostBack("Panel2","drillDown$" + HITS);

}

</script>

<%showPieChart();%></td>

</tr>

</table>

</td>

<td>

<tr>

<td class="Header">TOP PERFORMERS: LAST 1000 GAMES</td>

</tr>

<tr>

</tr>

</table>

</td>

</tr>

</table>

<table>

<tr>

<td>

<asp:UpdatePanel ID="PieGrid" runat="server" UpdateMode="Conditional">

<asp:Panel ID="Panel2" runat="server" Height="350px" Width="450px" ScrollBars="Auto">

</asp:Panel>

</ContentTemplate>

</asp:UpdatePanel>

<asp:UpdateProgress ID="UpdateProgress2" runat="server" DisplayAfter="1">

</ProgressTemplate>

</asp:UpdateProgress>

</td>

</tr>

</table>

</div>

</asp:Content>

[/code]

And Here is the code behind to it...

[code]

using System;

using System.Collections;

using System.Configuration;

using System.Data;

using System.Linq;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.HtmlControls;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Xml.Linq;

using System.Text;

using DataConnection;

using InfoSoftGlobal;

public partial class Ohio_Straights_Frequencies2 : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

//This will execute first time the page loads and not on ajax post back calls

if (!IsPostBack)

{

GetTopTenChartHtml();

// Show a blank Column2D Chart at first

drillDown("1");

}

else

{

GetTopTenChartHtml();

// 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);

}

public void GetTopTenChartHtml()

{

//In this example, we show how to connect FusionCharts to a database

//using dataURL method. In our other examples, we've used dataXML method

//where the XML is generated in the same page as chart. Here, the XML data

//for the chart would be generated in PieData.aspx.

//To illustrate how to pass additional data as querystring to dataURL,

//we've added an animate property, which will be passed to PieData.aspx.

//PieData.aspx would handle this animate property and then generate the

//XML accordingly.

//For the sake of ease, we've used an Access database which is present in

//../App_Data/FactoryDB.mdb. It just contains two tables, which are linked to each

//other.

//Variable to contain dataURL

//Set DataURL with animation property to 1

//NOTE: It's necessary to encode the dataURL if you've added parameters to it

String dataURL = Server.UrlEncode("TopTenStraights.aspx?animate=1");

//Create the chart - Pie 3D Chart with dataURL as strDataURL

string outPut = FusionCharts.RenderChart("../../FusionCharts/Column2D.swf", dataURL, "", "TopTen", "660", "300", false, false);

//Clear panel which will contain the chart

Panel1.Controls.Clear();

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

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

}

/// <summary>

/// FusionCharts and ASP.NET.AJAX Update Panel

/// </summary>

//When radio button selection changes i.e. selected factory changes

protected void Button1_Click(object sender, EventArgs e)

{

//Update FusionCharts and gridview with as per selected factory

changeChart();

}

private void changeChart()

{

//Get amount of top results based upon selected Radio Button

string strSQL = "select TOP " + RadioButtonList1.SelectedValue.ToString() + " EXACT, [HITS LIFETIME] FROM Straights ORDER BY [HITS LIFETIME] " + DropDownList1.SelectedValue.ToString();

//Create database connection to get data for chart

DbConn oRs = new DbConn(strSQL);

//Create FusionCharts XML

StringBuilder strXML = new StringBuilder();

//Create chart element

strXML.AppendFormat("<chart palette='2' plotFillAlpha='90' caption='TOP " + RadioButtonList1.SelectedValue.ToString() + " " + DropDownList1.SelectedItem.Text.ToString() + " FREQUENCY STRAIGHTS' useRoundEdges='0' showBorder='0' chartTopMargin='5' outCnvBaseFont='Tahoma' outCnvBaseFontSize='11' outCnvBaseFontColor='666666' baseFont='Tahoma' baseFontSize='11' baseFontColor='000000' xAxisName='Straight Combination' rotateLabels='1' yAxisName='Lifetime Hits' showYAxisValues='0' yAxisNamePadding='10' showValues='1' formatNumberScale='0'>");

//Iterate through database

while (oRs.ReadData.Read())

{

//Create set element

//Also set date into d/M format

strXML.AppendFormat("<set label='{0}' value='{1}' toolText=' {0} hit {1} times. ' />", oRs.ReadData["EXACT"].ToString(), oRs.ReadData["HITS LIFETIME"].ToString());

}

//Close chart element

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

//outPut will store the HTML of the chart rendered as string

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

string outPut = "";

outPut = FusionCharts.RenderChartHTML("../../FusionCharts/Column2D.swf", "", strXML.ToString(), "HitsChart", "660", "300", false, false);

//Clear panel which will contain the chart

Panel1.Controls.Clear();

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

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

// close Data Reader

oRs.ReadData.Close();

}

public string GetTopFreq1000ChartHtml()

{

//In this example, we show how to connect FusionCharts to a database

//using dataURL method. In our other examples, we've used dataXML method

//where the XML is generated in the same page as chart. Here, the XML data

//for the chart would be generated in PieData.aspx.

//To illustrate how to pass additional data as querystring to dataURL,

//we've added an animate property, which will be passed to PieData.aspx.

//PieData.aspx would handle this animate property and then generate the

//XML accordingly.

//For the sake of ease, we've used an Access database which is present in

//../App_Data/FactoryDB.mdb. It just contains two tables, which are linked to each

//other.

//Variable to contain dataURL

//Set DataURL with animation property to 1

//NOTE: It's necessary to encode the dataURL if you've added parameters to it

String dataURL = Server.UrlEncode("TopFreq1000Bar.aspx?animate=1");

//Create the chart - Pie 3D Chart with dataURL as strDataURL

return FusionCharts.RenderChart("../../FusionCharts/Bar2D.swf", dataURL, "", "TopFreqCount", "329", "300", false, false);

}

/// <summary>

/// Show Pie Chart on first load

/// </summary>

public void showPieChart()

{

// SQL Query for Factory wise Total Quantity

string strSQL = "SELECT DISTINCT([HITS LAST 1000]) AS HITS, COUNT(*) AS TOTAL FROM Straights GROUP BY [HITS LAST 1000] ORDER BY [HITS] ASC";

// Connect DataBase and create data reader

DbConn oRs = new DbConn(strSQL);

// create strXML for XML

StringBuilder strXML = new StringBuilder();

// Add chart element

strXML.AppendFormat("<chart palette='2' radius3D='10' showBorder='0' enableSmartLabels='1' smartLineColor='000000' caption='TIMES HITS, PERCENTAGE OF MATRIX' subCaption='Mouse over pie slice for detail' showLabels='1' showValues='1' showPercentValues='1' chartTopMargin='5' baseFont='Tahoma' baseFontSize='11' baseFontColor='666666'>");

// fetch data reader

while (oRs.ReadData.Read())

{

// create link to javascript function for ajax post back call

string link = "javascript:updateChart(" + oRs.ReadData["HITS"].ToString() + ")";

//add set element

strXML.AppendFormat("<set label='{0}' value='{1}' link='{2}' toolText=' {1} Straights hit {0} times each. ' />", oRs.ReadData["HITS"].ToString(), oRs.ReadData["TOTAL"].ToString(), link);

}

// close data reader

oRs.ReadData.Close();

// close chart element

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

// create pie chart and store it to output string

string outPut = FusionCharts.RenderChart("../../FusionCharts/Pie2D.swf", "", strXML.ToString(), "chart1", "329", "300", false, false);

// write the output string

Response.Write(outPut);

}

/// <summary>

/// drillDown to show Column2D chart

/// </summary>

/// <param name="FacID">Factory Id</param>

private void drillDown(string HITS)

{

//SQL Query for Factory Details for the factory Id passed as parameter

string strSQL = "select EXACT, [HITS LAST 1000], [HITS LIFETIME] from Straights where [HITS LAST 1000] =" + HITS + " order by EXACT ASC";

// Create data reader

DbConn oRs = new DbConn(strSQL);

GridView gg = new GridView();

gg.Width = Unit.Pixel(350);

gg.Height = Unit.Pixel(300);

gg.DataSource = oRs.ReadData;

gg.DataBind();

// clear the Panel

Panel2.Controls.Clear();

//Add chart to the panel

Panel2.Controls.Add(gg);

//Panel1.Controls.Add(new LiteralControl(outPut));

}

[/code]

Do you see any reason why I am not getting the partial page refresh? I cant seem to figure it out.

How do I make Pie Chart links pass parameters to a GridView - HELP

thoth — Wed, 07 May 2008 18:39:53 GMT

Hello all,

I've been racking my brain for three days trying to find a solution to this problem. I hope someone here can help me.

I have a pie chart and a GridView on the same page. I want to make each slice of the pie chart act as a parameter that changes the GridView. I've thoroughly read the documentation and toyed with the examples. Ive even downloaded and examined the blueprint application, but I cannot find a working example of this scenario to learn from.

As a temporary work around, I am passing parameters from the pie chart as a query string in a url to another page via the charts link element. This target page contains a gridview and it's loaded into an iframe below the pie chart. While this work around does its job, its not really what I want to do.

How can I pass parameters from the chart to a gridview that resides on the same page so I can make the gridview change using an ajax partial page refresh?

Any help would greatly be appreciated.

FusionCharts Forum / FusionCharts v3 / Using FusionCharts / FusionCharts and ASP.NET / How do I make Pie Chart links pass parameters to a GridView - HELP / Latest Posts

RE: How do I make Pie Chart links pass parameters to a GridView - HELP

RE: How do I make Pie Chart links pass parameters to a GridView - HELP

RE: How do I make Pie Chart links pass parameters to a GridView - HELP

RE: How do I make Pie Chart links pass parameters to a GridView - HELP

RE: How do I make Pie Chart links pass parameters to a GridView - HELP

RE: How do I make Pie Chart links pass parameters to a GridView - HELP

RE: How do I make Pie Chart links pass parameters to a GridView - HELP

RE: How do I make Pie Chart links pass parameters to a GridView - HELP

RE: How do I make Pie Chart links pass parameters to a GridView - HELP

How do I make Pie Chart links pass parameters to a GridView - HELP