Axis problems with scatter chart - javascript render not working proper

[bmcwhorter]

Hi, When I render this same chart in javascript and then in flash, the x axis isn't working properly.  In javascript, there is a huge blank space at the end of the axis.  Please advise.

 

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

-<graph alternateHGridColor="0f0f0f" canvasBgColor="0f0f0f" xaxisname="label title" yaxisname="data title" bgAlpha="100" imageSaveURL="rdTemplate/rdAnimatedChart/FCExporter.aspx" imageSave="1" showBorder="0" chartBottomMargin="" chartTopMargin="" chartRightMargin="" chartLeftMargin="" numberPrefix="" showLabels="1" bgColor="0f0f0f" Caption="Scatter Chart" animation="1" showFCMenuItem="0" canvasBorderThickness="1" setAdaptiveXMin="1" setAdaptiveYMin="1" bubbleScale="" numVDivLines="" showNames="1" showLegend="1" divlinecolor="" CanvasBorderColor="ffffff" unescapeLinks="0">-<styles>-<definition><style type="font" bold="0" color="000000" size="15" font="Helvetica" name="ToolTipFontStyle"/><style type="font" bold="1" color="ffffff" size="24" font="Helvetica" name="CAPTIONFontStyle"/><style type="font" bold="0" color="ffffff" size="15" font="Helvetica" name="YAXISVALUESFontStyle"/><style type="font" bold="0" color="ffffff" size="15" font="Helvetica" name="YAXISNAMEFontStyle"/><style type="font" bold="0" color="ffffff" size="15" font="Helvetica" name="XAXISNAMEFontStyle"/><style type="font" bold="0" color="ffffff" size="15" font="Helvetica" name="DataLabelsFontStyle"/><style type="font" bold="0" color="000000" size="15" font="Helvetica" name="LegendFontStyle"/></definition>-<application><apply styles="ToolTipFontStyle" toObject="ToolTip"/><apply styles="CAPTIONFontStyle" toObject="CAPTION"/><apply styles="YAXISVALUESFontStyle" toObject="YAXISVALUES"/><apply styles="YAXISNAMEFontStyle" toObject="YAXISNAME"/><apply styles="XAXISNAMEFontStyle" toObject="XAXISNAME"/><apply styles="DataLabelsFontStyle" toObject="DataLabels"/><apply styles="LegendFontStyle" toObject="Legend"/></application></styles>-<categories verticalLineThickness="1" verticalLineColor="666666"><category name="0" showVerticalLine="1" x="0"/><category name="42" showVerticalLine="1" x="42"/><category name="84" showVerticalLine="1" x="84"/><category name="126" showVerticalLine="1" x="126"/><category name="168" showVerticalLine="1" x="168"/><category name="210" showVerticalLine="1" x="210"/></categories>-<dataset anchorAlpha="80" color="e88622" seriesName="asdf" anchorRadius="4" anchorBorderColor="ffffff" anchorBgColor="e88622"><set x="18.0000" z="4" toolText="18.0000, 39" y="39"/><set x="19.0000" z="4" toolText="19.0000, 17" y="17"/><set x="10.0000" z="4" toolText="10.0000, 13" y="13"/><set x="22.0000" z="4" toolText="22.0000, 53" y="53"/><set x="21.3500" z="4" toolText="21.3500, 0" y="0"/><set x="25.0000" z="4" toolText="25.0000, 120" y="120"/><set x="30.0000" z="4" toolText="30.0000, 15" y="15"/><set x="40.0000" z="4" toolText="40.0000, 6" y="6"/><set x="97.0000" z="4" toolText="97.0000, 29" y="29"/><set x="31.0000" z="4" toolText="31.0000, 31" y="31"/><set x="21.0000" z="4" toolText="21.0000, 22" y="22"/><set x="38.0000" z="4" toolText="38.0000, 86" y="86"/><set x="6.0000" z="4" toolText="6.0000, 24" y="24"/><set x="23.2500" z="4" toolText="23.2500, 35" y="35"/><set x="15.5000" z="4" toolText="15.5000, 39" y="39"/><set x="17.4500" z="4" toolText="17.4500, 29" y="29"/><set x="39.0000" z="4" toolText="39.0000, 0" y="0"/><set x="62.5000" z="4" toolText="62.5000, 42" y="42"/><set x="9.2000" z="4" toolText="9.2000, 25" y="25"/><set x="81.0000" z="4" toolText="81.0000, 40" y="40"/><set x="10.0000" z="4" toolText="10.0000, 3" y="3"/><set x="21.0000" z="4" toolText="21.0000, 104" y="104"/><set x="9.0000" z="4" toolText="9.0000, 61" y="61"/><set x="4.5000" z="4" toolText="4.5000, 20" y="20"/><set x="14.0000" z="4" toolText="14.0000, 76" y="76"/><set x="31.2300" z="4" toolText="31.2300, 15" y="15"/><set x="43.9000" z="4" toolText="43.9000, 49" y="49"/><set x="45.6000" z="4" toolText="45.6000, 26" y="26"/><set x="25.8900" z="4" toolText="25.8900, 10" y="10"/><set x="12.5000" z="4" toolText="12.5000, 0" y="0"/><set x="32.0000" z="4" toolText="32.0000, 9" y="9"/><set x="2.5000" z="4" toolText="2.5000, 112" y="112"/><set x="14.0000" z="4" toolText="14.0000, 111" y="111"/><set x="18.0000" z="4" toolText="18.0000, 20" y="20"/><set x="19.0000" z="4" toolText="19.0000, 112" y="112"/><set x="26.0000" z="4" toolText="26.0000, 11" y="11"/><set x="18.0000" z="4" toolText="18.0000, 69" y="69"/><set x="18.4000" z="4" toolText="18.4000, 123" y="123"/><set x="9.6500" z="4" toolText="9.6500, 85" y="85"/><set x="14.0000" z="4" toolText="14.0000, 26" y="26"/><set x="46.0000" z="4" toolText="46.0000, 17" y="17"/><set x="19.4500" z="4" toolText="19.4500, 27" y="27"/><set x="9.5000" z="4" toolText="9.5000, 5" y="5"/><set x="12.0000" z="4" toolText="12.0000, 95" y="95"/><set x="9.5000" z="4" toolText="9.5000, 36" y="36"/><set x="12.7500" z="4" toolText="12.7500, 15" y="15"/><set x="20.0000" z="4" toolText="20.0000, 10" y="10"/><set x="16.2500" z="4" toolText="16.2500, 65" y="65"/><set x="53.0000" z="4" toolText="53.0000, 20" y="20"/><set x="7.0000" z="4" toolText="7.0000, 38" y="38"/><set x="32.8000" z="4" toolText="32.8000, 0" y="0"/><set x="7.4500" z="4" toolText="7.4500, 21" y="21"/><set x="24.0000" z="4" toolText="24.0000, 115" y="115"/><set x="38.0000" z="4" toolText="38.0000, 21" y="21"/><set x="19.5000" z="4" toolText="19.5000, 36" y="36"/><set x="13.2500" z="4" toolText="13.2500, 62" y="62"/><set x="55.0000" z="4" toolText="55.0000, 79" y="79"/><set x="34.0000" z="4" toolText="34.0000, 19" y="19"/><set x="28.5000" z="4" toolText="28.5000, 113" y="113"/><set x="49.3000" z="4" toolText="49.3000, 17" y="17"/><set x="43.9000" z="4" toolText="43.9000, 24" y="24"/><set x="33.2500" z="4" toolText="33.2500, 22" y="22"/><set x="21.0500" z="4" toolText="21.0500, 76" y="76"/><set x="17.0000" z="4" toolText="17.0000, 4" y="4"/><set x="14.0000" z="4" toolText="14.0000, 52" y="52"/><set x="12.5000" z="4" toolText="12.5000, 6" y="6"/><set x="36.0000" z="4" toolText="36.0000, 26" y="26"/><set x="15.0000" z="4" toolText="15.0000, 15" y="15"/><set x="21.5000" z="4" toolText="21.5000, 26" y="26"/><set x="34.8000" z="4" toolText="34.8000, 14" y="14"/><set x="15.0000" z="4" toolText="15.0000, 101" y="101"/><set x="10.0000" z="4" toolText="10.0000, 4" y="4"/><set x="7.7500" z="4" toolText="7.7500, 125" y="125"/><set x="18.0000" z="4" toolText="18.0000, 57" y="57"/><set x="13.0000" z="4" toolText="13.0000, 32" y="32"/></dataset>-<dataset anchorAlpha="80" color="28b8d5" seriesName="" anchorRadius="4" anchorBorderColor="ffffff" anchorBgColor="28b8d5"><set x="36.0000" z="4" toolText="36.0000, 78" y="78"/><set x="38.0000" z="4" toolText="38.0000, 34" y="34"/><set x="20.0000" z="4" toolText="20.0000, 26" y="26"/><set x="44.0000" z="4" toolText="44.0000, 106" y="106"/><set x="42.7000" z="4" toolText="42.7000, 0" y="0"/><set x="50.0000" z="4" toolText="50.0000, 240" y="240"/><set x="60.0000" z="4" toolText="60.0000, 30" y="30"/><set x="80.0000" z="4" toolText="80.0000, 12" y="12"/><set x="194.0000" z="4" toolText="194.0000, 58" y="58"/><set x="62.0000" z="4" toolText="62.0000, 62" y="62"/><set x="42.0000" z="4" toolText="42.0000, 44" y="44"/><set x="76.0000" z="4" toolText="76.0000, 172" y="172"/><set x="12.0000" z="4" toolText="12.0000, 48" y="48"/><set x="46.5000" z="4" toolText="46.5000, 70" y="70"/><set x="31.0000" z="4" toolText="31.0000, 78" y="78"/><set x="34.9000" z="4" toolText="34.9000, 58" y="58"/><set x="78.0000" z="4" toolText="78.0000, 0" y="0"/><set x="125.0000" z="4" toolText="125.0000, 84" y="84"/><set x="18.4000" z="4" toolText="18.4000, 50" y="50"/><set x="162.0000" z="4" toolText="162.0000, 80" y="80"/><set x="20.0000" z="4" toolText="20.0000, 6" y="6"/><set x="42.0000" z="4" toolText="42.0000, 208" y="208"/><set x="18.0000" z="4" toolText="18.0000, 122" y="122"/><set x="9.0000" z="4" toolText="9.0000, 40" y="40"/><set x="28.0000" z="4" toolText="28.0000, 152" y="152"/><set x="62.4600" z="4" toolText="62.4600, 30" y="30"/><set x="87.8000" z="4" toolText="87.8000, 98" y="98"/><set x="91.2000" z="4" toolText="91.2000, 52" y="52"/><set x="51.7800" z="4" toolText="51.7800, 20" y="20"/><set x="25.0000" z="4" toolText="25.0000, 0" y="0"/><set x="64.0000" z="4" toolText="64.0000, 18" y="18"/><set x="5.0000" z="4" toolText="5.0000, 224" y="224"/><set x="28.0000" z="4" toolText="28.0000, 222" y="222"/><set x="36.0000" z="4" toolText="36.0000, 40" y="40"/><set x="38.0000" z="4" toolText="38.0000, 224" y="224"/><set x="52.0000" z="4" toolText="52.0000, 22" y="22"/><set x="36.0000" z="4" toolText="36.0000, 138" y="138"/><set x="36.8000" z="4" toolText="36.8000, 246" y="246"/><set x="19.3000" z="4" toolText="19.3000, 170" y="170"/><set x="28.0000" z="4" toolText="28.0000, 52" y="52"/><set x="92.0000" z="4" toolText="92.0000, 34" y="34"/><set x="38.9000" z="4" toolText="38.9000, 54" y="54"/><set x="19.0000" z="4" toolText="19.0000, 10" y="10"/><set x="24.0000" z="4" toolText="24.0000, 190" y="190"/><set x="19.0000" z="4" toolText="19.0000, 72" y="72"/><set x="25.5000" z="4" toolText="25.5000, 30" y="30"/><set x="40.0000" z="4" toolText="40.0000, 20" y="20"/><set x="32.5000" z="4" toolText="32.5000, 130" y="130"/><set x="106.0000" z="4" toolText="106.0000, 40" y="40"/><set x="14.0000" z="4" toolText="14.0000, 76" y="76"/><set x="65.6000" z="4" toolText="65.6000, 0" y="0"/><set x="14.9000" z="4" toolText="14.9000, 42" y="42"/><set x="48.0000" z="4" toolText="48.0000, 230" y="230"/><set x="76.0000" z="4" toolText="76.0000, 42" y="42"/><set x="39.0000" z="4" toolText="39.0000, 72" y="72"/><set x="26.5000" z="4" toolText="26.5000, 124" y="124"/><set x="110.0000" z="4" toolText="110.0000, 158" y="158"/><set x="68.0000" z="4" toolText="68.0000, 38" y="38"/><set x="57.0000" z="4" toolText="57.0000, 226" y="226"/><set x="98.6000" z="4" toolText="98.6000, 34" y="34"/><set x="87.8000" z="4" toolText="87.8000, 48" y="48"/><set x="66.5000" z="4" toolText="66.5000, 44" y="44"/><set x="42.1000" z="4" toolText="42.1000, 152" y="152"/><set x="34.0000" z="4" toolText="34.0000, 8" y="8"/><set x="28.0000" z="4" toolText="28.0000, 104" y="104"/><set x="25.0000" z="4" toolText="25.0000, 12" y="12"/><set x="72.0000" z="4" toolText="72.0000, 52" y="52"/><set x="30.0000" z="4" toolText="30.0000, 30" y="30"/><set x="43.0000" z="4" toolText="43.0000, 52" y="52"/><set x="69.6000" z="4" toolText="69.6000, 28" y="28"/><set x="30.0000" z="4" toolText="30.0000, 202" y="202"/><set x="20.0000" z="4" toolText="20.0000, 8" y="8"/><set x="15.5000" z="4" toolText="15.5000, 250" y="250"/><set x="36.0000" z="4" toolText="36.0000, 114" y="114"/><set x="26.0000" z="4" toolText="26.0000, 64" y="64"/></dataset></graph>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

