Search code examples
javascriptamcharts

Serial Chart in amCharts showing different behaviour

I am using amCharts for my App. Recently I updated it from version 3.17.0 to 3.20.6.

In my App, I have used export with capture method to capture image as below:

if (window.fabric) {
                    clearTimeout(interval);

                    // CAPTURE CHART
                    chart.export.capture({}, function() {

                        // SAVE TO JPG
                        this.toPNG({}, function(base64) {

                            //some code
                                                    });
                    });
                }
 }, 10);

In my serial chart with Chart cursor, It was working fine as below in previous version. See image:amChart version 3.17.0

After updating version it shows weird behavior: ChartCursor gone, and on dragging cursor it is drawing line on Chart. amChart version 3.20.6

I have checked on amChart website, I have correctly set everything.

What can be wrong here?

If I will disable chart.export.capture, it' will working fine.
Here is my code to set properties chart:

"type": "serial",
                "theme": "none",
                "pathToImages": "resources/javascript/amcharts/images/",
                "marginTop": 1,
                "marginBottom": 1,
                "autoMarginOffset": offsetM,
                //left hand side space between container and chart
                "zoomOutButtonRollOverAlpha": 0.15,

                "zoomControl": {
                    "zoomControlEnabled": true,
                    "backgroundAlpha": "0.15",
                    "backgroundColor": "#000000"
                },

                "dataProvider": valueChartData,
                "columnWidth": 1,
                "categoryField": "date",
                "categoryAxis": {
                    "minPeriod": "DD",
                    "parseDates": true
                },

                "export": {
                    "enabled": false,
                    "menu": []
                }

for exporting and cloning chart:

var interval = setInterval(function() {
                    if (window.fabric) {
                        clearTimeout(interval);

                        // CAPTURE CHART
                        main.pageContainerBulkMarketing.bulkmarketing.pageContainerBMReports.reports.chart["export"].capture({}, function() {

                            // SAVE TO JPG
                            this.toPNG({}, function(base64) {

                                somewhere.OpenedTabGrpClone = "";
                                somewhere.OpenedTabGrpClone = base64;
                            });
                        });
                    }
                }, 10);

Note: I have observed one thing: It is adding one canvas tag over our chart div, it is like: 

<canvas class="upper-canvas " style="position: absolute; width: 802px; height: 360px; left: 0px; top: 0px; -moz-user-select: none; cursor: crosshair;" width="802" height="360"></canvas>

UPDATE: Here I have added jsfiddle But, here it is working fine, I took this time to figure out that why it's not working my side; result :none.

Solution

  • Simple do this

    1) Check your library links and plugin code , may it interfer with other js or plugin .

    2) Also Test your code with live amchart libraries.

    3) if every thing fine and working set Z-index by -1 for canvas tag.