bmcwhorter

Axis problems with scatter chart - javascript render not working proper

Recommended Posts

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>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

post-44684-0-48617900-1376047771_thumb.pngpost-44684-0-15804500-1376047772_thumb.png

Share this post


Link to post
Share on other sites

Hi,

 

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

 

Hope this helps. :)

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

post-44684-0-19445700-1377087864_thumb.pngpost-44684-0-28146600-1377087865_thumb.pngHi,

 

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.  

Share this post


Link to post
Share on other sites
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!

Share this post


Link to post
Share on other sites

post-44684-0-05837900-1377191560_thumb.pngActually, 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:

 

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now