Browser crashes when creating chart

[FinniganMember]

Hello, I’m trying to use a line chart on a template that is displayed many times on the same screen. At some moment the charts were succesfully created (with some errors) but now in the line $(element).jqxChart(settings) the browser crashes. I suppose it get stuck on a loop becouse I look at how the chrome process memory raises until 1.6GB and then chrome shows the “Aw, Snap!” blue screen.
Here’s a JSON of the settings I pass.

{"title":"Velocity [Km/H]","description":"Cata 01","enableAnimations":true,"showLegend":true,"padding":{"left":10,"top":5,"right":10,"bottom":5},"titlePadding":{"left":90,"top":0,"right":0,"bottom":10},"source":{"_source":{"datatype":"array","datafields":[{"name":"Date","type":"date"},{"name":"Velocidad","type":"float"}],"localdata":[{"Date":"2013-02-07T11:36:12.103Z","Velocidad":0},{"Date":"2013-02-07T11:54:48.917Z","Velocidad":0},{"Date":"2013-02-07T12:17:00.590Z","Velocidad":0}],"recordstartindex":0,"recordendindex":0,"loadallrecords":true},"_options":{"async":false,"autoBind":true},"records":[{"Date":"2013-02-07T11:36:12.000Z","Velocidad":0},{"Date":"2013-02-07T11:54:48.000Z","Velocidad":0},{"Date":"2013-02-07T12:17:00.000Z","Velocidad":0}],"_downloadComplete":[],"_bindingUpdate":[],"filter":null,"virtualmode":false,"totalrecords":3,"pageable":false,"pagesize":0,"pagenum":0,"cachedrecords":[{"Date":"2013-02-07T11:36:12.000Z","Velocidad":0},{"Date":"2013-02-07T11:54:48.000Z","Velocidad":0},{"Date":"2013-02-07T12:17:00.000Z","Velocidad":0}],"originaldata":[{"Date":"2013-02-07T11:36:12.103Z","Velocidad":0},{"Date":"2013-02-07T11:54:48.917Z","Velocidad":0},{"Date":"2013-02-07T12:17:00.590Z","Velocidad":0}],"recordids":[],"updaterow":null,"addrow":null,"deleterow":null,"cache":true,"unboundmode":false,"koSubscriptions":[]},"categoryAxis":{"dataField":"Date","type":"date","baseUnit":"date","showTickMarks":true,"tickMarksInterval":0,"tickMarksColor":"#888888","unitInterval":0,"showGridLines":true,"gridLinesInterval":0,"gridLinesColor":"#888888","axisSize":"auto","valuesOnTicks":false,"verticalTextAlignment":true,"minValue":"2013-02-07T11:36:12.103Z","maxValue":"2013-02-07T12:17:00.590Z"},"colorScheme":"scheme04","seriesGroups":[{"type":"line","valueAxis":{"unitInterval":500,"minValue":0,"maxValue":150,"displayValueAxis":true,"description":"Km/H","axisSize":"auto","tickMarksColor":"#888888"},"series":[{"dataField":"Velocidad","displayText":"Cata 01"}]}]}

Is there something wrong?

[Peter StoevKeymaster]

Hi Finnigan,

Please, post a complete sample which reproduces the behavior that you report. In addition, please take a look at this topic about Code Formatting in the Forum: http://www.jqwidgets.com/community/topic/code-formatting.

In addition, please share information about your Browser Name, Browser Version and jQuery version.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[FinniganMember]

I’m using knockout in this project. The chartDataSource is created this way:

crearChartDataSource = function (reportePorMovil) {
                var chartDataSource = [];
                for (var i = 0; i < reportePorMovil().length; i++) {
                    var registro = reportePorMovil()[i];
                    chartDataSource.push({
                        Date: new Date(registro.fechaGPS()),
                        Velocidad: registro.velocidad()
                    });
                }
                return {
                    datatype: 'array',
                    datafields: [{ name: 'Date', type: 'date' },
                                 { name: 'Velocidad', type: 'float' }],
                    localdata:chartDataSource
                };
            },

The html I use is:

