Is There Way To Show Only Left And Bottom Border And Hide Top And Right Borders For Charts

[Upendar Srirangam]

Hi,

We are a licensed user for Fusion Chatrs.

We have a requirement to hide Top and Right border for all the charts in our IPad applications (Javascript renderer)

Can you please let us know if there is any way for achieving this.

 

Appreciate the quick response on this.

 

Thanks,

Upendar

Edited November 23, 2011 by Upendar Srirangam

[xuen]

Hi,

 

I'm looking for the solution of showing only bottom border.

Do you have your solution already?

 

Can anyone guide on how to do this?

 

 

 

Hi,

We are a licensed user for Fusion Chatrs.

We have a requirement to hide Top and Right border for all the charts in our IPad applications (Javascript renderer)

Can you please let us know if there is any way for achieving this.

 

Appreciate the quick response on this.

 

Thanks,

Upendar

[Guest Sumedh]

Hi,

 

I'm looking for the solution of showing only bottom border.

Do you have your solution already?

 

Can anyone guide on how to do this?

 

 

 

 

 

Hi,

 

Can you please elaborate your requirement, a bit more?

 

Can you send us a screen-shot of the same?

[xuen]

Hi,

 

Please see the attachment.

The top columnChart show after i have remove the border.

 

What i want to archive is remove the border except for the bottom border show in the bottom columnChart.

 

 

Hi,

 

Can you please elaborate your requirement, a bit more?

 

Can you send us a screen-shot of the same?

[Guest Sumedh]

Hi,

 

Please see the attachment.

The top columnChart show after i have remove the border.

 

What i want to archive is remove the border except for the bottom border show in the bottom columnChart.

 

 

 

 

Hi,

 

To achieve this, you would need to modify your XML code accordingly.

 

Please try following XML code.

 

Ref. Code:

 

<chart yAxisMinValue='' showlimits='0' showValues='0' showPlotBorder='0' canvasBorderAlpha='0' bgAlpha='0' bgColor='FFFFFF' numDivLines='0' showBorder='0' plotGradientColor=''>

<set label='Jan' value='420' color='AD1F1F' />

<set label='Feb' value='420' color='AD1F1F' />

<trendLines>

<line startValue='0' color='000000' displayvalue=' ' />

</trendLines>

</chart>

 

Also find attached screen-shot your reference.

 

 

Hope this helps.

[xuen]

Hi,

 

I cannot use <trendLines> to archive what i needed because my XML already have the trend line element as average value for the chart data.

 

Any other solution for this?

 

Also i would like to show bottom and left border for other chart.

 

Any solution can easily archieve both situation?

 

 

 

 

Hi,

 

To achieve this, you would need to modify your XML code accordingly.

 

Please try following XML code.

 

Ref. Code:

 

<chart yAxisMinValue='' showlimits='0' showValues='0' showPlotBorder='0' canvasBorderAlpha='0' bgAlpha='0' bgColor='FFFFFF' numDivLines='0' showBorder='0' plotGradientColor=''>

<set label='Jan' value='420' color='AD1F1F' />

<set label='Feb' value='420' color='AD1F1F' />

<trendLines>

<line startValue='0' color='000000' displayvalue=' ' />

</trendLines>

</chart>

 

Also find attached screen-shot your reference.

 

 

Hope this helps.

[Guest Sumedh]

Hi,

 

I cannot use <trendLines> to archive what i needed because my XML already have the trend line element as average value for the chart data.

 

Any other solution for this?

 

Also i would like to show bottom and left border for other chart.

 

Any solution can easily archieve both situation?

 

 

 

 

 

 

Hi,

 

The trendLine applied in the above XML code is a work-around to have a border at the bottom.

 

You can have multiple trendLines on your chart.

 

It is not possible to add border on left-side and right-side of the chart.

 

Hope this helps.

[xuen]

Hi,

 

i have try with the trendline work-around.

It is not working.

 

The line is not show is the value is less than 1.

 

Please help if you have other solution.

 

Thanks...

 

Hi,

 

The trendLine applied in the above XML code is a work-around to have a border at the bottom.

 

You can have multiple trendLines on your chart.

 

It is not possible to add border on left-side and right-side of the chart.

 

Hope this helps.

[Guest Sumedh]

Hi,

 

i have try with the trendline work-around.

It is not working.

 

The line is not show is the value is less than 1.

 

Please help if you have other solution.

 

Thanks...

 

 

 

Hi,

 

To have a border at the bottom it is the only work-around.

 

Please try to add following configurations to have a border at the bottom of the chart.

 

