Multiple Charts on same page

[Icarus]

Hello,

 

 

 

I appreciate the example code that was placed in documentation, but it's not really helping in my certain application of Fusion Charts. The example calls GetFactorySummaryChartHtml and populates the object xmlData to be used in the execution of RenderChart in FusionCharts.js.

 

 

 

I need to populate multiple charts from the same query or sets of queries. I can certainly create different xmlData sets, but what's the best way to go about executing RenderChart multiple times instead of via the Return in the example?

 

 

 

 

[b]<%=GetFactorySummaryChartHtml()%> [/b]



public string GetFactorySummaryChartHtml()

{

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

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

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

  //other.



  //xmlData will be used to store the entire XML document generated

  string xmlData;



  //Generate the chart element

  xmlData = "";



  //Iterate through each factory

  string factoryQuery = "select * from Factory_Master";

  using (OdbcConnection connection = DbHelper.Connection(DbHelper.ConnectionStringFactory))

  {

     using (OdbcCommand factoryCommand = new OdbcCommand(factoryQuery, connection))

     {

        using (OdbcDataAdapter adapter = new OdbcDataAdapter(factoryCommand))

        {

           DataTable table = new DataTable();

           adapter.Fill ( table );



           foreach ( DataRow row in table.Rows)

           {

              string quantityQuery = "select sum(Quantity) as TotOutput from Factory_Output where FactoryId=" + row["FactoryId"].ToString();

              using (OdbcCommand quantityCommand = new OdbcCommand(quantityQuery,connection))

              {

                 xmlData += "";

              }

           }

        }

     }

  connection.Close();



  xmlData += "";

  }



  //Create the chart - Pie 3D Chart with data from xmlData

  [b]return FusionCharts.RenderChart("../../FusionCharts/Pie3D.swf", "", xmlData, "FactorySum", "600", "300", false, false);[/b]

}

 

 

 

Thanks in advance for any assistance!

Edited June 28, 2007 by Guest

[Pallav]

You can call renderChart() multiple times - but parameterize the function which returns the XML data to return different XML data based on same recordset.

[tuongdiep2003]

I have a same issue that I want to have multiple charts programatically (each chart stands next to the other one). I have created multiple XML data files but I could not link them to the renderchart function.

Can you pls show us a sample code (several code lines:)) that we can call renderchart several time with seperate XML file?

Thanks a lot.

[Pallav]

Please see http://www.fusioncharts.com/docs/Contents/JS_setDataURL.html

[FusionCharts Support]

hi,

 

To render multiple charts in the same page ....

 

 

 

[ This is exclusively for ASP.NET C# though the same technique can be used in any server side technology with some minor tweaks]

 

 

 

What you can do is :

 

 

 

1. In the main page you render multiple charts using renderChart() function a umber of times.

 

2. For each render you use dataURL method and pass the dataURL to a server side page...say dataGen.aspx with some additional parameters to get sepcific XML as dataURL XML from that page.

 

 

 

e.g.

 

using InfoSoftGlobal;

 

 

 

String dataURL1=Server.UrlEncode("Datagen.aspx?viewType=monthwise");

 

response.write(FusionCharts.RenderChart("{SWF}",dataURL1,"",chartID,"400",300",false,false);

 

 

 

 

 

String dataURL2=Server.UrlEncode("Datagen.aspx?viewType=factorywise");

 

Response.write(FusionCharts.RenderChart("{SWF}",dataURL2,"",chartID,"400",300",false,false);

 

 

 

 

 

3. Now you build your Datagen.aspx code in a way to mine data from database according to viewType request passed to it, create relevent XML (in a string, say, strXML) and setting Response.contentType="text/xml"

 

return the XML string : Response.write(strXML);

[spotsudhi]

Hi,

 

I am doing as below to display multiple charts (Multi-Series Stacked Column chart) using ASP.NET 2.0 & VB.NET.

 

 

 

In HTML Page, I am calling server side procedures as follows:

 

 

 

 

<%=GenerateReport1()%>

 

 

 

<%=GenerateReport2()%>

 

 

 

 

 

 

In each of these functions, I am declaring xmlData as string and getting data from database and passing them onto FusionCharts.RenderChart function. For both charts I am using different xmlData variable & chartIds.

 

 

 

What is happening is the 2nd chart is being displayed in place of first chart and 2nd chart doesn't display at all. But when there is no data for both charts, then i am displaying a message as " no data found / uploaded for the current week", which gets displayed correctly.

 

 

 

Any ideas to fix this issue?

 

 

 

Regards,

 

Sudhakara.T.P.

[Krishna_Solanki]

create two div. For ex div1 and div2. And call the methods separately.

[Guest Rajroop]

@khrishna- Thank you for sharing your inputs on this Forum.

[MarcelJansens]

I have three charts on my screen. All in seperate divs. The first two react good. When I click on one of the bars in the first graph, the second graph loads data for the selected year. The third graph should react on the selection of a bar in the second graph.

 

 

 

http://www.businessanalisten.nl/nnyFile/?nYear=2009&Oorzaak=overige%20oorzaken&Maand=04

 

 

 

The third chart shows an 'no data to display' error. The fact is that when I copy the created XML string into an XML file and point the third graph directly to the XML file, it does work

 

 

 

The created XML can be found at http://www.businessanalisten.nl/nnyFile/includes/graphdaypart.php?nYear=2009&Oorzaak=overige%20oorzaken&Maand=04

 

 

 

Please ... help ...

[Guest Madhumita]

Hello,

The issue arises because too much time is taken to load the data from http://www.businessanalisten.nl/nnyFile/?nYear=2004&Oorzaak=incidenteel&Maand=01 and thus the data loading operation is timed-out.

 

An alternative would be to fetch the data by AJAX and then do a setDataXML on the fetched data.