CODEWITHSUNDEEP
javascriptflot
shorif2000
shorif2000

Reputation: 2654

Flot chart trigger error on animate

I am receiving the following error:

Uncaught TypeError: chart.trigger is not a functionplotData @ jquery.flot.animator.js:124

On my flot graph:

var options = {
    "xaxis": {
        "mode": "time",
        "timeformat": "%d/%m",
        //"tickSize": [1, "day"]
    },
    "yaxes": [{
            "position": "left",
            //"tickSize": 1,
            "min": min,
            "max": 100
        }, {
            "position": "right",
            "min": 0,
            "max": max
        }
    ],
    "series": {
        "lines": {
            "show": true
        },
        curvedLines: {
            apply: true,
        } 
    },
    "colors": ["#00ff00"],
    "legend": {
        "show": false
    },
    "grid": {
        hoverable: true,
        clickable: true
    },
    animator: { start: 100, steps: 99, duration: 2000, direction: "left" }
};

I have tried: 

plot = $.plotAnimator("#network-graph",  [{ data : [arr], 
    animator: { start: 100, steps: 99, duration: 1000, direction: "left" } }], options);

and

plot = $.plotAnimator("#network-graph",  [{ data : arr, 
    animator: { start: 100, steps: 99, duration: 1000, direction: "left" } }], options);

I have now tried 

plot = $.plotAnimator($("#network-graph"),  [{ data : arr, animator: { start: 100, steps: 99, duration: 1000, direction: "left" } }], options);

but it crashes.

When I try the following, it does not crash or any errors pop up however, the data points do not load.

plot = $.plotAnimator($("#network-graph"),  [{ data : [arr], animator: { start: 100, steps: 99, duration: 1000, direction: "left" } }], options);

Here is the data

