[thoth]

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.

[Sudipto Choudhury]

Hi,

Here i am attaching a new update panel sample to fir your need. I have modified the sample2.aspx of the UpdatePanel samples we have provided in the Code folder and also Documented. I have modified it to put a chart(pie). When a pie slice is clicked, a gridview that shows data related to that slice will be generated on the left on the chart.

Attached File(s)

•  UpdatePanel_chartToGridView.zip (3K)
  Number of downloads: 147

[thoth]

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:

<%@ 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">
<script language="javascript" type="text/javascript" src="../../FusionCharts/FusionCharts.js"></script>
<div class="CommonBreadCrumbArea">
<asp:SiteMapPath ID="SiteMapPath1" PathSeparator=" ¯ " runat="server" EnableViewState="False">
</asp:SiteMapPath>
<
asp:ScriptManager ID="ScriptManager1" runat="server" /> 
</div> 
<div class="CommonContentArea">
<h1>Straight Frequency</h1>
<table class="ChartWrapper">
<tr>
<td class="HeaderLeft">LIFETIME FREQUENCY</td>
<td class="HeaderRight">
<table cellpadding="0" cellspacing="0">
<tr>
<td>View Top:</td>
<td style="padding-left: 3px; padding-right: 5px;">
<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> 
<td style="padding-left: 3px; padding-right: 5px;">
<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>
<td class="ChartArea" colspan="2">
<asp:UpdatePanel ID="FusionChartsUP" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<
asp:Panel ID="Panel1" runat="server" Height="300px" Width="600px">
</asp:Panel>
</ContentTemplate
>
<Triggers>
<asp:AsyncPostBackTrigger
 ControlID="Button1" EventName="Click" />
</Triggers> 
</asp:UpdatePanel>
</td>
<
/tr>
</table> 
<table cellpadding="0" cellspacing="0">
<tr>
<td>

<table class="ChartWrapper">
<tr>
<td class="Header">HIT COUNT TOTALS: LAST 1000 GAMES</td>
</tr>
<tr>
<td class="ChartArea">
<script language="javascript" type="text/javascript">
//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>
<table class="ChartWrapper">
<tr>
<td class="Header">TOP PERFORMERS: LAST 1000 GAMES</td>
</tr>
<tr>
<td class="ChartArea"><%=GetTopFreq1000ChartHtml()%></td>
</tr>
</table>
</td>
</tr> 
</table>
<table>
<tr>
<td>
<asp:UpdatePanel ID="PieGrid" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<
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>
<img
 src="../../Images/indicator.gif" alt="" style="position: absolute; top: 297px; left: 660px; z-index: 5;" />
</ProgressTemplate>
</asp:UpdateProgress
> 
</td>
</tr>
</table>

</div>
</asp:Content>

And Here is the code behind to it...

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

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

[garnold]

Ok your par is an int so you can just pass it but how do I pass a string? I'm having a problem formatting the XML because of all the ' and " needed to build the link.

[garnold]

I'm trying

string link = Server.UrlEncode("javascript:updateStats('" + stage + "')");

but no luck

[garnold]

Ok finally got it, just had to mess around with " alot.

[Arindam]

please use this

string link = "javascript:updateStats(%26apos;" + stage + "%26apos;)";

[GMs_for_libs]

Do you possibly have a similar example in PHP?



Thanks,



Olha

[manikantaprasad]

hi buddy

iam new to tihis fusion chart





i want to pass parameters for the drill down chart to the backend handler

and i want it by jsp and js can u help me with a sample sa u gave b4

[Arindam]

Hi,

Could you please visit this links?

http://www.fusioncharts.com/docs/Contents/DrillDown/Simple.html

http://www.fusioncharts.com/docs/ Contents/DrillDown/Frames.html

http://www.fusioncharts.com/docs/Contents/DrillDown/PopUps.html

http: //www.fusioncharts.com/docs/Contents/DrillDown/ClickURL.html

http://www.fusioncharts.com/docs/Contents/DrillDown/ JavaScript.html

[JonSykes]

I need this example using VB.NET and two seperate variables.

I know where the problem is in the following code I just don't know where to fix it.

Here is the XML generated:

<Chart Caption='CC/CCA Regional Report - 12/01/2008 to 12/05/2008' Palette='2' ShowNames='1' ShowValues='1' NumPrefix='' ShowSum='0' Decimals='1' UseRoundEdges='1' xAxisName='Regions' yAxisName='Number of Lines'>

<Categories>
<Category label='EAST' />
<Category label='WEST' />
</Categories>

<dataset seriesname='CLOSED'>
<set value='3098' link='javascript:updateChart('2:EAST')'/>
<set value='5075' link='javascript:updateChart('2:WEST')' />
</dataset>

<dataset seriesname='VALIDATED'>
<set value='3418' link='javascript:updateChart('2:EAST')'/>
<set value='5693' link='javascript:updateChart('2:WEST')' />
</dataset>

</Chart>

I'm using the same code posted above, the only difference being i'm throwing two single quotes around the highlighted areas in order for javascript to except my colon ( which i am using on the backend as a delimeter.

Any help would be much appreciated.

[Rahul Kumar]

Hi,

Could you please try the following code?

<Chart Caption='CC/CCA Regional Report - 12/01/2008 to 12/05/2008' Palette='2' ShowNames='1' ShowValues='1' NumPrefix='' ShowSum='0' Decimals='1' UseRoundEdges='1' xAxisName='Regions' yAxisName='Number of Lines'>

<Categories>
<Category label='EAST' />
<Category label='WEST' />
</Categories>

<dataset seriesname='CLOSED'>
<set value='3098' link='updateChart(&quot;2:EAST&quot; )'/>
<set value='5075' link='updateChart(&quot;2:WEST&quot; )' />
</dataset>

<dataset seriesname='VALIDATED'>
<set value='3418' link='updateChart(&quot;2:EAST&quot; )'/>
<set value='5693' link='updateChart(&quot;2:WEST&quot; )' />
</dataset>

</Chart>

You would need to use &quot; for single quote (') character.