Bar Chart Not Displaying Rounded Edges In Javascript

[bmcwhorter]

Using the following defintion I get different appearances between the flash and javascript versions.  Edges are not rounded in javascript.

 

 

 

<?xml version="1.0" encoding="UTF-8"?>

-<graph lineDashed="0" useRoundEdges="1" rotateValues="1" showValues="0" divLineColor="000000" canvasBgColor="dad9da" rotateLabels="1" xaxisname="X-Axis" yaxisname="Y-Axis" imageSaveURL="rdTemplate/rdAnimatedChart/FCExporter.aspx" imageSave="1" unescapeLinks="0" showBorder="0" chartBottomMargin="" chartTopMargin="" chartRightMargin="" chartLeftMargin="" numberPrefix="" showLabels="1" bgColor="ffffff" Caption="" animation="1" showFCMenuItem="0"> -<styles> -<definition> <style type="font" color="5b5b5b" size="11" font="Helvetica" name="DataLabelsFontStyle"/> <style type="font" color="5b5b5b" size="11" font="Helvetica" name="YAXISVALUESFontStyle"/> <style type="font" color="5b5b5b" size="11" font="Helvetica" name="LegendFontStyle"/> </definition> -<application> <apply styles="DataLabelsFontStyle" toObject="DataLabels"/> <apply styles="YAXISVALUESFontStyle" toObject="YAXISVALUES"/> <apply styles="LegendFontStyle" toObject="Legend"/> </application> </styles> <set color="008000" alpha="100" label="Dairy Products" value="115387.6500"/> <set color="008000" alpha="100" label="Beverages" value="103924.3100"/> <set color="008000" alpha="100" label="Confections" value="82657.7300"/> <set color="008000" alpha="100" label="Meat/Poultry" value="80975.1200"/> <set color="008000" alpha="100" label="Seafood" value="66959.2100"/> <set color="008000" alpha="100" label="Grains/Cereals" value="56871.8200"/> <set color="008000" alpha="100" label="Condiments" value="55368.6000"/> <set color="008000" alpha="100" label="Produce" value="54940.7600"/> <trendlines/> </graph>

[Swarnam]

Hey,

 

I'm unable to replicate the issue. Bar 2D chart is displayed with rounded edges.

 

Please find the attached screenshot for your reference.

[bmcwhorter]

If you look at that chart and then compare it to the flash version, in flash the corners are rounded much more.  Shouldn't the amount of curvature be the same for both charts?

[Guest Sumedh]

Hi,

 

FusionCharts XT in its JavaScript flavor essentially tries to provide a uniform visualization experience on desktop and mobile platforms by rendering FusionCharts using advanced HTML5 capabilities of devices that does not support Flash.

 

However, due to the inherent difference between the technologies and differences in various browsers causes minor disparity between the Flash and JavaScript variants of the charts.

 

Also, there are minor implementation differences between Flash and JavaScript variants of our charts. 

 

Hope this helps!

[bmcwhorter]

Hi, I understand that there will be variants.  However, this is extremely obvious.  And it bothers me that you say that the image you provided shows rounded edges.  Those edges are not rounded.  Also, this should be an easy component to set, it is easily done in css.  So will there be a fix to make these edges more rounded?

[shamasis]

Hi bmcwhorter,

 

What I can infer from this thread is that you want your data plots of your chart to be more "rounded" when you set useRoundEdges="1". Sumedh has already mentioned that this is not possible and I would explain the technicalities behind it.

1. For the sake of better rendering performance, we use SVG rectangles to draw the columns and we avoid using SVG path element. When the border radius attribute is set on SVG rectangles, all four corners of the columns becomes rounded. That is not a pleasing visualisation and gets even worse for stacked column charts.
   I have taken the screenshot of such a situation by internally increasing the border radius on stacked bar chart.
    
2. CSS is not applicable in the manner of speaking for SVG elements to provide rounded corners. And even if it did, browsers that do not support CSS3 like IE 8 and below and relatively old Safari, Opera, etc will not be able to render that.
    
3. From visualisation perspective too much rounded corner on thin columns makes it difficult to perceive the value of the column/bar.
    
4. For the useRoundEdges configuration the primary idea was to have rounded edges for JavaScript chart and rounded corners (considering the previously mentioned technical limitations,) being of lesser impact.

Keeping the above in consideration, we do not provide an exact replica of Flash's rounded corners in our JavaScript variant. In fact, we do have the corners rounded, but it is very subtle and is made to be kept within the outer radius of the plot border as as not to look odd as in the conceptual screenshot I have attached in this post.

 

A. The first screenshot has Flash on the left and equivalent actual JavaScript charts on the right with round edges turned on.

 

B. The second screenshot has Flash on the left and the conceptual JavaScript equivalent (not available with actual offering from FusionCharts.)