Jump to content


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


  • Please log in to reply
35 replies to this topic

#1 Upendar Srirangam

Upendar Srirangam

    Advanced Member

  • Members
  • PipPipPipPip
  • 51 posts

Posted 23 November 2011 - 01:06 PM

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 by Upendar Srirangam, 23 November 2011 - 01:08 PM.


#2 xuen

xuen

    Advanced Member

  • Members
  • PipPipPipPip
  • 86 posts

Posted 10 May 2012 - 06:35 AM

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



#3 Sumedh

Sumedh

    Supreme Being

  • Administrators
  • 1945 posts
  • LocationBangalore

Posted 10 May 2012 - 07:02 AM

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?
Thanks,
Sumedh

Follow us @Twitter!

#4 xuen

xuen

    Advanced Member

  • Members
  • PipPipPipPip
  • 86 posts

Posted 10 May 2012 - 07:35 AM

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?

Attached Thumbnails

  • Sample.jpg


#5 Sumedh

Sumedh

    Supreme Being

  • Administrators
  • 1945 posts
  • LocationBangalore

Posted 10 May 2012 - 10:18 AM

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.

Attached Thumbnails

  • test.PNG

Thanks,
Sumedh

Follow us @Twitter!

#6 xuen

xuen

    Advanced Member

  • Members
  • PipPipPipPip
  • 86 posts

Posted 11 May 2012 - 02:41 AM

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.

Attached Thumbnails

  • BottomAndLeftBorder.jpg


#7 Sumedh

Sumedh

    Supreme Being

  • Administrators
  • 1945 posts
  • LocationBangalore

Posted 11 May 2012 - 06:33 AM

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.
Thanks,
Sumedh

Follow us @Twitter!

#8 xuen

xuen

    Advanced Member

  • Members
  • PipPipPipPip
  • 86 posts

Posted 14 May 2012 - 06:32 AM

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.



#9 Sumedh

Sumedh

    Supreme Being

  • Administrators
  • 1945 posts
  • LocationBangalore

Posted 14 May 2012 - 06:45 AM

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>
Thanks,
Sumedh

Follow us @Twitter!

#10 xuen

xuen

    Advanced Member

  • Members
  • PipPipPipPip
  • 86 posts

Posted 22 May 2012 - 04:07 AM

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>



#11 Sumedh

Sumedh

    Supreme Being

  • Administrators
  • 1945 posts
  • LocationBangalore

Posted 22 May 2012 - 08:39 AM

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.

Attached Thumbnails

  • Left_Border.PNG

Thanks,
Sumedh

Follow us @Twitter!

#12 xuen

xuen

    Advanced Member

  • Members
  • PipPipPipPip
  • 86 posts

Posted 04 June 2012 - 03:58 AM

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.

Attached Thumbnails

  • trendlineInStackedBarChart.jpg

Attached Files



#13 Swarnam

Swarnam

    Supreme Being

  • Moderators
  • 717 posts

Posted 04 June 2012 - 05:28 AM

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.

Attached Thumbnails

  • Capture.PNG

Attached Files



#14 xuen

xuen

    Advanced Member

  • Members
  • PipPipPipPip
  • 86 posts

Posted 06 June 2012 - 01:40 AM

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.



#15 Sashibhusan

Sashibhusan

    Supreme Being

  • Members
  • PipPipPipPipPipPipPipPip
  • 564 posts

Posted 06 June 2012 - 05:01 AM

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!

Attached Thumbnails

  • StackedBar_leftShadowBar.PNG

Attached Files



#16 xuen

xuen

    Advanced Member

  • Members
  • PipPipPipPip
  • 86 posts

Posted 11 June 2012 - 08:19 AM

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!

Attached Thumbnails

  • IE and FireFox.jpg


#17 Sashibhusan

Sashibhusan

    Supreme Being

  • Members
  • PipPipPipPipPipPipPipPip
  • 564 posts

Posted 11 June 2012 - 10:57 AM

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!

Attached Thumbnails

  • MsBar2D_in_Firefox.PNG


#18 xuen

xuen

    Advanced Member

  • Members
  • PipPipPipPip
  • 86 posts

Posted 12 June 2012 - 04:05 AM

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!

Attached Thumbnails

  • FireFoxVersion.jpg


#19 Bindhu

