Exception when same params object is used to call MG.data_graphic multiple times #401

reppners · 2015-03-31T12:35:36Z

Tried out the new option and it breaks for me with this message.

[Error] Error: undefined is not a function (evaluating 'n.getMinutes()')
M@http://localhost:9000/vendor/d3/d3.min.js:1:31145
t@http://localhost:9000/vendor/d3/d3.min.js:1:14408
http://localhost:9000/vendor/metrics-graphics/dist/metricsgraphics.js:1522:57
http://localhost:9000/vendor/metrics-graphics/dist/metricsgraphics.js:1606:64
http://localhost:9000/vendor/d3/d3.min.js:3:12215
http://localhost:9000/vendor/d3/d3.min.js:3:14541
Y@http://localhost:9000/vendor/d3/d3.min.js:1:4475
each@http://localhost:9000/vendor/d3/d3.min.js:3:14513
text@http://localhost:9000/vendor/d3/d3.min.js:3:12169
mg_add_x_tick_labels@http://localhost:9000/vendor/metrics-graphics/dist/metricsgraphics.js:1605:26
x_axis@http://localhost:9000/vendor/metrics-graphics/dist/metricsgraphics.js:1304:29
init@http://localhost:9000/vendor/metrics-graphics/dist/metricsgraphics.js:2373:19
line@http://localhost:9000/vendor/metrics-graphics/dist/metricsgraphics.js:3091:18
data_graphic@http://localhost:9000/vendor/metrics-graphics/dist/metricsgraphics.js:222:24
redraw@http://localhost:9000/scripts/directives/chart.js:126:36
http://localhost:9000/scripts/directives/chart.js:178:23
http://localhost:9000/vendor/angular/angular.min.js:122:292
$digest@http://localhost:9000/vendor/angular/angular.min.js:123:358
$apply@http://localhost:9000/vendor/angular/angular.min.js:126:300
http://localhost:9000/vendor/angular/angular.min.js:90:366
(anonyme Funktion) (angular.min.js, line 102)
(anonyme Funktion) (angular.min.js, line 76)
$digest (angular.min.js, line 124)
$apply (angular.min.js, line 126)
(anonyme Funktion) (angular.min.js, line 90)

Used data structure is:

realtime: {
            data: [
                 {
                       date: new Date(),
                       value: Math.random() * (100 - 0) + 0
                 },
                 ...
            ],
            options: {
                description: 'New data is shown as it comes in',
                title: 'Realtime updates',
                x_accessor: 'date',
                y_accessor: 'value',
                max_y: 120,
                xax_start_at_min: true,
                transition_on_update: true,
                y_extended_ticks: true,
                interpolate: 'linear'
            }
        }

You can checkout this branch where it is demonstrated.

The text was updated successfully, but these errors were encountered:

almossawi · 2015-03-31T16:28:22Z

Don't you get that error irrespective of xax_start_at_min? I can take a closer look a little later. Here's a slightly modified version of your code and the result when run here:

var data = [];
for (var i = 0; i < 100; i++) {
    data.push({
        date: i,
        value: Math.random() * (100 - 0) + 0
     })
}

MG.data_graphic({
    description: 'New data is shown as it comes in',
    title: 'Realtime updates',
    data: data,
    max_y: 120,
    xax_start_at_min: true,
    transition_on_update: true,
    y_extended_ticks: true,
    interpolate: 'linear',
    target: '.result'
});

reppners · 2015-03-31T19:42:57Z

No, I tracked it down to flipping the sax_start_at_min option.
I should add that I dynamically change the min_x and max_x option to keep added data in the center of the graph. The logic is implemented here

I put together the logic in a minimal form for the interactive demo:

var data = [];

var options = {
    description: 'New data is shown as it comes in',
    title: 'Realtime updates',
    max_y: 120,
    xax_start_at_min: true,
    transition_on_update: true,
    y_extended_ticks: true,
    interpolate: 'linear',
    x_accessor: 'date',
    y_accessor: 'value',
    target: '.result'
 };

 setInterval(function () {

    var date = new Date();

    // set min and max when some data is present
    if (data.length > 6) {

        options.min_x = data[data.length - 3].date.getTime();
        options.max_x = options.min_x + 6000;
    }

    // add new value
    data.push({
        date: date,
        value: Math.random() * (100 - 0) + 0
    });

    options.data = data;

    MG.data_graphic(options);
}, 1000);

Interestingly enough this fails regardless of xax_start_at_min but at the same line as my initially reported exception, namely: metricsgraphics.js, 1522

almossawi · 2015-03-31T19:49:04Z

This may well be related to #393, which I'm currently looking at.

Using the same params object on multiple calls to MG.data_graphic appears to be the culprit. Add this right before your penultimate line (i.e. MG.data_graphic(options)) and see if it fixes the issues, modulo the initial console error:

delete options.xax_format;

reppners · 2015-03-31T19:56:21Z

This helps with the minimal example. The issue persists for the angular-directive as I already worked around this issue by deep copying the options before invoking MG.data_graphic with the deep copied options.

almossawi · 2015-03-31T21:26:41Z

