Uncaught RangeError: Maximum call stack size exceeded

[Collin]

Im currently developing a dashboard with timeseries data, i retrieve the data from my laravel controller. But now im running into the following issue:

fusioncharts.js:formatted:9100 Uncaught RangeError: Maximum call stack size exceeded
    at Function.isArray (<anonymous>)

Its quite hard to find a awnser online so that why i came here. 

This is the code i use for creating the chart. 

Promise.all([
    @json($array),
    @json($schema)
]).then(function(res) {
    const data = res[0];
    const schema = res[1];

    const dataStore = new FusionCharts.DataStore();
    dataStore.data = dataStore.createDataTable(data, schema);

    new FusionCharts({
        type: "timeseries",
        renderAt: "graph-container",
        width: "100%",
        height: "400",
        dataSource: {
            data: dataStore,
            chart:{
                "theme": "fusion"
            },
            caption: {
                text: "Products on pallet."
            },
            subcaption: {
                text: "Lorem Ipsum...."
            },
            yaxis: [
                {
                    plot: [
                        {
                            value: "Products",
                            connectnulldata: true
                        }
                    ],
                    title: "Products on pallet",
                    min: "130"
                }
            ]
        }
    }).render();
});

 

Can someone explain why the error occurs?

 

[Ayan Bhadury]

Hi,

Are you using plain JavaScript to render the chart?

 

[Collin]

@Ayan Bhadury Yes im using the Javascript version of the graph.

Is that wrong?

 

[Ayan Bhadury]

Please reproduce the problem in this fiddle - https://jsfiddle.net/fusioncharts/Lut0752a/

[Collin]

@Ayan Bhadury I've looked at the fiddle and noticed that the stucture around the Promoise was different to mine. 

I can now see the graph but its empty, the data is accesable when i console.log() the data.

Any idea how this can happen?

[Ayan Bhadury]

Please review your code implementation once, make sure the promise returns the data first then the chart is rendered.

[Collin]

Hi @Ayan Bhadury,

I've checked and the promise does return the data. If i console log before i create the datatable i can see the data. 

 

This is the code i implemented:

const jsonify = res => res.json();
const dataFetch = fetch("http://local.test/test.json").then(jsonify);
const schemaFetch = fetch("http://local.test/test2.json").then(jsonify);


Promise.all([
    dataFetch,
    schemaFetch
]).then(([data,schema]) => {
    var fusionTable = new FusionCharts.DataStore().createDataTable(data, schema)

    console.log(data);

    new FusionCharts({
        type: 'timeseries',
        renderAt: "graph-container",
        width: "100%",
        height: "400",
        dataSource: {
            data: fusionTable,
            chart: {
                "theme": "fusion"
            },
            caption: {
                text: "Products on pallet."
            },
            yAxis: {
                plot: {
                    value : "Products",
                    connectnulldata: true,
                    type: "line"
                },
            }
        }
    }).render();
});

Is there anything from this code that sticks out as wrong?

[Ayan Bhadury]

Please share the sample code snippet along with the data & schema.

[Collin]

This is my data:
[["2020-09-29 05:24:42",803],["2020-09-29 05:24:42",803],["2020-09-29 05:24:42",802],["2020-09-29 05:24:42",803],["2020-09-29 05:24:42",803],["2020-09-29 05:24:42",803],["2020-09-29 05:24:42",803],["2020-09-29 05:24:42",803],["2020-09-29 05:24:43",803],["2020-09-29 05:24:43",803],["2020-09-29 05:24:43",803],["2020-09-29 05:24:43",803],["2020-09-29 05:24:43",803],["2020-09-29 05:24:43",803],["2020-09-29 05:24:43",803],["2020-09-29 05:24:43",803],["2020-09-29 05:24:43",803],["2020-09-29 05:24:43",803],["2020-09-29 05:24:44",803],["2020-09-29 05:24:44",803],["2020-09-29 05:24:44",803],["2020-09-29 05:24:44",803]]

This is my schema:

[{"name":"Time","type":"date","format":"%Y\/%-m\/%-d %-I:%-M:%-S"},{"name":"Products","type":"number"}]

And then the code i shared above

[Ayan Bhadury]

The schema was not correct - https://jsfiddle.net/gybemrwz/