mimsc Report post Posted June 29, 2012 (edited) 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 Share this post Link to post Share on other sites
Guest Sashibhusan Report post Posted July 2, 2012 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! Share this post Link to post Share on other sites
mimsc Report post Posted July 2, 2012 (edited) Hello, Thank you. Your reply really helped me out. Edited July 2, 2012 by mimsc Share this post Link to post Share on other sites
Guest Sashibhusan Report post Posted July 3, 2012 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. Share this post Link to post Share on other sites
mimsc Report post Posted July 3, 2012 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"); Share this post Link to post Share on other sites
Guest Bindhu Report post Posted July 6, 2012 (edited) 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 Share this post Link to post Share on other sites
