javascript - LazyLoad for amCharts -

i working on amcharts donut chart.

i able create chart , giving events both slice , labels.

for chart added rolloverslice event.

then added script lazyload chart in order create chart once page scrolls particular section.

now chart creating lazyload, roll on event label not working.

following script used create chart , lazyload.

script

/*lazy load code starts here*/ amcharts.lazyloadmakechart = amcharts.makechart;  // override makechart function amcharts.makechart = function(a, b, c) {    // set scroll events   jquery(document).on('scroll load touchmove', handlescroll);   jquery(window).on('load', handlescroll);    function handlescroll() {     var $ = jquery;     if (true === b.lazyloaded)       return;     var ht = $('#' + a).offset().top,       hh = $('#' + a).outerheight() / 2,       wh = $(window).height(),       ws = $(window).scrolltop();     if (ws > (ht + hh - wh)) {       b.lazyloaded = true;       amcharts.lazyloadmakechart(a, b, c);       return;     }   }    // return fake listener avoid errors   return {     addlistener: function() {}   }; }; /*lazy load code ends here*/  var chart = amcharts.makechart("chartdiv", {   "type": "pie",   "pulloutduration": 0.5,   "pulloutradius": "5",   "theme": "light",   "dataprovider": [{     "title": "aaa",     "value": 10,   }, {     "title": "bbb",     "value": 10,   }, {    "title": "ccc",    "value": 10,   }, {     "title": "ddd",     "value": 10,   }, {     "title": "eee",     "value": 10,   }],   "titlefield": "title",   "valuefield": "value",   "labelradius": 50,    "radius": "35%",   "innerradius": "85%",   "labeltext": "[[title]]",   "export": {     "enabled": true   },   "basecolor": "#7a4436",   "pulloutonlyone": true,   "starteffect": "easeoutsine",   "pullouteffect": "easeoutsine",   "pulloutradius": 0,   "balloontext": "",   "listeners": [{     "event": "rolloverslice",     "method": function(e) {       var dp = e.dataitem.datacontext;       document.getelementbyid("result").innertext = dp.title + ':' + dp.value;     }   }] });   chart.addlistener("init", function() {   var d = chart.chartdata;   (var = 0; < d.length; i++) {     d[i].label.node.style.pointerevents = "auto";     d[i].label.node.style.cursor = "pointer";     chart.addeventlisteners(d[i].labelset, d[i]);   } }); 

is possible create chart lazyload , rollover label too?

if not possible, there way animate chart again when scrolls down section having chart?

here's fiddle demo

your makechart function returns object, has mock addlistener method. later added listener won't work. have wait until chart created , add it.

function handlescroll() {     var $ = jquery;     var ht = $('#' + a).offset().top,     hh = $('#' + a).outerheight() / 2,     wh = $(window).height(),     ws = $(window).scrolltop();     if (ws > (ht + hh - wh)) {         if (!b.lazyloaded) {             b.lazyloaded = true;             visible = true;             chart = amcharts.lazyloadmakechart(a, b, c);             var d = chart.chartdata;             addlabelevent();             chart.addlistener("drawn", addlabelevent);             return;         }         if (!visible) {             chart.animateagain();             visible = true;                 }     } else {         visible = false;     } } 

(for reason neither init nor drawn handler fired @ initialization, works without [i think because dom loaded completly , creation synchronous then])

i've extracted lines add event listener separate function, can call @ initialization , when chart drawn. way handler should registered.

function addlabelevent() {     var d = chart.chartdata;     (var = 0; < d.length; i++) {         d[i].label.node.style.pointerevents = "auto";         d[i].label.node.style.cursor = "pointer";         chart.addeventlisteners(d[i].labelset, d[i]);     } } 

i've introduced variable visible can call reanimate chart if gets view time.

here's updated fiddle.