Sign in to follow this  
Followers 0
Aadithan

How To Change The Background

By Aadithan, in General usage

Recommended Posts

Aadithan   

Aadithan
Posted

Hi

 

How to change the Background in to transparent. For eg if there is no data to display white block is displayed i want make it as transparent or i want to give any color.

 

 

Please help

Share this post

Link to post
Share on other sites

Guest Angshu   

Guest Angshu
Posted

Hi,

 

Thanks for your post.

 

If you wish to set your chart background as transparent in the HTML page, you need to follow these steps:

 

You need to configure chart's data as following:

 

1. If you are feeding data in XML format, set <chart ... bgAlpha='0,0' ...>

 

2. If you are feeding data in JSON format, set "chart":{ ... "bgalpha":"0,0", ...}

 

3. In the HTML code that embeds the chart, set myChart.setTransparent(true)

 

Please find the sample code snippet below:

 

<div id="chartdiv" align="center">The  chart will appear within this DIV. This text will be replaced by the  chart.</div>
   <script type="text/javascript">
       var myChart = new FusionCharts("../FusionCharts/Column3D.swf", "myChartId", "900", "300", "0", "1");
       myChart.setXMLUrl("Data.xml");
       myChart.setTransparent(true);
       myChart.render("chartdiv");
   </script>
</div>

 

 

If you wish to set a background color for the chart when these messages are shown, you can do this by setting the bgColor parameter of the FusionCharts JavaScript constructor. e.g., if you wish to set, say, purple as the background color while the messages are being shown, your code should be as shown below:

 

<div id="chartContainer">FusionCharts will load here</div>
<script type="text/javascript">
 var myChart = new FusionCharts("Column2D.swf", "myChartId", "300", "250", "0", "1", "#DCD8EB");
 myChart.setXMLUrl("<chart></chart>");
 myChart.configure("ChartNoDataText", "Please select a record above");
 myChart.render("chartContainer");
</script>

 

Ref: http://docs.fusionch...rtMessages.html

 

Hope this helps. smile.gif

Share this post

Link to post
Share on other sites

Aadithan   

Aadithan
Posted

I can change the background transparent when there is no data to display

 

however when there is data chart appear with white background. Please fine the attached image and send me the

 

sample code for avoiding that white background.

 

 

Thanks

post-21748-0-43651300-1322660964_thumb.png

Share this post

Link to post
Share on other sites

Guest Sashibhusan   

Guest Sashibhusan
Posted

Hi Aadithan,

Thanks for Interest in FusionCharts.

 

Try the below code and you will find the background transparent with the data chart.

 

XML code Sample :

 

<chart caption='Monthly Revenue' xAxisName='Month' yAxisName='Revenue' bgAlpha='0,0'>

<set label='Jan' value='' />

<set label='Feb' value='910000' />

<set label='Mar' value='720000' />

<set label='Apr' value='550000' />

<set label='May' value='810000' />

</chart>

 

JS code Sample:

 

<html>

<head>

<title>My First chart using FusionCharts</title>

<script type="text/javascript" src="FusionCharts/FusionCharts.js">

</script>

</head>

<body bgcolor="000000">

<div id="chartContainer">FusionCharts will load here!</div>

<script type="text/javascript"><!--

 

var myChart = new FusionCharts( "FusionCharts/Column3D.swf",

"myChartId", "400", "300", "0", "1" );

myChart.setXMLUrl("Data.xml");

myChart.setTransparent(true);

myChart.render("chartContainer");

 

// -->

</script>

</body>

</html>

 

Hope this helps.

 

post-23588-0-60288700-1322716858_thumb.jpg

Share this post

Link to post
Share on other sites

Guest Angshu   

Guest Angshu
Posted

Hi,

 

Thanks for your post.

 

Please find the XML code below:

 

<chart caption='Weekly Sales Summary' xAxisName='Week' yAxisName='Amount' numberPrefix='$' bgColor='FF1200' canvasBgAlpha='0' canvasbgColor='1D8BD1'> 
   <set label='Week 1' value='14400' /> 
   <set label='Week 2' value='19600' /> 
   <set label='Week 3' value='24000' /> 
   <set label='Week 4' value='15700' /> 
</chart>

 

 

Hope this helps.

Share this post

Link to post
Share on other sites

Aadithan   

Aadithan
Posted

Hi

 

 

