Bharat Patel

Horizontal Grid - Line Chart - Alternate Color Missing

Recommended Posts

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()


Share this post

Link to post
Share on other sites

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.


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