Ref. Code:

 

<chart yAxisMinValue='' showlimits='0' showValues='0' showPlotBorder='0' canvasBorderAlpha='0' bgAlpha='0' bgColor='FFFFFF' numDivLines='0' showBorder='0' plotGradientColor=''>

..

<trendLines>

<line startValue='0' color='000000' displayvalue=' ' />

</trendLines>

</chart>

[xuen]

Hi,

 

The work-around is working but what if I need also the left border?

 

Is there any work-around for that?

 

 

Hi,

 

To have a border at the bottom it is the only work-around.

 

Please try to add following configurations to have a border at the bottom of the chart.

 

Ref. Code:

 

<chart yAxisMinValue='' showlimits='0' showValues='0' showPlotBorder='0' canvasBorderAlpha='0' bgAlpha='0' bgColor='FFFFFF' numDivLines='0' showBorder='0' plotGradientColor=''>

..

<trendLines>

<line startValue='0' color='000000' displayvalue=' ' />

</trendLines>

</chart>

[Guest Sumedh]

Hi,

 

The work-around is working but what if I need also the left border?

 

Is there any work-around for that?

 

 

 

 

Hi,

 

You can get border on the left side of the chart using vLine attribute.

 

Please note, it is a work-around to have a border on the left-side of the chart.

 

vLines are vertical separator lines that help you separate blocks of data.

 

Ref. Code:

 

<chart yAxisMinValue='' showlimits='0' showValues='0' showPlotBorder='0' canvasBorderAlpha='0' bgAlpha='0' bgColor='FFFFFF' numDivLines='0' showBorder='0' plotGradientColor=''>

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

<vLine color='00000' thickness='2'/>

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

<set label='Jan' value='420' color='AD1F1F' />

<set label='Feb' value='420' color='AD1F1F' />

<trendLines>

<line startValue='0' color='000000' displayvalue=' ' />

</trendLines>

</chart>

 

Please find attached screen-shot for your reference.

[xuen]

Hi,

 

i have issue to use trend line as work-around to show left border in StackedBar2D and Bar2D.

 

In attached image below, the left side is the outcome with the xml show in the text file.

But i would like to achieve what chart the show in the right hand side.

 

 

Plese help and thanks in advanced.

 

 

Hi,

 

You can get border on the left side of the chart using vLine attribute.

 

Please note, it is a work-around to have a border on the left-side of the chart.

 

vLines are vertical separator lines that help you separate blocks of data.

 

Ref. Code:

 

<chart yAxisMinValue='' showlimits='0' showValues='0' showPlotBorder='0' canvasBorderAlpha='0' bgAlpha='0' bgColor='FFFFFF' numDivLines='0' showBorder='0' plotGradientColor=''>

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

<vLine color='00000' thickness='2'/>

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

<set label='Jan' value='420' color='AD1F1F' />

<set label='Feb' value='420' color='AD1F1F' />

<trendLines>

<line startValue='0' color='000000' displayvalue=' ' />

</trendLines>

</chart>

 

Please find attached screen-shot for your reference.

trendlineInStackedBarChart.txt

[Swarnam]

Hey,

 

Try adding shadow style element to the canvas object, to obtain only the left border for the Bar charts.

 

Please find the updated XML file attached.

BarchartWithOnlyXaxis.xml

[xuen]

Hi,

 

the shadow line is too thick, is it possible to make it about 1pixel?

 

 

Hey,

 

Try adding shadow style element to the canvas object, to obtain only the left border for the Bar charts.

 

Please find the updated XML file attached.

[Guest Sashibhusan]

Hi,

 

Yes, you can modify the style applied to CANVAS object as per your requirement.

 

To reduce the shadow line thickness, please try by applying "distance" attribute to "1" in the <style> element of your XML data.

 

Please find the attached screen shot of the same for your reference.

 

For more information on "Shadow Style Type", please follow the link below:

http://docs.fusioncharts.com/charts/contents/?Styles/Shadow.html

 

In case if you are required to show the Y-Axis as well as X-Axis line for Stacked Bar 2D Chart, you can achieve this by applying styles to CANVAS object, as per the attached XML.

 

Hope this helps!

BarchartWithOnlyXaxis_and_Y-Axis.xml

[xuen]

Hi,

 

Thanks for help.

It is look great in IE but not in FireFox.

 

please see the attached image. left hand side is render by IE and right hand side is render by FireFox.

The left border which use shadow as work around is not working for FireFox.

 

Anything i miss out?

 

Thanks in advanced.

 

 