I have a pie chart showing some datas. for eg : Revenue, Loss, Gain etc

 

my question is : If i click the revenue i should open a grid in popup to show the details of the revenue alone .

 

Similar like drill down. Please send me with clear example

 

 

Thanks

Share this post

Link to post
Share on other sites

Guest Angshu   

Guest Angshu
Posted

Hi,

 

Thanks for your post.

 

Could you please send us a screenshot or any live link of your requirement?

 

Awaiting for your response.

Share this post

Link to post
Share on other sites

Aadithan   

Aadithan
Posted

i have attached one sample pie chart here if i click particular Mechanical engineering field it should show the colleges in the grid where mechanical graduates came from.

 

 

for eg: if i click January month it should show detail grid of day wise report.

 

 

Thanks

Share this post

Link to post
Share on other sites

Aadithan   

Aadithan
Posted

i have attached one sample pie chart here if i click particular Mechanical engineering field it should show the colleges in the grid where mechanical graduates came from.

 

 

for eg: if i click January month it should show detail grid of day wise report.

 

 

Thanks

post-21748-0-08334000-1323404072_thumb.png

Share this post

Link to post
Share on other sites

Guest Sashibhusan   

Guest Sashibhusan
Posted

Hi

Thanks for your post.

 

Can you please try the below code for your requirement attached in the screen shot ? (see attached screen shot : )

<chart caption='Engineering Master degree 2005' 
xAxisName='Month'
yAxisName='Sales'
bgColor='281EEB'
baseFontColor='FFFFFF'
> 
<set label='Computer' value='96' displayValue='Computer,96' link='P-detailsPopUp,width=400,height=300,toolbar=no, 
 	scrollbars=no,resizable=no-DemoLink1.html'/>
<set label='Mechanical' value='35' displayValue='Mechanical,35' link='P-detailsPopUp,width=400,height=300,toolbar=no, 
 	scrollbars=no,resizable=no-DemoLink1.html'/>
<set label='Industrial' value='55' displayValue='Industrial,55' link='P-detailsPopUp,width=400,height=300,toolbar=no, 
 	scrollbars=no,resizable=no-DemoLink1.html'/>
<set label='Civil' value='43' displayValue='Civil,43' link='P-detailsPopUp,width=400,height=300,toolbar=no, 
 	scrollbars=no,resizable=no-DemoLink1.html'/>
<set label='Electrical' value='87' displayValue='Electrical,87' link='P-detailsPopUp,width=400,height=300,toolbar=no, 
 	scrollbars=no,resizable=no-DemoLink1.html'/> 
<set label='Biotechnology' value='82' displayValue='Biotechnology,82' link='P-detailsPopUp,width=400,height=300,toolbar=no, 
 	scrollbars=no,resizable=no-DemoLink1.html'/>
</chart>

The popup link page is DemoLink1.html

<html>
<head></head>
<body>
<p>You can show detailed data for Computer science branch here or show another "zoomed-in" chart.</p>
</body>
</html>

 

You can give different links to each data according to your requirement. But I have linked single HTML page to all <set...> elements for demo only.

 

Hope this helps!!

Happy Fusioncharting :D

post-23588-0-63506900-1323407775_thumb.png

Share this post

Link to post
Share on other sites

Aadithan   

Aadithan
Posted

background is set to transparent but it is not applied in IE 8 browser issues there how to solve it.

 

Then i want to specify the legend by own for eg: i have series for of bars in bar chart . For particular bar color i want to specify legend in bottom like Red-> Danger Green-> Fine how to do this

Share this post

Link to post
Share on other sites

Guest Bindhu   

Guest Bindhu
Posted

Hi,

 

Thank you for the post.

 

background is set to transparent but it is not applied in IE 8 browser issues there how to solve it.

>> Can you please post the XML file to test in our labs ?

 

Then i want to specify the legend by own for eg: i have series for of bars in bar chart . For particular bar color i want to specify legend in bottom like Red-> Danger Green-> Fine how to do this

>> We are afraid, FusionCharts does not let you create your own legends. However, you can configure the legends using the legends' attributes.

 

For more information on "Legend Properties", please refer to the link below,

http://docs.fusioncharts.com/charts/contents/ChartSS/MSBar2D.html#Anchor16

 

Hope this helps !!

 

Happy FusionCharting biggrin.gif

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
Sign in to follow this  
Followers 0
Go To Topic Listing General usage