FusionFerro

displaying Fusion chart in asp:table cell using c# .net

By FusionFerro, in FusionCharts and ASP.NET

Recommended Posts

FusionFerro   

FusionFerro
Posted

Hi there,

 

I am trying to find an example to display a Fusion chart in an ASP:TABLE cell.

 

For example, I have the following HTML:

    <asp:TableRow ID="TableRow2" runat="server">
        <asp:TableCell>
            <asp:Table ID="CountrySection" runat="server">
            </asp:Table>
        </asp:TableCell>
        <asp:TableCell>
        </asp:TableCell>
        <asp:TableCell>
            <asp:ListBox ID="lbAgreement" runat="server" onselectedindexchanged="lbAgreement_SelectedIndexChanged" onprerender="lbAgreement_PreRender" AutoPostBack="True" ForeColor="#006F5F"  Width="180" Height="750" Font-Names="Calibri" Font-Size="14" >
            </asp:ListBox>
        </asp:TableCell>
    </asp:TableRow>

and in my c# .net code I want to do something similar to:

                //new table row and cell
               TableRow r = new TableRow();
                TableCell c = new TableCell();

               //create chart object               
                var myChart = new FusionCharts("../Charts/AngularGauge.swf", "myChartId", "400", "200", "0", "0");
                myChart.setDataURL("../1stFusionChart/Data.xml");

                //add chart to row cell "HERE IS WHERE I NEED HELP"
                r.Cells.Add(myChart );

                // add row object to CountrySection table 
                CountrySection.Rows.Add(r);

but fail to pass the chart object to the cell I want to display the chart in

 

Many thanks,

Share this post

Link to post
Share on other sites

Sanjukta   

Sanjukta
Posted

Hi there,

 

I am trying to find an example to display a Fusion chart in an ASP:TABLE cell.

 

For example, I have the following HTML:

    <asp:TableRow ID="TableRow2" runat="server">
        <asp:TableCell>
            <asp:Table ID="CountrySection" runat="server">
            </asp:Table>
        </asp:TableCell>
        <asp:TableCell>
        </asp:TableCell>
        <asp:TableCell>
            <asp:ListBox ID="lbAgreement" runat="server" onselectedindexchanged="lbAgreement_SelectedIndexChanged" onprerender="lbAgreement_PreRender" AutoPostBack="True" ForeColor="#006F5F"  Width="180" Height="750" Font-Names="Calibri" Font-Size="14" >
            </asp:ListBox>
        </asp:TableCell>
    </asp:TableRow>

and in my c# .net code I want to do something similar to:

                //new table row and cell
               TableRow r = new TableRow();
                TableCell c = new TableCell();

               //create chart object               
                var myChart = new FusionCharts("../Charts/AngularGauge.swf", "myChartId", "400", "200", "0", "0");
                myChart.setDataURL("../1stFusionChart/Data.xml");

                //add chart to row cell "HERE IS WHERE I NEED HELP"
                r.Cells.Add(myChart );

                // add row object to CountrySection table 
                CountrySection.Rows.Add(r);

but fail to pass the chart object to the cell I want to display the chart in

 

Many thanks,

Hi,

 

Could you please edit the line of your code to the following and see if this helps?

Ex: 

c.Text=FusionCharts.RenderChart("../Charts/AngularGauge.swf", "../1stFusionChart/Data.xml", "", "myChart1ID", "400", "200", false, true);      
r.Cells.Add(c) ;

Hope this helps. :)

Share this post

Link to post
Share on other sites

FusionFerro   

FusionFerro
Posted

Thanks for the response,

 

I am trying to implement the example you gave me but I am facing a problem in the definition of the function FunsionCharts (I need to add a VStudio reference and add a using library) and I dont find a dll file in the Fusion folder to use.

 

Can you please help in this?

 

Thanks,

Share this post

Link to post
Share on other sites

Sanjukta   

Sanjukta
Posted

Thanks for the response,

 

I am trying to implement the example you gave me but I am facing a problem in the definition of the function FunsionCharts (I need to add a VStudio reference and add a using library) and I dont find a dll file in the Fusion folder to use.

 

Can you please help in this?

 

Thanks,

Hi,

 

Please note that the FusionCharts.dll file is present in the FusionCharts XT Download Package >> Code >> CS >> Bin folder.

 

Copy the file into the Bin folder of your Project. In case you are facing any issue with the DLL due to security issues in your server, you can choose to use the FusionCharts.cs file from Download Package >> Code >> CS >> src folder and keep it in App_Code folder.

Ref.- http://docs.fusioncharts.com/charts/contents/?guide-for-web-developers/csnet/CS_BasicExample.html

 

Hope this helps. :)

Share this post

Link to post
Share on other sites

FusionFerro   

FusionFerro
Posted (edited)

Hi all,

 

