Trying To Duplicate Color Effect From Mscolumn3D To Mscombi3D

[mimsc]

Hello...I created a column chart and the color scheme is exactly what I wanted. It had the colors in the graphs and canvas go from dark to light. Some sort of shading effect. Im trying to do the same in my 3dCombo line chart.

 

 

Also on my 3dCombo line..I cant seem to get the color outside of the canvas to match the color in the rest of my html even though the color code is set for bgColor

 

 

 

Column3d:

 

<div id="div_view">FusionCharts will load here!</div>

 

<script src="../js/FusionCharts/FusionCharts.js" type="text/javascript"></script>

 

<script type = "text/javascript">

<!--

 

var myChart = new FusionCharts("../js/FusionCharts/MSColumn3D.swf", "myChartId", "500", "500", "0", "1");

 

myChart.setJSONData(

{

"chart": {

"palette": "1",

"xaxisname": "SOR",

"numdivlines": "9",

//"caption": "Global Cereal Export",

//"subcaption": "In Millions",

"bgcolor": "ddddbb",

"canvasBgColor": "030304",

"baseFontColor": "ffffff",

"legendBgColor": "ddddbb",

"outCnvBaseFontColor": "38383F"

},

"categories": [{

"font": "Arial",

"category": [{

"label": "MCA",

"tooltext": "MCA"

}, {

"label": "MCB"

}]

}],

"dataset": [{

"seriesname": "Total Planned Cost",

"color": "2D2DD6",

"data": [{

"value": "934459730.01"

}, {

"value": "885395581.58"

}]

}, {

"seriesname": "Authorized",

"color": "F50004",

"data": [{

"value": "951163535.66"

}, {

"value": "886812963.22"

}]

}, {

"seriesname": "Applied",

"color": "8BBA00",

"data": [{

"value": "750662711.16"

}, {

"value": "807073152.39"

}]

}, {

"seriesname": "Available",

"color": "A66EDD",

"data": [{

"value": "197188514.96"

}, {

"value": "73268793.31"

}]

}]

});

 

myChart.render("div_view");

 

// -->

</script>

 

 

 

 

=======

 

3dCombo line:

 

 

<div id="div_view">FusionCharts will load here!</div>

 

<script src="../js/FusionCharts/FusionCharts.js" type="text/javascript"></script>

<script type = "text/javascript">

<!--

var myChart = new FusionCharts("../js/FusionCharts/MSCombi3D.swf", "myChartId", "500", "500", "0", "1");

myChart.setJSONData(

{

 

"chart": {

"palette": "1",

"bgcolor": "ddddbb",

"borderColor": "ddddbb",

"canvasBgColor": "322B2B",

"toolTipBgColor": "322B2B",

"baseFontColor": "ffffff",

"legendBgColor": "DDDDBB",

"outCnvBaseFontColor": "38383F",

"outcnvbasefontcolor": "666666",

//"caption": "Monthly Sales Summary",

"xaxisname": "Month",

"yaxisname": "Inductions",

//"numberprefix": "$",

"showlabels": "1",

"showvalues": "0",

"plotfillalpha": "70",

"numvdivlines": "10",

"showalternatevgridcolor": "1",

"alternatevgridcolor": "e1f5ff",

"divlinecolor": "ffffff",

//"basefontcolor": "666666",

"canvasborderthickness": "1",

"showplotborder": "0",

"plotborderthickness": "0",

"zgapplot": "0",

"zdepth": "120",

"exetime": "1.2",

"dynamicshading": "0",

"yzwalldepth": "5",

"zxwalldepth": "5",

"xywalldepth": "5",

"startangx": "0",

"startangy": "0",

"endangx": "5",

"endangy": "-25"

//"divlineeffect": "bevel"

},

"categories": [{

"category": [{

"label": "Oct"

}, {

"label": "Nov"

}, {

"label": "Dec"

}, {

"label": "Jan"

}, {

"label": "Feb"

}, {

"label": "Mar"

}, {

"label": "Apr"

}, {

"label": "May"

}, {

"label": "Jun"

}, {

"label": "Jul"

}, {

"label": "Aug"

}, {

"label": "Sep"

}]

}],

"dataset": [{

"seriesname": "Planned Inductions",

"color": "688DE5",

"plotbordercolor": "688DE5",

"renderas": "line",

"data": [{

"value": "3461"

}, {

"value": "7861"

}, {

"value": "6365"

}, {

"value": "4251"

}, {

"value": "7286"

}, {

"value": "3950"

}, {

"value": "4278"

}, {

"value": "7493"

}, {

"value": "4025"

}, {

"value": "4107"

}, {

"value": "9077"

}, {

"value": "3876"

}]

}, {

"seriesname": "Actual Inductions",

"color": "E16774",

"plotbordercolor": "E16774",

"renderas": "line",

"data": [{}, {}, {

"value": "2816"

}, {

"value": "4252"

}, {

"value": "2777"

}, {

"value": "4664"

}, {

"value": "5433"

}, {

"value": "3267"

}, {

"value": "2425"

}, {

"value": "2789"

}, {

"value": "4068"

}, {

"value": "3036"

}, {

"value": "4298"

}, {

"value": "5454"

}]

}],

"styles": {

"definition": [{

"name": "captionFont",

"type": "font",

"size": "15"

}],

"application": [{

"toobject": "caption",

"styles": "captionfont"

}]

}

});