[Sanjukta]

Hi,

 

Could you please try explicitly setting "xAxisMaxValue" to '210' in the <chart> element of the XML to avoid any discrepancies?

 

Hope this helps.

[shamasis]

Remove the last <category> element. JS charts draws all-inclusive category elements as part of unified behaviour across other vertical plot lines.

 

Another way of getting same output in much easier fashion is simply to remove all <category> elements and add yAxisMaxValue="210" to the chart attributes. The vertical lines will be automatically calculated!

[bmcwhorter]

Hi,

 

If I remove all the category elements, it works great when its rendered in javascript.  However, when it's rendered in flash, it doesn't put labels on all the vertical lines.  It also doesn't apply the axis font styling to the labels, so it looks terrible.  Here's two examples, same data file as above, just with the categories removed.  

[Guest Rishab]

Hi,

 

Due to various reasons, there are minor implementation differences between Flash and JavaScript variants of our charts.

 

To produce a similar chart, explicitly set "xAxisMaxValue" to '200' without deleting the category element.

 

When the Category element is removed then the Data label font will not change because of its automatic creation .

 

Hope it helps!

[bmcwhorter]

Actually, that doesn't work.  If the xAxisMaxValue is less than the biggest category element, it is ignored.  If it is equal to it, it produces a little space between the largest category and the canvas edge.  See this:

 

 

[Haritha]

Hi,

 

Could you please try removing just the last <category> element from the categories and then setting the attribute "xAxisLabelMode" of the chart element to "AUTO" ?

 

Ref. <chart ... xAxisLabelMode = 'AUTO' >

 

Hope this helps.

[bmcwhorter]

If I do that, it works fine in javascript and it gets the right values in flash.  But the flash labels are still not having the styling applied.  How can I make the flash labels get the styling when I do this?

[Guest Rishab]

Hi,

 

Please try setting  to set the value of the chart attribute 'xAxisLabelMode' to 'MIXED'.

MIXED - Allows the chart to show both the properties of y-axis and <categories> element on the x-axis simultaneously.

[bmcwhorter]

Hi,

 

that actually makes it look much worse because it is displaying multiple vertical lines right next to each other.  The only way I see this working is if I only set xAxisLabelMode = Auto for javascript charts and do not set it for flash charts.  Which really is a terrible solution.

[bmcwhorter]

Is there any other possible solution to this?  It should be identified as a bug.

[Haritha]

Hi,

 

The JavaScript charts seem to be working fine after setting the said attribute. Since we are moving to JavaScript charts from Flash, it will take some time for us to investigate on Flash as of now. 

 

Hope this helps