<div style="width:680px; height:400px; vertical-align: top;  display: inline-block; padding: 10px;" data-bind="jqxChart: chartDataSource, chartOptions: { source: chartDataSource, title: i18n.t('velocidad'),
                description: nombreMovil, padding: { left: 10, top: 5, right: 10, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 }, colorScheme: 'scheme04',
                categoryAxis: {
                        dataField: 'Date',
                        formatFunction: chartFormatFunction,
                        toolTipFormatFunction: chartToolTipFormatFunction,
                        type: 'date',
                        baseUnit: 'date',
                        showTickMarks: true,
                        tickMarksInterval: 0,
                        tickMarksColor: '#888888',
                        unitInterval: 0,
                        showGridLines: true,
                        gridLinesInterval: 0,
                        gridLinesColor: '#888888',
                        axisSize: 'auto',
                        valuesOnTicks: false,
                        verticalTextAlignment: true,
                        minValue: fechaDesde,
                        maxValue: fechaHasta
                    },
                seriesGroups: [
                        {
                            type: 'line',
                            valueAxis:
                            {
                                unitInterval: 500,
                                minValue: reporteFilter.velocidadDesdeNumber(),
                                maxValue: reporteFilter.velocidadHastaNumber(),
                                displayValueAxis: true,
                                description: 'Km/H',
                                axisSize: 'auto',
                                tickMarksColor: '#888888'
                            },
                            series: [
                                    { dataField: 'Velocidad', displayText: nombreMovil }
                                ]
                        }
                    ]
            } "></div>

Each of the parameters in data-bind are binded this way:

 ko.bindingHandlers.jqxChart = {
        init: function (element, valueAccessor, allBindingsAccessor) {
            var binding = ko.utils.unwrapObservable(allBindingsAccessor());
            //initialize jqxTabs with some optional options
            var options = binding.chartOptions || {};
            var theme = '';
            var dataInfo;
            if (!!options.sourceUrl) {
                var source =
                    {
                        datatype: options.sourceUrl.datatype,
                        datafields: options.sourceUrl.datafields,
                        url: options.sourceUrl.url
                    };
                dataInfo = new $.jqx.dataAdapter(source,
                    {
                        async: false,
                        autoBind: true,
                        loadError: function(xhr, status, error) {
                            alert('Error loading "' + source.url + '" : ' + error);
                        }
                    });
            }else {
                var source =
                   {
                       datatype: options.source.datatype,
                       datafields: options.source.datafields,
                       localdata: options.source.localdata
                   };
                dataInfo = new $.jqx.dataAdapter(source,
                    {
                        async: false,
                        autoBind: true,
                        loadError: function (xhr, status, error) {
                            alert('Error loading "' + source.url + '" : ' + error);
                        }
                    });
            }
            var settings = {
                title: options.title,
                description: options.description,
                enableAnimations: options.enableAnimations || true,
                showLegend: options.showLegend || true,
                padding: options.padding || { left: 10, top: 5, right: 10, bottom: 5 },
                titlePadding: options.titlePadding || { left: 90, top: 0, right: 0, bottom: 10 },
                source: dataInfo,
                categoryAxis: options.categoryAxis,
                colorScheme: options.colorScheme,
                seriesGroups: options.seriesGroups
            };
            $(element).jqxChart(settings);
        }
    };

Finally: I’m running this on chrome Version 24.0.1312.52 m and Firefox 18.0.2 with JQuery v1.7.2

[Peter StoevKeymaster]

Hi Finnigan,

jqxChart is supposed to be used with Knockout in the way demonstrated in our sample here: chart.htm using our KO plug-in – jqxknockout.js. I am afraid that we will not be able to help with implementation of custom KO binding handlers.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[FinniganMember]

At least can you take a look at the settings of my first post? It’s about the settings I use to create the chart on a div element. Perhaps the problem has to do with the dates, becouse on the samples there’s only one register per day while I’m using one register per minute (more or less).

[Peter StoevKeymaster]

Hi Finnigan,

We do not have data to test with the provided code.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[FinniganMember]

Found why it crashed. I was using 0 in tickMarksInterval, unitInterval and gridLinesInterval.

[Peter StoevKeymaster]

Thanks for the update.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts