Area2D Configurations

[akhader]

Hi,

 

I am using Area2D FusionChart with smartGWT, there are somethings that I can not do it:

1)I want to remove the labels from x-y Axis.

2)Change the fill color of the chart to other colors.

3)Change the white color of the drawing area.

4)To draw a JSON data instead of XML

 

Please see the attached screen- shot

 

Note: I used the same example in "http://www.uptick.co...nd-fusioncharts" except I used only the Area2D chart other is the same.

 

Thanks

Edited May 15, 2012 by akhader

[Guest Bindhu]

Hi,

 

1)I want to remove the labels from x-y Axis.

>> Please use the following attributes,

 

1. Set 'showLabels' to 0 in order to hide the x-axis labels.

2. Set 'showYAxisValues' to 0 in order to remove y-axis values.

3. Do not define 'xAxisName' and 'yAxisName' attributes in the <chart> element to remove the x-axis name and the y-axis name.

 

2)Change the fill color of the chart to other colors.

>> Please try setting the attibute 'plotFillColor' to desired color.

 

Ref. Code:

<chart plotFillColor='009933' .../>

 

3)Change the white color of the drawing area.

>> Please try using the 'canvasBgColor' attribute.

 

4)To draw a JSON data instead of XML

>> You have to use setJSONData() or setJSONUrl() method to provide data.

 

For more details on 'Using JSON as data source', please refer to the link below,

http://docs.fusioncharts.com/charts/contents/?FirstChart/JSONData.html

 

For more details on 'Area 2D Chart Specification Sheet', please refer to the link below,

http://docs.fusioncharts.com/charts/contents/?ChartSS/Area2D.html

 

Hope this helps!

[akhader]

Thanks Bindhu for your response

 

According to the Lable I did what you said and they are still appears.

 

Also there are some color configurations I do not know how to change it please see the attached screen-shot.

 

Here is Area2D.xml that I am using:

<graph canvasBgColor="474747" showLabels='0' showYAxisValues='0' bgColor='474747'>
<set name='Jan' value='17400' color='FF0000' />
<set name='Feb' value='18100' color='FF0000' />
<set name='Mar' value='21800' color='FF0000' />
<set name='Apr' value='23800' color='FF0000' />
<set name='May' value='29600' color='FF0000' />
<set name='Jun' value='27600' color='FF0000' />
<set name='Jul' value='31800' color='FF0000' />
<set name='Aug' value='39700' color='FF0000' />
<set name='Sep' value='37800' color='FF0000' />
<set name='Oct' value='21900' color='FF0000' />
<set name='Nov' value='32900' color='FF0000' />
<set name='Dec' value='39800' color='FF0000'/>
</graph> 

 

If you notice I am using graph tag as in the example "http://www.uptick.com.au/content/smartgwt-and-fusioncharts" not a chart tag.

 

Here is the FushionChart class in my project:

public class FusionChart extends Flashlet{
private static int count = 0;
  private String swfId;
  public FusionChart(String src, String width, String height, String dataUrl) {
    super();
    setCodeBase("http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0");
    setClassID("clsid:d27cdb6e-ae6d-11cf-96b8-444553540000");
    setPluginsPage("http://www.macromedia.com/go/getflashplayer");   
    swfId = "fusionChartId_" + count;
    ++count;
    setID(swfId);
    setName(swfId);
    setSrc("charts/fusioncharts/flash/" + src);
    setSize(width, height);
    HashMap<String, String> hashMap = new HashMap<String, String>();
    hashMap.put("id", swfId);
    hashMap.put("flashvars", "&id=" + swfId + "&chartWidth=" + width + "&chartHeight=" + height + 
        "&registerWithJS=1" + "&debugMode=0" + "&dataURL=" + "charts/fusioncharts/data/" + dataUrl);

    // hashMap.put("allowscriptaccess", "always");
     hashMap.put("bgcolor", "#F7F7F7");
    // hashMap.put("quality", "high");

    // If you embed the chart into your web page, and the page has layers such as drop-down menus or
    // drop-down forms, and you want them appear above the chart, you need to add the following  line
    // to your code.
    // hashMap.put("wmode", "opaque" );
    setParams(hashMap);
    // setCanSelectText(true);
  }
}

 

Thanks

[Guest Bindhu]

Hi,

 

Can you please let us know the version of FusionCharts that you are currently using?

 

In order to change the plot border color please use the attribute 'plotBorderColor'.

 

In order to change the div line color please use the attribute 'divLineColor'.

Edited May 16, 2012 by Bindhu

[akhader]

I am using version 2.2

 

The orange line of the chart is still appear!!!

 

What about the ability to change border color?

 

And Does FusionChart supports to make the fill color as transparent, or to set a background image instead of the fill color?

[Guest Bindhu]

Hi,

 

Please try upgrading to the latest version of FusionCharts, i.e., FusionCharts XT SR3, to use all the new features.

[akhader]

I switched to FusionCharts XT.

 

Please see the attached screen-shot since my questions are on the chart

[Guest Bindhu]

Hi,

 

In order to change the alternate Horizontal GridColor, please use the 'alternateHGridColor' attribute.

 

In order to remove the values, set 'showValues' attribute to 0.

 

And can you please let us know what do you mean by 'this color is not 474747'?

 

Hope this helps!

 

[akhader]

I made all of the above and everything worked perfect.

 

But I still have 2 questions, as usual they are located in the screen-shot.

[Guest Bindhu]

Hi,

 

How to make red color appear transparent?

>> Please try using the attribute 'plotFillAlpha' and set it to appropriate value.

 

Ref. Code:

<chart plotFillAlpha='40' .../>

 

How to remove light gray?

>> Please set the attribute 'bgAlpha' to 0.

 

Hope this helps!

Edited May 18, 2012 by Bindhu

[akhader]

You post was helpful thanks

 

One last question this is how the chartFusion works with SmartGWT, I want to add an HLayout above the chart I tried the following code:

public void onModuleLoad() {
	FusionChart chart1 = new FusionChart("Area2D.swf", "400", "350", "Data.xml");
	chart1.setBackgroundColor("FF0000");


	HLayout hLayout = new HLayout();
	hLayout.setSize("10px", "20px");
	hLayout.setBackgroundColor("00FF00");

	chart1.addChild(hLayout);
	chart1.draw();
}

 

but it does not appear, do you have any idea?

[Guest Bindhu]

Hi,

 

Glad to know

 

With regards to HLayout, I am afraid, we do not have any implementations of the same.

Edited May 21, 2012 by Bindhu

[akhader]

Thanks for your help, I am really appreciate it.

[Guest Bindhu]

Hi,

 

Thank you

 

Happy FusionCharting