got TypeError: t[e].indexOf is not a function in fabric.min.js:1

[pepziman]

dear amcharts developer, i am having difficulties when trying to export my chart with multiple and dynamic data to image (PNG / JPG). when trying to export it, either as PNG or JPG, the charts turn blank and the cursor became + cursor, enabling me to draw anything inside instead of downloading the chart as image.

UPDATE

here is my code :

    var chartd = AmCharts.makeChart("chartd", {
        "type": "serial",
        "theme": "patterns",
        "dataProvider": {!! json_encode($gdata['d']['cactiData']) !!},
        "marginRight": 80,

        "graphs": [
        {
            "balloonText": "[[category]]: <b>[[value]]</b>",
            'valueField': 'bps',
            'title': "{{ $gdata['title']['Daily'] }}",
            'type': 'line',
            'fillColors':'00cf00',
            'fillAlphas': 0.7,
            'lineColor': '#00cf00',
            'lineAlpha': 1,
        },
        {
            "balloonText": "[[category]]: <b>[[value]]</b>",
            "valueField": "bps_to",
            'type': 'line',
            'fillColors':'Transparent',
            'fillAlphas': 0.3,
            'lineColor': '#072f97',
            'lineAlpha': 1,
            "title" : "{{ $gdata['title']['DailySC'] }}"
        },
        {
            "balloonText": "[[category]]: <b>[[value]]</b>",
            "valueField": "ninetyfifth",
            'type': 'line',
            'fillColors':'Transparent',
            'fillAlphas': 0.3,
            'lineColor': '#e10707',
            'lineAlpha': 1,
            "title" : "{{ $gdata['title']['DailyNF'] }}"
        }
        ],
        "categoryField": "hours",
        "categoryAxis": {
            'gridCount' : 10,
            'parseDates' : true,
            'minPeriod' : "mm",
            'dateFormats' : [
            { period: 'fff', format: 'JJ:NN:SS' },
            { period: 'ss', format: 'JJ:NN:SS' },
            { period: 'mm', format: 'JJ:NN' },
            { period: 'hh', format: 'JJ:NN' },
            { period: 'DD', format: 'MMM DD' },
            { period: 'WW', format: 'MMM DD' },
            { period: 'MM', format: 'DD MM YYYY' },
            { period: 'YYYY', format: 'YYYY'}
            ],
            "title" : "{{$gdata['d']['x_axis_title']}}",
            "titleBold" : false
        },
        "valueAxes":[{
            'title':'bits per second',
            'axisColor': "#FF6600",                                 
            'gridAlpha': 0.07,                                  
            'minimum': 0,
            'maximum': {{ $gdata['d']['cactiData'][0]['maxAll'] }},
            'unit': "{{ $gdata['d']['cactiData'][0]['unit'] }}",
        }],
        "chartScrollbar": {
            "autoGridCount": true,

            "scrollbarHeight": 40
        },
        "export": {
            "enabled": true,
        },
        "legend": {
            "useGraphSettings": true
        },
    });

i have included the libs in my blade layout as :

<script src="{{ asset('js/amcharts/amcharts.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/amcharts/serial.js') }}" type="text/javascript"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.js" type="text/javascript"></script>
<link href="https://www.amcharts.com/lib/3/plugins/export/export.css" rel="stylesheet" type="text/css">

what i missed out? can you help me ? thank you

[NPC]

I seem to have the same (or a similar problem) with exporting AmCharts, here's a JSFiddle. Try exporting to PNG, and Fabric.js throws error “t[e].indexOf is not a function” in Chrome/Win. I created this example from the demo from AmCharts site.

Strangely, I tried another demo and it works, see the JSFiddle.

So far I haven't found what causes this difference.

PS @pepziman why do you include blob.js, fabric.js and filesaver.js twice?

[NPC]

OK, after gradually removing from failing fiddle everything not present in the working fiddle, I discovered that deleting zoomControl sectiion solves the problem (update: looks like zoomControl.gridHeight is causing it). This is not relevant for the original AmCharts issue, but helps with my AmMaps one.