myChart.render("div_view");

// -->

</script>

 

 

 

Edited June 29, 2012 by mimsc

[Guest Sashibhusan]

Hi,

 

For True 3D Chart (MSCombi3D.swf ), the gradient effect for "Canvas", is not supported by FusionCharts XT as of now.

 

But, to have a gradient plot, Could you please try by providing a list of comma separated hex color codes to the "color" attribute in the <dataset> element of your XML data?

 

With regard to your query on "Chart Background Color", could you please try by providing "bgAlpha" to "100" and provide the same color code (as given to your HTML page) to "bgColor" attribute, in the <chart> element of your XML data?

 

Hope this helps!

[mimsc]

Hello,

[mimsc]

Hello,

 

Thank you. Your reply really helped me out.

Edited July 2, 2012 by mimsc

[Guest Sashibhusan]

Hello,

 

Thank you. Your reply really helped me out.

 

Hi,

 

I am glad to hear that the solution provided, has resolved your issue.

 

Happy FusionCharting.

[mimsc]

I just tried to add the comma, separated hex color pattern and I still get a solid color for my line plots??

 

 

var myChart = new FusionCharts("../js/FusionCharts/MSCombi3D.swf", "myChartId", "500", "500", "0", "1");

myChart.setJSONData(

{

 

"chart": {

 

"bgcolor": "ddddbb",

"borderColor": "ddddbb",

"canvasBgColor": "322B2B",

"toolTipBgColor": "322B2B",

"baseFontColor": "ffffff",

"legendBgColor": "DDDDBB",

"outCnvBaseFontColor": "38383F",

"outcnvbasefontcolor": "666666",

"formatnumberscale": "0",

"xaxisname": "Month",

"yaxisname": "Inductions",

"showlabels": "1",

"showvalues": "0",

"plotfillalpha": "70",

"numvdivlines": "10",

"showalternatevgridcolor": "1",

"alternatevgridcolor": "e1f5ff",

"divlinecolor": "ffffff",

//"basefontcolor": "666666",

"canvasborderthickness": "1",

"showplotborder": "0",

//"plotborderthickness": "0",

"zgapplot": "0",

"zdepth": "120",

"exetime": "1.2",

"dynamicshading": "0",

"yzwalldepth": "5",

"zxwalldepth": "5",

"xywalldepth": "5",

"startangx": "0",

"startangy": "0",

"endangx": "5",

"endangy": "-25",

"interactiveLegend": "0",

"bgAlpha": "100"

 

},

"categories": [{

"category": [{

"label": "Oct"

}, {

"label": "Nov"

}, {

"label": "Dec"

}, {

"label": "Jan"

}, {

"label": "Feb"

}, {

"label": "Mar"

}, {

"label": "Apr"

}, {

"label": "May"

}, {

"label": "Jun"

}, {

"label": "Jul"

}, {

"label": "Aug"

}, {

"label": "Sep"

}]

}],

"dataset": [{

"seriesname": "Planned Inductions",

//"color": "688DE5",

"color": "2D2DD6,FFFFFF,666666",

"plotbordercolor": "688DE5",

"renderas": "line",

"data": [{

"value": "3461"

}, {

"value": "7861"

}, {

"value": "6365"

}, {

"value": "4251"

}, {

"value": "7286"

}, {

"value": "3950"

}, {

"value": "4278"

}, {

"value": "7493"

}, {

"value": "4025"

}, {

"value": "4107"

}, {

"value": "9077"

}, {

"value": "3876"

}]

}, {

"seriesname": "Actual Inductions",

//"color": "E16774",

"color": "F50004,FFFFFF,666666",

"plotbordercolor": "E16774",

"renderas": "line",

"data": [{}, {}, {

"value": "2816"

}, {

"value": "4252"

}, {

"value": "2777"

}, {

"value": "4664"

}, {

"value": "5433"

}, {

"value": "3267"

}, {

"value": "2425"

}, {

"value": "2789"

}, {

"value": "4068"

}, {

"value": "3036"

}, {

"value": "4298"

}, {

"value": "5454"

}]

}],

"styles": {

"definition": [{

"name": "captionFont",

"type": "font",

"size": "15"

}],

"application": [{

"toobject": "caption",

"styles": "captionfont"

}]

}

});

myChart.render("div_view");

 

[Guest Bindhu]

Hi,

 

Apologies for delay in response.

 

We have identified this as a bug.

 

I will update this thread when once the issue is fixed and released.

 

Thank you for your continued support and patience.

 

Hope this helps!

Edited July 6, 2012 by Bindhu