jledhead

Side by Side Charts

By jledhead, in FusionCharts and ASP

Recommended Posts

jledhead   

jledhead
Posted (edited)

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:

 

<!--#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.

Edited by Guest

Share this post

Link to post
Share on other sites

Guest Basundhara Ghosal   

Guest Basundhara Ghosal
Posted

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.

Share this post

Link to post
Share on other sites

Guest Madhumita   

Guest Madhumita
Posted (edited)

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.

Edited by Guest

Share this post

Link to post
Share on other sites

shamasis   

shamasis
Posted

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.

 

 

 

<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>

Share this post

Link to post
Share on other sites

jledhead   

jledhead
Posted
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.

 

 

 

<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.

Share this post

Link to post
Share on other sites

Guest Madhumita   

Guest Madhumita
Posted

Hello,

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

Happy FusionCharting. :)

Share this post

Link to post
Share on other sites

genghis9021   

genghis9021
Posted (edited)

Would your method work with JS chart render . . . like

 

<%

var myChartLeft = new FusionCharts ( "FusionCharts/Column3D.swf", "myChart1", "400", "300" );

var myChartRight = new FusionCharts ( "FusionCharts/Column3D.swf", "myChart2", "400", "300" );

 

myChartLeft.setXMLData("data1.xml");

myChartRight.setXMLData("data2.xml");

 

myChartLeft.render("chartContainer");

myChartRight.render("chartContainer");

%>

 

<script type="javascript">

inlineChart("myChart1");

inlineChart("myChart2");

</script>

 

...

 

This FORCES the JS charts . . . if it works.

 

But what if I want to offer charts to non-Flash AND Flash devices ?

 

 

 

<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>

 

 

 

myChart = new FusionChart

chart.render()

chart.setXML

chart.

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.

Edited by genghis9021

Share this post

Link to post
Share on other sites

Guest Sashibhusan   

Guest Sashibhusan
Posted

Hi,

 

To force render the chart in JavaScript method, you need to add below line of code, before rendering the chart.

 

Ref. Code:

FusionCharts.setCurrentRenderer("javascript");
myChartLeft.render("chartContainer");

 

But, please note that FusionCharts XT has automatic JavaScript Fallback feature, wherein the charts figure out the best mode of rendering (either Flash or JavaScript, based on availability of Flash Player).

 

So, both non-Flash and Flash devices, it will work fine.

 

Hope I am able to clarify myself.

Share this post

Link to post
Share on other sites

genghis9021   

genghis9021
Posted

The REAL question which most of my post discussed was regarding: a) side-by-side JS Charts . . . ; B) that would work on iOS (JS) and desktop browsers (Flash), and; c) with the same code and automatically.

 

B) & c) were only of interest IF a) could be solved.

Hi,

 

To force render the chart in JavaScript method, you need to add below line of code, before rendering the chart.

 

Ref. Code:

FusionCharts.setCurrentRenderer("javascript");
myChartLeft.render("chartContainer");

 

But, please note that FusionCharts XT has automatic JavaScript Fallback feature, wherein the charts figure out the best mode of rendering (either Flash or JavaScript, based on availability of Flash Player).

 

So, both non-Flash and Flash devices, it will work fine.

 

Hope I am able to clarify myself.

Share this post

Link to post
Share on other sites

Guest Sumedh   

Guest Sumedh
Posted

Hi,

 

For creating two divs side by side, you would need to use following CSS code:

 

 

For placing a div to the left and one to the right, you can do this:

 

Ref Code:

 

CSS:

#leftdiv { width: 300px; border: 1px solid red; float: left}

#rightdiv { width: 300px; border: 1px solid red; float: right}

 

HTML Code:

<div id="leftcolumn">First Chart will be rendered here in Left Div</div>

<div id="rightcolumn">Second Chart will be rendered in the Right Div</div>

 

Now render the charts,

 

chart1.render("leftdiv");

chart2.render("rightdiv");

 

Hope this helps!

Share this post

Link to post
Share on other sites

FusionCharts Support   

FusionCharts Support
Posted

Hi,

 

Yes it is possible.

 

a) Side-by-side rendering of charts in iOS (and any other platform/device) is possible with correct HTML elements (like inside <span>) and CSS ( like using display:inline) is possible.

 

Example, please try an example from here in your iOS device as well as in any desktop browser.

 

b ) The charts render using Flash in Desktop browsers and in browsers that have Flash Player support. The charts render using JavaScript in browsers that do not support Flash Player or that do not have Flash Player or have Flash Player disabled

 

c) You do not need to write any extra code to achieve b ). FusionCharts automatically does it for you. So, you retain the same code. You can read more on this from the following links:

 

i ) http://docs.fusioncharts.com/charts/?FirstChart/FirstChart.html#how_it_works (check the highlighted section with title: "What happens if Flash player is not available?" )

ii ) http://docs.fusioncharts.com/charts/?Introduction/Upgrading32.html#ipad

iii ) http://docs.fusioncharts.com/charts/?FirstChart/UsingPureJS.html

 

Hope this helps.

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