Bindhu

    Supreme Being

  • Members
  • PipPipPipPipPipPipPipPip
  • 748 posts
  • LocationBangalore

Posted 15 June 2012 - 07:06 AM

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.
Help us improve our documentation with your precious feedback at:
[url]http://documentation-survey.g.fusioncharts.com/[/url]

Thank you,
Bindhu

Follow us <[url]http://http//twitter.com/fusioncharts>[/url] @Twitter!

#20 Bindhu

Bindhu

    Supreme Being

  • Members
  • PipPipPipPipPipPipPipPip
  • 748 posts
  • LocationBangalore

Posted 15 June 2012 - 08:20 AM

Hi,

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

Hope this helps!

Edited by Bindhu, 15 June 2012 - 08:20 AM.

Help us improve our documentation with your precious feedback at:
[url]http://documentation-survey.g.fusioncharts.com/[/url]

Thank you,
Bindhu

Follow us <[url]http://http//twitter.com/fusioncharts>[/url] @Twitter!

#21 xuen

xuen

    Advanced Member

  • Members
  • PipPipPipPip
  • 86 posts

Posted 18 June 2012 - 08:00 AM

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!



#22 Bindhu

Bindhu

    Supreme Being

  • Members
  • PipPipPipPipPipPipPipPip
  • 748 posts
  • LocationBangalore

Posted 18 June 2012 - 08:53 AM

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.
Help us improve our documentation with your precious feedback at:
[url]http://documentation-survey.g.fusioncharts.com/[/url]

Thank you,
Bindhu

Follow us <[url]http://http//twitter.com/fusioncharts>[/url] @Twitter!

#23 xuen

xuen

    Advanced Member

  • Members
  • PipPipPipPip
  • 86 posts

Posted 19 June 2012 - 01:24 AM

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.



#24 Bindhu

Bindhu

    Supreme Being

  • Members
  • PipPipPipPipPipPipPipPip
  • 748 posts
  • LocationBangalore

Posted 19 June 2012 - 04:40 AM

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.
Help us improve our documentation with your precious feedback at:
[url]http://documentation-survey.g.fusioncharts.com/[/url]

Thank you,
Bindhu

Follow us <[url]http://http//twitter.com/fusioncharts>[/url] @Twitter!

#25 xuen

xuen

    Advanced Member

  • Members
  • PipPipPipPip
  • 86 posts

Posted 19 June 2012 - 07:48 AM

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.



#26 Bindhu

Bindhu

    Supreme Being

  • Members
  • PipPipPipPipPipPipPipPip
  • 748 posts
  • LocationBangalore

Posted 19 June 2012 - 08:28 AM

Hi,

I am afraid, we do not have any known work around for this, as of now.
Help us improve our documentation with your precious feedback at:
[url]http://documentation-survey.g.fusioncharts.com/[/url]

Thank you,
Bindhu

Follow us <[url]http://http//twitter.com/fusioncharts>[/url] @Twitter!

#27 xuen

xuen

    Advanced Member

  • Members
  • PipPipPipPip
  • 86 posts

Posted 21 June 2012 - 03:34 AM

Thanks.


Hi,

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



#28 Bindhu

Bindhu

    Supreme Being

  • Members
  • PipPipPipPipPipPipPipPip
  • 748 posts
  • LocationBangalore

Posted 21 June 2012 - 03:46 AM

:)
Help us improve our documentation with your precious feedback at:
[url]http://documentation-survey.g.fusioncharts.com/[/url]

Thank you,
Bindhu

Follow us <[url]http://http//twitter.com/fusioncharts>[/url] @Twitter!

#29 xuen

xuen

    Advanced Member

  • Members
  • PipPipPipPip
  • 86 posts

Posted 28 June 2012 - 02:25 AM

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?


:)



#30 Bindhu

Bindhu

    Supreme Being

  • Members
  • PipPipPipPipPipPipPipPip
  • 748 posts
  • LocationBangalore

Posted 28 June 2012 - 05:00 AM

Hi,

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

You may try using Flash charts instead.

Hope this helps!
Help us improve our documentation with your precious feedback at:
[url]http://documentation-survey.g.fusioncharts.com/[/url]

Thank you,
Bindhu

Follow us <[url]http://http//twitter.com/fusioncharts>[/url] @Twitter!