Horizontal Grid - Line Chart - Alternate Color Missing

[Bharat Patel]

Hi There

There seems to be some problem with the Alternate color for Horizontal Grid

The alternate color does not appear only for this particular chart and I am not able to figure out the problem. Here is the chart data pasted below.

Any help to point me to the right direction is much appreciated.

Kind Regards,

Bharat Patel

 

if (FusionCharts && FusionCharts('cphPageBody_ucInvestGrowth_ctCumulativePerformanceFusionChart') ) FusionCharts('cphPageBody_ucInvestGrowth_ctCumulativePerformanceFusionChart').dispose();

var chart_cphPageBody_ucInvestGrowth_ctCumulativePerformanceFusionChart = new FusionCharts({"renderer" : "javascript", "dataFormat" : "xml", "scaleMode" : "noScale", "renderAt" : "cphPageBody_ucInvestGrowth_ctCumulativePerformanceFusionChartDiv", "lang" : "EN", "debugMode" : "0", "swfUrl" : "MSLine", "id" : "cphPageBody_ucInvestGrowth_ctCumulativePerformanceFusionChart", "wMode" : "opaque", "width" : "100%", "height" : "400px", "registerWithJS" : "1","dataSource" : "<chart caption='VAMI' subCaption='' captionPadding='15' xAxisName='Performance Period' yAxisName='VAMI' showValues='0' showLabels='1' showPlotBorder='0' borderColor='DDDDDD' borderThickness='0' canvasBorderThickness='1' canvasBorderColor='DDDDDD' chartLeftMargin='10' chartRightMargin='10' chartTopMargin='10' chartBottomMargin='40' showLegend='1' legendBorderThickness='1' legendBorderColor='DDDDDD' legendShadow='0' legendAllowDrag='0' legendBgColor='FFFFFF' legendPosition='BOTTOM' dateFormat='yyyy-mm-dd' outputDateFormat='dd/mm/yyyy' numberScaleValue='1000,1000' numberScaleUnit='Bn,Tn' showPercentageValues='0' alternateHGridColor='F1F1F1' divLineColor='DDDDDD' vDivLineColor='DDDDDD' vDivLineThickness='1' vDivLineDashed='1' hDivLineDashed='0' numVDivLines='33' numDivLines='0' divLineAlpha='0' yAxisMinValue='0' yAxisMaxValue='3000' NumberPrefix='' formatNumber='1' formatNumberScale='0' sformatNumberScale='0' sNumberPrefix='' syncAxisLimits='1' rotateValues='0' showSum='0' canvasPadding='5' valuePadding='0' baseFont='Verdana' valuePosition='AUTO' paletteColors='05C218, 8FFA47, 05C276, C27605, C21805, C20551, 9A0BF9, C205AF, 7605C2, 05AFC2' plotGradientColor='' labelDisplay='Rotate' labelStep='6' showYAxisValues='0' yAxisValuesStep='1' showDivLineValues='1' bgColor='FEFEFE' logoURL='%2fimages%2fSVG%2fpreqin-logo.svg' logoPosition='BR' ExportWithlogo='1' ExportWithBackground='0' showAlternateHGridColor='1' alternateHGridAlpha='50' anchorAlpha='0' exportEnabled='1' exportShowMenuItem='1' exportFormats='PNG=Export as High Quality Image|JPG|PDF=Export as PDF File' exportHandler='/user/uc/Charts/Export/FusionChartExporter.aspx?ExportWithlogo%3dTrue%26logoPosition%3dBR%26ExportWithBackground%3dFalse%26LeftAlignTitleInExport%3dFalse%26LeftAlignSubTitleInExport%3dFalse' exportAction='download' exportFileName='ChartImage'><categories> <category label='Aug-11' /> <category label='Sep-11' /> <category label='Oct-11' /> <category label='Nov-11' /> <category label='Dec-11' /> <category label='Jan-12' /> <category label='Feb-12' /> <category label='Mar-12' /> <category label='Apr-12' /> <category label='May-12' /> <category label='Jun-12' /> <category label='Jul-12' /> <category label='Aug-12' /> <category label='Sep-12' /> <category label='Oct-12' /> <category label='Nov-12' /> <category label='Dec-12' /> <category label='Jan-13' /> <category label='Feb-13' /> <category label='Mar-13' /> <category label='Apr-13' /> <category label='May-13' /> <category label='Jun-13' /> <category label='Jul-13' /> <category label='Aug-13' /> <category label='Sep-13' /> <category label='Oct-13' /> <category label='Nov-13' /> <category label='Dec-13' /> <category label='Jan-14' /> <category label='Feb-14' /> <category label='Mar-14' /> <category label='Apr-14' /> <category label='May-14' /> <category label='Jun-14' /></categories><dataset seriesName='chartArea1' > <set value='1000.00' /> <set value='0.00' /> <set value='1067.68' /> <set value='1158.86' /> <set value='1296.18' /> <set value='1374.99' /> <set value='1449.65' /> <set value='1386.74' /> <set value='1416.28' /> <set value='0.00' /> <set value='1415.67' /> <set value='1513.49' /> <set value='1597.64' /> <set value='1638.38' /> <set value='1675.74' /> <set value='1709.25' /> <set value='1845.65' /> <set value='0.00' /> <set value='0.00' /> <set value='0.00' /> <set value='1822.68' /> <set value='1866.24' /> <set value='1750.72' /> <set value='1909.69' /> <set value='1865.38' /> <set value='1974.88' /> <set value='2007.27' /> <set value='0.00' /> <set value='2113.83' /> <set value='2124.82' /> <set value='2216.19' /> <set value='0.00' /> <set value='2282.22' /> <set value='2355.25' /> <set value='2407.77' /></dataset><styles> <definition> <style name='CanvasAnim' type='animation' param='_xScale' start='0' duration='1' /> <style name='CaptionStyle' type='font' font='Verdana' isHTML='1' /> </definition> <application> <apply toObject='Canvas' styles='CanvasAnim' /> <apply toObject='Caption' styles='CaptionStyle' /> </application></styles></chart>"}).render()

[Moonmi Sonowal]

Hi Bharat,

 

In your chart data please add the number of div lines required like for example  "numdivlines": "4". In your provided data since it did not have the number of div lines provided the chart was unable to render the alternate grid colors.

Below is a fiddle link with the data sample provided by you where "numdivlines": "4" is used.

 

http://jsfiddle.net/moonmi/5pd8Lkp9/

 

Hope this helps.

[Bharat Patel]

Hi Moonmi,

Thanks for the reply. Yep that seems to have fixed the problem.

Kind Regards,

Bharat

[Moonmi Sonowal]

Hi Bharat,

 

Glad that your issue is resolved   

 

Thanks.