Thanks for your propmpt replies and support. I am trying to implement your example using Column3D.swf and Data.xml (same example provided on http://docs.fusioncharts.com/charts/contents/FirstChart/FirstChart.html). I using vstudio c# and deploying the solution to SharePoint 2010.

 

I used your suggestions above and the rebuilding and deployment process goes fine but the chart is never shown on the screen.

 

following is the code example:

1- MyASCX.ascx

<%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %>
<%@ Assembly Name="Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 
<%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
<%@ Import Namespace="Microsoft.SharePoint" %> 
<%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="360MainScreenUserControl.ascx.cs" Inherits="_360Report._360MainScreen._360MainScreenUserControl" %>



 <%@ Register assembly="System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" namespace="System.Web.UI.DataVisualization.Charting" tagprefix="asp" %>

    <asp:TableRow ID="TableRow2" runat="server">
        <asp:TableCell>
            <asp:Table ID="CountrySection" runat="server">
            </asp:Table>
        </asp:TableCell>
        <asp:TableCell>
            <asp:Table ID="GraphSection" runat="server">
            </asp:Table>
        </asp:TableCell>
        <asp:TableCell>
            <asp:ListBox ID="lbAgreement" runat="server" onselectedindexchanged="lbAgreement_SelectedIndexChanged" onprerender="lbAgreement_PreRender" AutoPostBack="True" ForeColor="#006F5F"  Width="180" Height="750" Font-Names="Calibri" Font-Size="14" >
            </asp:ListBox>
        </asp:TableCell>
    </asp:TableRow>

2- MyASCX.ascx.cs:

protected override void OnLoad(EventArgs e)
        {
                        
            try
            {
               DrawGraph();
            }
            catch (Exception ex)
            {
                ShowMessage(this.Page+ " SourceOrg:OnLoad: "+ ex);
            }
        }       

//Draw Graph
        public void DrawGraph()
        {
            //new table row and cell
            TableRow r = new TableRow();
            TableCell c = new TableCell();

            //create chart object and add it to Graph section cell           

           c.Text = FusionCharts.RenderChart("file:AbsolutePath/Column3D.swf",
                                              "file:AbsolutePath/Data.xml",
                                              "", "myChart1ID", "400", "200", false, true);
            r.Cells.Add(c);

            // add row object to table
            GraphSection.Rows.Add(r);
        }

3- I am using Column3d.swf and the same Data.xml (same example provided on http://docs.fusioncharts.com/charts/contents/FirstChart/FirstChart.html)

 

Many thanks,

Edited by FusionFerro

Share this post

Link to post
Share on other sites

FusionFerro   

FusionFerro
Posted

 Hi there,

 

I have narrowed down the problem and it might be in the way I populate the Chart in to the asp:table cell.

 

Now I can successfully show the chart in a div in the same page I want to display the same chart in an asp:table cell. The chart shows successfully in the div but doesn't show in the cell.

 

A reminder: I am developing a V studio C# .NET project and deploying to SharePoint 2010.

 

Following is my updated code:

1- MyASCX.ascx

<%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %>
<%@ Assembly Name="Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 
<%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
<%@ Import Namespace="Microsoft.SharePoint" %> 
<%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="360MainScreenUserControl.ascx.cs" Inherits="_360Report._360MainScreen._360MainScreenUserControl" %>



 <%@ Register assembly="System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" namespace="System.Web.UI.DataVisualization.Charting" tagprefix="asp" %>



 <style type="text/css">
    .wrap
    {
    white-space:normal;
    }
    </style>

<asp:Table ID="MainTable" runat="server" 
    Height="227px" Width="100%" style="margin-right: 38px">
    <asp:TableRow ID="TableRow1" runat="server" Width="70%">
        <asp:TableHeaderCell ColumnSpan="1"> 
        </asp:TableHeaderCell>
        <asp:TableCell>
            <asp:Table ID="YearSection" runat="server">

            </asp:Table>
        </asp:TableCell>
    </asp:TableRow>

    <asp:TableRow ID="TableRow2" runat="server">
        <asp:TableCell>
            <asp:Table ID="CountrySection" runat="server">
            </asp:Table>
        </asp:TableCell>
        <asp:TableCell>
            <asp:Table ID="GraphSection" runat="server">
            </asp:Table>
        </asp:TableCell>
        <asp:TableCell>
            <asp:ListBox ID="lbAgreement" runat="server" onselectedindexchanged="lbAgreement_SelectedIndexChanged" onprerender="lbAgreement_PreRender" AutoPostBack="True" ForeColor="#006F5F"  Width="180" Height="750" Font-Names="Calibri" Font-Size="14" >
            </asp:ListBox>
        </asp:TableCell>
    </asp:TableRow>
</asp:Table> 

<html>
  <head>        
    <title>My First chart using FusionCharts XT - Using pure JavaScript</title>         
    <script type="text/javascript" src="/FusionCharts/FusionCharts.js"></script>
  </head>   
  <body>     
    <div id="chartContainer">FusionCharts XT will load here!</div>          
    <script type="text/javascript"><!--

        FusionCharts.setCurrentRenderer('javascript');

        var myChart = new FusionCharts("/FusionCharts/Column2D.swf",
                    "myChartId", "400", "300", "0");

        myChart.setXMLUrl("/FusionCharts/Data.xml");

        myChart.render("chartContainer");

    // -->  
    </script>      
  </body> 
</html>

2- MyASCX.ascx.cs:

protected override void OnLoad(EventArgs e)
        {
                        
            try
            {
               DrawGraph();
            }
            catch (Exception ex)
            {
                ShowMessage(this.Page+ " SourceOrg:OnLoad: "+ ex);
            }
        }       

//Draw Graph
        public void DrawGraph()
        {
            //new table row and cell
            TableRow r = new TableRow();
            TableCell c = new TableCell();

            //create chart object and add it to Graph section cell           

           c.Text = FusionCharts.RenderChart("/FusionCharts/Column2D.swf",
                                              "/FusionCharts/Data.xml",
                                              "", "myChart1ID", "400", "200", false, true);
            r.Cells.Add(c);

            // add row object to table
            GraphSection.Rows.Add(r);
        }

So I am using the same relative paths and the same data file and swf file in both cases, and I am using the same way you recommended to show the Chart in asp:table cell.

Still the chart shows successfully in the div but fails in the table cell.

 

Please provide your support,

Thank

Share this post

Link to post
Share on other sites

Sanjukta   

Sanjukta
Posted

 Hi there,

 

I have narrowed down the problem and it might be in the way I populate the Chart in to the asp:table cell.

 

Now I can successfully show the chart in a div in the same page I want to display the same chart in an asp:table cell. The chart shows successfully in the div but doesn't show in the cell.

 

A reminder: I am developing a V studio C# .NET project and deploying to SharePoint 2010.

 

Following is my updated code:

1- MyASCX.ascx

<%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %>
<%@ Assembly Name="Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 
<%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
<%@ Import Namespace="Microsoft.SharePoint" %> 
<%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="360MainScreenUserControl.ascx.cs" Inherits="_360Report._360MainScreen._360MainScreenUserControl" %>



 <%@ Register assembly="System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" namespace="System.Web.UI.DataVisualization.Charting" tagprefix="asp" %>



 <style type="text/css">
    .wrap
    {
    white-space:normal;
    }
    </style>

<asp:Table ID="MainTable" runat="server" 
    Height="227px" Width="100%" style="margin-right: 38px">
    <asp:TableRow ID="TableRow1" runat="server" Width="70%">
        <asp:TableHeaderCell ColumnSpan="1"> 
        </asp:TableHeaderCell>
        <asp:TableCell>
            <asp:Table ID="YearSection" runat="server">

            </asp:Table>
        </asp:TableCell>
    </asp:TableRow>

    <asp:TableRow ID="TableRow2" runat="server">
        <asp:TableCell>
            <asp:Table ID="CountrySection" runat="server">
            </asp:Table>
        </asp:TableCell>
        <asp:TableCell>
            <asp:Table ID="GraphSection" runat="server">
            </asp:Table>
        </asp:TableCell>
        <asp:TableCell>
            <asp:ListBox ID="lbAgreement" runat="server" onselectedindexchanged="lbAgreement_SelectedIndexChanged" onprerender="lbAgreement_PreRender" AutoPostBack="True" ForeColor="#006F5F"  Width="180" Height="750" Font-Names="Calibri" Font-Size="14" >
            </asp:ListBox>
        </asp:TableCell>
    </asp:TableRow>
</asp:Table> 

<html>
  <head>        
    <title>My First chart using FusionCharts XT - Using pure JavaScript</title>         
    <script type="text/javascript" src="/FusionCharts/FusionCharts.js"></script>
  </head>   
  <body>     
    <div id="chartContainer">FusionCharts XT will load here!</div>          
    <script type="text/javascript"><!--

        FusionCharts.setCurrentRenderer('javascript');

        var myChart = new FusionCharts("/FusionCharts/Column2D.swf",
                    "myChartId", "400", "300", "0");

        myChart.setXMLUrl("/FusionCharts/Data.xml");

        myChart.render("chartContainer");

    // -->  
    </script>      
  </body> 
</html>

2- MyASCX.ascx.cs:

protected override void OnLoad(EventArgs e)
        {
                        
            try
            {
               DrawGraph();
            }
            catch (Exception ex)
            {
                ShowMessage(this.Page+ " SourceOrg:OnLoad: "+ ex);
            }
        }       

//Draw Graph
        public void DrawGraph()
        {
            //new table row and cell
            TableRow r = new TableRow();
            TableCell c = new TableCell();

            //create chart object and add it to Graph section cell           

           c.Text = FusionCharts.RenderChart("/FusionCharts/Column2D.swf",
                                              "/FusionCharts/Data.xml",
                                              "", "myChart1ID", "400", "200", false, true);
            r.Cells.Add(c);

            // add row object to table
            GraphSection.Rows.Add(r);
        }

So I am using the same relative paths and the same data file and swf file in both cases, and I am using the same way you recommended to show the Chart in asp:table cell.

Still the chart shows successfully in the div but fails in the table cell.

 

Please provide your support,

Thank

Hi,

 

We sincerely apologize for the delay. :(

 

Please note that we are unable to replicate the issue using your code in our sample. The same is working perfectly and rendering the chart as expected. You may check with the attached sample for your reference.

 

Hope this helps. :)

TableCellIssue.zip

Share this post

Link to post
Share on other sites

FusionFerro   

FusionFerro
Posted (edited)

Thanks for the reply,

 

I have been investigating the case and I have the following questions/observations:

 

1- it seems that the problem is in the way I am adding a reference to FusionChart.dll.

 

I have this file in my vstudio project bin directory and I added it to project reference from that location.

 

However, the application throws an exception: "+  ex {"Could not load file or assembly 'FusionCharts, Version=3.2.2.2, Culture=neutral, PublicKeyToken=58bb3098fe7f0ede' or one of its dependencies. The system cannot find the file specified.":"FusionCharts, Version=3.2.2.2, Culture=neutral, PublicKeyToken=58bb3098fe7f0ede"} System.Exception {System.IO.FileNotFoundException}
"

I am using the FusionCharts.dll from the evaluation version but I got the same problem even when I use the dll included in your sample (TableCellIssue.zip), I also noticed there is another file with the same name in addition to .refresh in the sample (although this file is just 1 K).

 

2- I also noticed that you are using the following two lines before the DrawGraphs method call to set the script and data language parameters, is this needed?

        FusionCharts.SetRenderer("javascript");
        FusionCharts.SetDataFormat("json");

3- Finally I also noticed that you are using the following line in the sample .aspx:

<script type="text/javascript" src="Charts/JS/FusionCharts.js"></script>
</asp:Content>

and I understand that this is not needed as the application uses FusionCharts.dll instead of FusionCharts.js, am I correct?

 

 

Kindly provide your support as I am stuck at this problem for 3 weeks now.

 

Thanks,

Edited by FusionFerro

Share this post

Link to post
Share on other sites

Guest Sumedh   

Guest Sumedh
Posted

Hello,

 

Please find answers to your queries in-line below:

 

1>> If you are facing issues with the FusionCharts.dll, then you can try once by removing the assembly from the GAC (Global Assembly Cache).

 

And you can again add the reference of FusionCharts.dll in your application. Also note, you can use FusionCharts.dll as strongly named assembly,

 

You can put it into your GAC (Global Assembly Cache). Once you have added FusionCharts in GAC, you can directly refer to the assembly in your project without including it in the Bin folder of the project. This steps below describe how to add FusionCharts.dll in GAC and use it in your project. 

 

For more information, please refer the following link ("Advanced Note - Using strongly named assembly" section):

http://docs.fusioncharts.com/charts/contents/guide-for-web-developers/csnet/CS_BasicExample.html

 

 

2>> If you want to render the chart in JavaScript variant, forcefully, then you would need to add this

FusionCharts.SetRenderer("javascript");

 

SetDataFormat is used to configure the data format, since FusionCharts XT accepts data in XML/JSON format, so if you are using JSON to plot data, then you would need to add below line of code

 FusionCharts.SetDataFormat("json");

 

All the methods and configurations are specified here, please refer this link: http://docs.fusioncharts.com/charts/contents/guide-for-web-developers/csnet/CS_BasicExample.html

 

 

3>> FuisonCharts.dll is an API for creating charts with ASP.NET environment, it only provides methods and properties to create charts with ASP.NET. The ASP.NET C# helps you output this JavaScript and XML/JSON.

Ultimately for rendering charts on browser, you would need to add FusionCharts.js script reference in <head>, since FusionCharts.js and its related files are responsible for all the chart's configurations and rendering mechanism.

 

So, it it mandatory to add the FusionCharts.js file reference in the <head> section of your .aspx page.

 

Hope this helps!

 

Share this post

Link to post
Share on other sites

FusionFerro   

FusionFerro
Posted

Thanks a lot for the comprehensive response. It helped for sure.

 

I just want to highlight that the dll worked after adding it to the GAC AND adding it to project references. It didn't work after adding to GAC alone (couldn't recognize

InfoSoftGlobal unless the dll is added to project references) and I don't know why.

 

So thank you very much.

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
Go To Topic Listing FusionCharts and ASP.NET