[1449619200000,99.38],
[1449622800000,99.23],
[1449626400000,99.39],
[1449630000000,99.4],
[1449633600000,99.39],
[1449637200000,99.4],
[1449640800000,99.41],
[1449644400000,99.4],
[1449648000000,99.31],
[1449651600000,99.12],
[1449655200000,99.06],
[1449658800000,98.93],
[1449662400000,98.94],
[1449666000000,99.05],
[1449669600000,99.11],
[1449673200000,99.16],
[1449676800000,99.3],
[1449680400000,99.4],
[1449684000000,99.43],
[1449687600000,99.43],
[1449691200000,99.43],
[1449694800000,99.43],
[1449698400000,99.43],
[1449702000000,99.44],
[1449705600000,99.46],
[1449709200000,99.37],
[1449712800000,99.41],
[1449716400000,99.38],
[1449720000000,99.36],
[1449723600000,99.34],
[1449727200000,99.37],
[1449730800000,99.36],
[1449734400000,99.3],
[1449738000000,99.16],
[1449741600000,99.03],
[1449745200000,98.93],
[1449748800000,98.97],
[1449752400000,99.01],
[1449756000000,99.03],
[1449759600000,99.11],
[1449763200000,99.2],
[1449766800000,99.26],
[1449770400000,99.31],
[1449774000000,99.34],
[1449777600000,99.34],
[1449781200000,99.33],
[1449784800000,99.32],
[1449788400000,99.37],
[1449792000000,99.33],
[1449795600000,99.32],
[1449799200000,99.31],
[1449802800000,99.34],
[1449806400000,99.34],
[1449810000000,99.33],
[1449813600000,99.33],
[1449817200000,99.33],
[1449820800000,99.21],
[1449824400000,99.05],
[1449828000000,98.82],
[1449831600000,98.85],
[1449835200000,98.94],
[1449838800000,99.04],
[1449842400000,99.11],
[1449846000000,99.17],
[1449849600000,99.25],
[1449853200000,99.25],
[1449856800000,99.32],
[1449860400000,99.4],
[1449864000000,99.37],
[1449867600000,99.09],
[1449871200000,99.06],
[1449874800000,99.19],
[1449878400000,99.42],
[1449882000000,99.43],
[1449885600000,99.43],
[1449889200000,99.41],
[1449892800000,99.41],
[1449896400000,99.4],
[1449900000000,99.4],
[1449903600000,99.43],
[1449907200000,99.41],
[1449910800000,99.31],
[1449914400000,99.26],
[1449918000000,99.2],
[1449921600000,99.21],
[1449925200000,99.27],
[1449928800000,99.35],
[1449932400000,99.39],
[1449936000000,99.43],
[1449939600000,99.45],
[1449943200000,99.47],
[1449946800000,99.48],
[1449950400000,99.47],
[1449954000000,99.46],
[1449957600000,99.51],
[1449961200000,99.51],
[1449964800000,99.52],
[1449968400000,99.52],
[1449972000000,99.5],
[1449975600000,99.47],
[1449979200000,99.48],
[1449982800000,99.48],
[1449986400000,99.5],
[1449990000000,99.5],
[1449993600000,99.44],
[1449997200000,99.36],
[1450000800000,99.36],
[1450004400000,99.37],
[1450008000000,99.37],
[1450011600000,99.39],
[1450015200000,99.43],
[1450018800000,99.48],
[1450022400000,99.52],
[1450026000000,99.51],
[1450029600000,99.52],
[1450033200000,99.52],
[1450036800000,99.52],
[1450040400000,99.51],
[1450044000000,99.5],
[1450047600000,99.49],
[1450051200000,99.5],
[1450054800000,99.5],
[1450058400000,99.5],
[1450062000000,99.49],
[1450065600000,99.49],
[1450069200000,99.5],
[1450072800000,99.48],
[1450076400000,99.5],
[1450080000000,99.5],
[1450083600000,99.38],
[1450087200000,99.2],
[1450090800000,99.11],
[1450094400000,99.08],
[1450098000000,99.1],
[1450101600000,99.12],
[1450105200000,99.23],
[1450108800000,99.37],
[1450112400000,99.41],
[1450116000000,99.42],
[1450119600000,99.43],
[1450123200000,99.42],
[1450126800000,99.43],
[1450130400000,99.44],
[1450134000000,99.43],
[1450137600000,99.4],

I am using following code to plot graph, which works.

if(DEBUG){      
        g_start = new Date().getTime();
        console.log("start graph render: " + g_start );
    }
    var data_ajax = [{
            "color" : "#A8B400",
            "label" : "R1 Graph",
            "lines" : {
                "show" : true,
                "lineWidth" : 1
            },
            "points" : {
                "show" : false
            },
            "yaxes" : 1,
            "data" : arr,
            animator: { start: 100, steps: 99, duration: 1000, direction: "left" }
        }
    ];
    $('#network-graph').empty();
    //plot = $.plotAnimator($("#network-graph"),  data_ajax, options);
    plot = $.plot("#network-graph",  data_ajax, options);

    bind();
    if(DEBUG){      
        g_end = new Date().getTime();
        console.log("finish graph render: " + g_end );
        console.log("process graph render duration : " +  ((g_end - g_start)/1000) + "s" );
    }

Upvotes: 4

Views: 170

Answers (1)

mechenbier
mechenbier

Reputation: 3067

You need to surround your HTML id string with the jquery selector:

plot = $.plotAnimator($("#network-graph"), [{ data : arr, animator: { start: 100, steps: 99, duration: 1000, direction: "left" } }], options);

This JSFiddle loads and animates without the error (it has the jQuery selector surrounding the id of the div in $.plotAnimate()).

This JSFiddle reproduces the error you're seeing when the animation is finished (it doesn't have the selector in $.plotAnimate()).

In both of the above JSFiddles, you can open up the developer tools of the browser you are using and look at the console to see the error (or lack thereof).

Upvotes: 1

Related Questions