Ryan San
Ryan San

Reputation: 31

Why does am charts export top of pie chart/legends black?

I am exporting my am charts pie chart and some of the colours are exporting fine, but the others show in the legend as Black as well as the top of the pie chart. What's more odd is that because it is a 3D pie chart, the sides show the proper colours just fine.

Example of pie chart problem

                        chart["export"].capture({}, function() {
                        this.toPNG({multiplier: 2}, function(data) {
                            if(this.config.fileName == "dynamic_pie_holder") {
                                $("#pie_image").val(encodeURIComponent(data));
                            }
                            if(this.config.fileName == "sector_pie_holder") {
                                $("#sector_pie_image").val(encodeURIComponent(data));
                            }
                            if(this.config.fileName == "dynamic_chart_holder") {
                                $("#graph_image").val(encodeURIComponent(data));
                            }
                            charts_remaining--; 
                            if (charts_remaining == 0) {
                                $("#export").submit();
                            }
                        });
                    });

I'm not sure if that code snippet helps so much, but it is what I'm using to export. The fact the sides don't show as black is what is really throwing me. If I prevent the 3D view, the entire surface is black where you see it in this image as well

EDIT #1 (ADDED CHART CREATION CODE SNIPPET)

    CreatePie: function(holder, value_source){
    if($("#"+holder).length == 0)
        return;

    var chart;
    var legend;

    var chartData = $.parseJSON($("#"+value_source).val());

    chart = new AmCharts.AmPieChart();
    chart.export = {enabled:"true",
        libs: {
            path: "libraries/amcharts/amcharts/plugins/export/libs/"
        },
        backgroundColor: "transparent",
        backgroundAlpha: 0.3 ,
        menu:[],
        fileName:holder
    };
    chart.dataProvider = chartData;
    chart.titleField = "title";
    chart.valueField = "value";
    chart.colorField = 'color';
    chart.numberFormatter = {precision:2, decimalSeparator:".", thousandsSeparator:","};
    chart.labelRadius = -30;
    chart.radius = 80;
    chart.labelText = "";//"[[percents]]";
    chart.textColor= "#FFFFFF";
    chart.depth3D = 14;
    chart.angle = 25;
    chart.outlineColor = "#363942";
    chart.outlineAlpha = 0.8;
    chart.outlineThickness = 1;
    chart.startDuration = 0;

    legend = new AmCharts.AmLegend();
    legend.align = "left";
    legend.markerType = "square";
    legend.maxColumns = 1;
    legend.position = "right";
    legend.marginRight = 20;
    legend.valueText = "$[[value]]";
    legend.valueWidth = 100;
    legend.switchable = false;
    legend.labelText = "[[title]]:";
    chart.addLegend(legend);//, 'report_top_pie_legend');
    // WRITE
    chart.write(holder);
}

-- NOTE -- As I pasted this, I decided to show what the colours were coming in as and noticed the person who entered them into the database had hit the return key before and after some of the colours. This caused them to read as \r\n, or \t\r\n. Apparently Amcharts has no problem at all filtering this out when creating the chart on screen, but when it comes time to export those do not get filtered out so well. Removing those extra characters completely fixed it up for me!

Apologies for asking and solving my own question, but I hope this helps somebody in the future. Check the source code for the true colours coming in!=)

Upvotes: 2

Views: 258

Answers (1)

Ryan San
Ryan San

Reputation: 31

The colours coming in for some of the areas were for example:

\t\r\n#EA3444

#FFFFFF\r\n

AmCharts was able to filter that out on screen no problem, but the export did not like it at all which would cause them to be black. Why on top only and not the sides, I'm not sure. Removing those extra characters fixed it

Upvotes: 1

Related Questions