Hi,

 

Yes, you can modify the style applied to CANVAS object as per your requirement.

 

To reduce the shadow line thickness, please try by applying "distance" attribute to "1" in the <style> element of your XML data.

 

Please find the attached screen shot of the same for your reference.

 

For more information on "Shadow Style Type", please follow the link below:

http://docs.fusionch...les/Shadow.html

 

In case if you are required to show the Y-Axis as well as X-Axis line for Stacked Bar 2D Chart, you can achieve this by applying styles to CANVAS object, as per the attached XML.

 

Hope this helps!

[Guest Sashibhusan]

Hi,

 

We are not able to replicate the issue from our end.

 

Please find the attached screen shot of the chart rendered using my attached XML file (BarchartWithOnlyXaxis_and_Y-Axis.xml), in Firefox browser.

 

Hope this helps!

[xuen]

Hi,

 

will it cause by the FireFox version?

I'm using 13.0 and I found there are some different for the chart you render compare to mine.

From your attached image, i saw the "FusionChart Trials" word is at the top but for my version, it is show at the bottom with the word '"FusionCharts" (see attachment).

 

 

Please help.

 

Thanks in advance.

 

 

Hi,

 

We are not able to replicate the issue from our end.

 

Please find the attached screen shot of the chart rendered using my attached XML file (BarchartWithOnlyXaxis_and_Y-Axis.xml), in Firefox browser.

 

Hope this helps!

[Guest Bindhu]

Hi,

 

The difference is that one is a Flash chart and the other is a JavaScript chart.

 

The one with 'FusionCharts Trial' at the top left corner is the Flash chart and the one with 'FusionCharts' at the bottom right corner is the JavaScript chart.

 

Hope this clarifies.

[Guest Bindhu]

Hi,

 

Also, please note that the JavaScript charts support only font style formatting and does not support any other styles.

 

Hope this helps!

Edited June 15, 2012 by Bindhu

[xuen]

Hi,

 

So is it mean Flash Chart in FireFox cannot render the shadow? So I can't see the left border which using shadow as work around in FireFox?

 

 

 

 

Hi,

 

Also, please note that the JavaScript charts support only font style formatting and does not support any other styles.

 

Hope this helps!

[Guest Bindhu]

Hi,

 

No, not Flash charts but JavaScript charts. JavaScript charts does not support any other style formatting but font style format.

 

Hope I am able to clarify.

[xuen]

Hi,

 

Need more information.

But why in IE, the JavaScript chart is able to render the shadow?

 

I have try run the application in IE8, FireFox v12.0 and FireFox v13.0.

IE8 and FireFox v12.0 able to show the shadow but FireFox v13.0 unable to show the shadow.

 

 

Please help.

Thanks.

 

Hi,

 

No, not Flash charts but JavaScript charts. JavaScript charts does not support any other style formatting but font style format.

 

Hope I am able to clarify.

[Guest Bindhu]

Hi,

 

JavaScript and HTML5 are browser dependent features and every browser has certain differences in the way they handle implementation of HTML5 support.

 

Hence, however hard we try to bridge the difference, there is still a likelihood of minor differences to be encountered when comparing the same chart configuration on various browsers.

 

In JavaScript charts, only font, color, size, bold and italic attributes are supported. Support for rest of the attributes is browser specific.

 

Hope this clarifies.

[xuen]

Hi,

 

Thanks.

So do we have another work-around to render only the left border for barchart instead of using shadow?

 

 

Please help.

Thanks in advance.

 

Hi,

 

JavaScript and HTML5 are browser dependent features and every browser has certain differences in the way they handle implementation of HTML5 support.

 

Hence, however hard we try to bridge the difference, there is still a likelihood of minor differences to be encountered when comparing the same chart configuration on various browsers.

 

In JavaScript charts, only font, color, size, bold and italic attributes are supported. Support for rest of the attributes is browser specific.

 

Hope this clarifies.

[Guest Bindhu]

Hi,

 

I am afraid, we do not have any known work around for this, as of now.

[xuen]

Thanks.

 

 

Hi,

 

I am afraid, we do not have any known work around for this, as of now.

[Guest Bindhu]

[xuen]

Hi,

 

One more question, FireFox v13.0 is the newest version and cannot show the shadow style.

It is due to JavaScriptChart and HTML5 right?

 

Can we force it to use FlashChart?

 

 

[Guest Bindhu]

Hi,

 

Yes, it is because of the HTML5 or the JavaScript charts.

 

You may try using Flash charts instead.

 

Hope this helps!