[pepziman]

@NPC thank you, ah about that twice script, i just misread the script and didn't saw that i already included it. so is it really the troublemaker? so if i deleted the zoomControl.gridHeight inside fabric.js the problem will solved? thank you for your help and response. will try it and got you updated.

[NPC]

@pepziman No no, don't touch fabric.js, it is a 3rd party library, so not a good idea to tamper with unless you're really confident. Better wait for AmCharts guys to respond.

The zoomControl.gridHeight is a property in AmMaps that was causing the issue for me, but since you don't use the maps then it is probably something different.

[pepziman]

@NPC oh ok anton thank you. btw now i got another type of error: it says

attributes[attr].indexOf is not a function fabric.js:2461

please anyone who are experts at amcharts, help me. thank you very much

[pepziman]

hi @maertz , can you help me? thank you

[maertz]

Hi @pepziman, excuse me for the long waiting time. Unfortunately I was not able to reproduce your issue with your given chart setup but I'm glad you receive following error which will be fixed within next update:

attributes[attr].indexOf is not a function fabric.js:2461

Please hold on a while until I will release a new update, should be out in few hours.

Thanks @NPC for hanging in your hint saved me some time 👍

[pepziman]

@maertz no problem, i glad u response my question so fast. for a little hint, my chart will look like this.

[maertz]

@pepziman I've just committed a new update, please replace it with yours and let me know if everything is fine.

Sincerely Ben

[pepziman]

@maertz thank you very much Ben, will try it tomorrow at office, and get you updated with the result. :+1:

Regards, Albert

[NPC]

@maertz export's v1.4.30 fixes the export issue for me with AmMaps and the zoomControl.gridHeight, thank you very much!

PS I didn't dig deeper, but suspect that t[e].indexOf and attributes[attr].indexOf is the same error, seen with minified / original versions of Fabric.js.

[maertz]

You are welcome, indeed it's the same, the other is just the minified version of it :)

[pepziman]

@maertz unlucky me, i still get t[e].indexOf error, i have changed the link with

<script src="//cdn.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link  type="text/css" href="//cdn.amcharts.com/lib/3/plugins/export/export.css" rel="stylesheet">

i take a look at what code is causing this error and i found this:

fabric.warn = function() {}
,
"undefined" != typeof console && ["log", "warn"].forEach(function(t) {
    "undefined" != typeof console[t] && "function" == typeof console[t].apply && (fabric[t] = function() {
        return console[t].apply(console, arguments)
    }
    )
}),

yet still not working, but now when i clicked the download button, there is no response, not like before that the cursor became draw cursor. what should i do?

[maertz]

@pepziman did you verify if your browser downloaded the new version? Please ensure to flush your cache or simply force the browser to download it again.

<script src="//cdn.amcharts.com/lib/3/plugins/export/export.min.js?uniqueKey=123"></script>

My sample works fine. If you've some issue on mine let me know which browser and OS you are using. In case it's fine as well, I would like to ask you to give me a live sample of yours which reproduces the issue.

[pepziman]

@maertz hi ben, sorry for late reply. turns out that the problem was my data syntax and some old deprecated attributes like fillAlpha and lineAlpha that made the chart unexportable. now the problem was solved and it works like charm!. thank you so much for your and @NPC help. :+1:

Regards, Albert

[maertz]

Glad to hear. Just a hint: ensure to use hexadecimal color codes and a 0-1 range for the alpha to avoid such unexpected behaviour.

Sincerely Ben

[ildima]

I had the exactly the same issue and changing the referred library to "//cdn.amcharts.com/lib/3/plugins/export/export.min.js?uniqueKey=123" did not help at all.

Luckily I played a little in jsfiddle and I discovered the issue was due to a "lineColor" element in a bullet graph. You can test it here [https://jsfiddle.net/2nv06vfe/] Just un-comment row 50 and you'll get the same error

[maertz]

Hi ildima,

please ensure you are using valid hex color codes:

078300 > #078300

https://jsfiddle.net/2nv06vfe/1/