With the change that I just committed, this slightly modified block now works for me. Would you mind verifying, please.

var data = [];

var options = {
    description: 'New data is shown as it comes in',
    title: 'Realtime updates',
    max_y: 120,
    xax_start_at_min: true,
    transition_on_update: true,
    y_extended_ticks: true,
    interpolate: 'linear',
    x_accessor: 'date',
    y_accessor: 'value',
    target: '.result'
 };

 setInterval(function () {
    var date = new Date();

    //set min and max when some data is present
    if (data.length > 6) {
        options.min_x = new Date(+data[data.length - 3].date);
        options.max_x = new Date(+options.min_x + 6000);
    }

    // add new value
    data.push({
        date: date,
        value: Math.random() * (100 - 0) + 0
    });
    options.data = data;
    MG.data_graphic(options);
}, 1000);

reppners · 2015-03-31T21:40:04Z

Yes, this improved the behavior but there is still a exception.

[Error] Error: undefined is not a function (evaluating 'n.getHours()')
I@http://localhost:9000/vendor/d3/d3.min.js:1:30942
t@http://localhost:9000/vendor/d3/d3.min.js:1:14408
http://localhost:9000/vendor/metrics-graphics/dist/metricsgraphics.js:1673:43
http://localhost:9000/vendor/d3/d3.min.js:3:12215
http://localhost:9000/vendor/d3/d3.min.js:3:14541
Y@http://localhost:9000/vendor/d3/d3.min.js:1:4475
each@http://localhost:9000/vendor/d3/d3.min.js:3:14513
text@http://localhost:9000/vendor/d3/d3.min.js:3:12169
mg_add_x_tick_labels@http://localhost:9000/vendor/metrics-graphics/dist/metricsgraphics.js:1672:30
x_axis@http://localhost:9000/vendor/metrics-graphics/dist/metricsgraphics.js:1304:29
init@http://localhost:9000/vendor/metrics-graphics/dist/metricsgraphics.js:2373:19
line@http://localhost:9000/vendor/metrics-graphics/dist/metricsgraphics.js:3091:18
data_graphic@http://localhost:9000/vendor/metrics-graphics/dist/metricsgraphics.js:222:24
...

From a quick look the fix you've applied would help at line 1673, too.

reppners · 2015-03-31T21:44:50Z

I can definitely confirm that using the same options object multiple times is no longer an issue.

almossawi · 2015-03-31T21:51:39Z

If you wouldn't mind verifying that the latest commit fixes your last exception.

reppners · 2015-03-31T21:55:53Z

I use bower and reference the master branch to pull in the latest changes - in your latest commit the bower dist js-files are completely emptied - was this by accident?

almossawi · 2015-03-31T21:57:55Z

Aah, my bad. Committed, before it finished building.

reppners · 2015-03-31T22:01:52Z

All working fine now :)

almossawi · 2015-03-31T22:02:54Z

Great :)

almossawi closed this as completed in ddc71b4 Mar 31, 2015

almossawi reopened this Mar 31, 2015

almossawi mentioned this issue Mar 31, 2015

args.processed.main_x_time_format() function is undefined sometime #393

Closed

almossawi added this to the v2.4 milestone Mar 31, 2015

almossawi self-assigned this Mar 31, 2015

almossawi added the bug label Mar 31, 2015

almossawi added a commit that referenced this issue Mar 31, 2015

Issue #401

c18381a

almossawi changed the title ~~'xax_start_at_min' on true breaks chart drawing~~ Exception when same params object is used to call MG.data_graphic multiple times Mar 31, 2015

almossawi closed this as completed Mar 31, 2015

gelbal mentioned this issue Sep 8, 2015

Exception on 2nd call to MG.data_graphic when y_accessor is array (for multi-line charts) #488

Closed

hamilton unassigned almossawi Mar 22, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Exception when same params object is used to call MG.data_graphic multiple times #401

Exception when same params object is used to call MG.data_graphic multiple times #401

reppners commented Mar 31, 2015

almossawi commented Mar 31, 2015

reppners commented Mar 31, 2015

almossawi commented Mar 31, 2015

reppners commented Mar 31, 2015

almossawi commented Mar 31, 2015

reppners commented Mar 31, 2015

reppners commented Mar 31, 2015

almossawi commented Mar 31, 2015

reppners commented Mar 31, 2015

almossawi commented Mar 31, 2015

reppners commented Mar 31, 2015

almossawi commented Mar 31, 2015

Exception when same params object is used to call MG.data_graphic multiple times #401

Exception when same params object is used to call MG.data_graphic multiple times #401

Comments

reppners commented Mar 31, 2015

almossawi commented Mar 31, 2015

reppners commented Mar 31, 2015

almossawi commented Mar 31, 2015

reppners commented Mar 31, 2015

almossawi commented Mar 31, 2015

reppners commented Mar 31, 2015

reppners commented Mar 31, 2015

almossawi commented Mar 31, 2015

reppners commented Mar 31, 2015

almossawi commented Mar 31, 2015

reppners commented Mar 31, 2015

almossawi commented Mar 31, 2015