FusionCharts Forum: Side by Side Charts - FusionCharts Forum

Jump to content

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Side by Side Charts How to make charts appear side by side

#1 User is offline   jledhead 

  • Forum Newbie
  • Group: Members
  • Posts: 5
  • Joined: 13-January 10

Posted 01 March 2010 - 01:03 PM

I am trying to create 2 pie charts on a page and there seems to be something that is causing a line break between the 2 charts. both charts are working correctly and I have changed the size so I know its got room to be side by side.
here is the code to create the charts:

Quote


<!--#INCLUDE FILE="project_conn.asp" --><br>
<br>
  <SCRIPT LANGUAGE="Javascript" SRC="FusionCharts_User/JSClass/FusionCharts.js"></SCRIPT><br>
  </HEAD><br>
<!-- #INCLUDE FILE="FusionCharts_User/Code/ASP/Includes/FusionCharts.asp" --><br>
<%<br>
Dim strXML  <br>
 sql = "select (select area from area where area.id = plandata.businessarea) as axis, businessarea, count(id) as status from plandata group by businessarea" <br>
 set rs = conn.execute(sql) <br>
<br>
<br>
' strXML = "<chart caption='Factory Output report' subCaption='By Quantity' pieSliceDepth='30' showBorder='1' formatNumberScale='0' numberSuffix=' Units'>" <br>
 strXML = "<chart caption='Open Projects' subCaption='by Business Area' pieSliceDepth='10' showLabels='0' showBorder='0' formatNumberScale='0' >"<br>
<br>
 do while not rs.eof<br>
 strXML = strXML & "<set label='" & rs("axis") & "' value='" & rs("status") & "' link='projectbyarea.asp?query1=" & rs("businessarea") & "' />"<br>
<br>
 rs.movenext<br>
 loop <br>
 rs.close<br>
strXML = strXML & "</chart>"<br>
<br>
<br>
'Create the chart - Column 3D Chart with data from strXML variable using dataXML method<br>
 Call renderChart("FusionCharts_User/Charts/Pie2D.swf", "", strXML, "byarea", 250, 300, false, false)<br>
%><br>

no matter what I do the charts are on top of each other instead of side by side. help is appreciated.

0

Other Replies To This Topic

#2 User is offline   Basundhara Ghosal 

  • Supreme Being
  • PipPipPipPipPipPipPipPip
  • Group: Members
  • Posts: 2459
  • Joined: 15-September 09

Posted 01 March 2010 - 10:11 PM

Hi,

Could you please let us know whether you are specifying the width and the height of the chart in "%" or in "pixel"?

Also, could you please try rendering the chart in a browser other than the one that you are using?

Awiting your reply.

Regards,

Basundhara Ghosal

Follow us on Twitter :D
0

Other Replies To This Topic

#3 User is offline   Madhumita 

  • Supreme Being
  • PipPipPipPipPipPipPipPip
  • Group: Members
  • Posts: 1434
  • Joined: 04-September 09

Posted 01 March 2010 - 11:03 PM

Hello,

 When you are using ASP to render charts, the charts ar by default rendered one after another (not side by side) as the renderChart() renders FusionCharts inside <div> elements. As a possible alternative, you can set the style of the the <div> elements into 'inline' elements using JavaScript.

Please refer to the code below:
<html>
<head>
<script type="text/javascript">
function inlineChart(id) {
  document.getElementById(id).parentNode.style.display = 'inline';
}
</script>
</head>

<body>

<---asp code here---->

<script type="text/javascript">
inlineChart('chart1'); //id of first chart
inlineChart('chart2'); //id of second chart

</script>
</body>

</html>  

I hope this helps you.

Regards,
Madhumita Chakraborty

Follow us on Twitter :)
0

Other Replies To This Topic

#4 User is offline   shamasis 

  • Red Flavoured
  • Group: Administrators
  • Posts: 179
  • Joined: 27-October 08
  • LocationKolkata, India

Posted 02 March 2010 - 12:22 AM

Greetings,



The CSS-only way to do the same is to wrap your charts with a <span> element and set the display value of divs under that span to be inline.



Quote

<html>

<head>

<!-- Your other head elements are here -->





<style type="text/css">

.inlineChart div { display: inline }

</style>

</head>



<body>

<%

' Your FusionCharts ASP Codes Here

%>

<span class="inlineChart"><%Call renderChart("FusionCharts_User/Charts/Pie2D.swf", "", strXML, "byarea", 250, 300, false, false)%></span>



<span class="inlineChart"><%Call renderChart("FusionCharts_User/Charts/Pie2D.swf", "", strXML, "byarea", 250, 300, false, false)%></span>



</body>



</html>

0

Other Replies To This Topic

#5 User is offline   jledhead 

  • Forum Newbie
  • Group: Members
  • Posts: 5
  • Joined: 13-January 10

Posted 02 March 2010 - 10:12 AM

Quote

shamasis (3/2/2010)
Greetings,



The CSS-only way to do the same is to wrap your charts with a <span> element and set the display value of divs under that span to be inline.



Quote

<html>

<head>

<!-- Your other head elements are here -->





<style type="text/css">

.inlineChart div { display: inline }

</style>

</head>



<body>

<%

' Your FusionCharts ASP Codes Here

%>

<span class="inlineChart"><%Call renderChart("FusionCharts_User/Charts/Pie2D.swf", "", strXML, "byarea", 250, 300, false, false)%></span>



<span class="inlineChart"><%Call renderChart("FusionCharts_User/Charts/Pie2D.swf", "", strXML, "byarea", 250, 300, false, false)%></span>



</body>



</html>




awesome, that worked like a champ and was easy to add.



Thanks.
0

Other Replies To This Topic

#6 User is offline   Madhumita 

  • Supreme Being
  • PipPipPipPipPipPipPipPip
  • Group: Members
  • Posts: 1434
  • Joined: 04-September 09

Posted 02 March 2010 - 10:10 PM

Hello,

We are glad to know that the solution worked for you.

Happy FusionCharting. :)

Regards,
Madhumita Chakraborty

Follow us on Twitter :)
0

Other Replies To This Topic

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic