I have already posted problem on Stack Overflow http://stackoverflow.com/questions/36726383/google-timeline-memory-leak-when-redrawing-chart
Here is the chart https://jsfiddle.net/damiantt/t2skaegg/2/ <script type="text/javascript" src="//www.google.com/jsapi"></script> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js";></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js";></script> <input id="Draw" type="button" value="Draw" onclick="drawChart();" /> <div id="chart_div_container" style="overflow-x: auto;min-height:0%;"> <div id="chart_div" style="overflow: visible;min-height:0%;"></div> </div> <script type="text/javascript"> google.charts.load('current', { 'packages': ['timeline', 'table'] }); var initWidth = $('#chart_div').innerWidth(); var colorMap; function drawChart() { $('#chart_div').off(); $('#chart_div').empty(); var data = google.visualization.arrayToDataTable([ ['Maszyna', 'Kolor', { type: 'string', role: 'tooltip', 'p': { 'html': true } }, 'Start Time', 'End Time'], ['one', 'pi1', 'brr', new Date(2014, 10, 15, 12, 30, 0), new Date(2014, 10, 15, 12, 30, 20) ], ['one', 'pu3', 'brr', new Date(2014, 10, 15, 12, 30, 20), new Date(2014, 10, 15, 12, 30, 45) ], ['one', 'pu3', 'brr', new Date(2014, 10, 15, 12, 30, 45), new Date(2014, 10, 15, 12, 30, 55) ], ['two', 'g2', 'brr1', new Date(2014, 10, 15, 12, 30, 35), new Date(2014, 10, 15, 12, 30, 55) ], ['two', 'pi1', 'brr2', new Date(2014, 10, 15, 12, 30, 55), new Date(2014, 10, 15, 14, 31, 55) ], ['three', 'pu3', 'brr', new Date(2014, 10, 15, 12, 29, 30), new Date(2014, 10, 15, 14, 30, 0) ], ['three', 'pi1', 'brr', new Date(2014, 10, 15, 14, 30, 0), new Date(2014, 10, 15, 14, 35, 0) ], ['three', 'g2', 'Zbrr', new Date(2014, 10, 15, 14, 35, 0), new Date(2014, 10, 15, 15, 25, 10) ], ['three', 'pu3', 'KR1', new Date(2014, 10, 15, 15, 25, 10), new Date(2014, 10, 15, 15, 26, 00) ], ['three', 'g2', 'KR2', new Date(2014, 10, 15, 15, 26, 00), new Date(2014, 10, 15, 15, 26, 45) ], ['three', 'pi1', 'KR3', new Date(2014, 10, 15, 15, 26, 45), new Date(2014, 10, 15, 15, 27, 15) ], ['three', 'pu3', 'brr', new Date(2014, 10, 15, 15, 27, 15), new Date(2014, 10, 15, 20, 30, 1) ], ['three', 'pi1', 'brr', new Date(2014, 10, 15, 20, 30, 1), new Date(2014, 10, 16, 10, 30, 10) ], ['three', 'pu3', 'brr', new Date(2014, 10, 16, 10, 30, 10), new Date(2014, 10, 16, 18, 30, 10) ], ]); var colors = []; colorMap = { // should contain a map of category -> color for every category pi1: '#e63b6f', g2: '#19c362', pu3: '#592df7', c4: '#000000', '000000': '#000000' } for (var i = 0; i < data.getNumberOfRows(); i++) { colors.push(colorMap[data.getValue(i, 1)]); } var options = { enableInteractivity: false, height: 210, width: initWidth, colors: colors, avoidOverlappingGridLines: false, timeline: { showBarLabels: false }, hAxis: { format: 'dd/MM\nHH:mm' }, tooltip: { isHtml: true } }; var chart = new google.visualization.Timeline(document.getElementById('chart_div')); chart.draw(data, options); afterDraw(data, colors); $(document).ready(function() { var zoom = 1000; var leftSpace = $('rect:first-child+path').position().left - $('#chart_div svg').position().left; var svgOffset = $('#chart_div svg').offset().left; var $chartDivCont = $('#chart_div_container'); var x, left, down; $('#chart_div').on({ 'mousemove': function(evt) { if (down) { var newX = evt.pageX; $chartDivCont.scrollLeft(left - newX + x); } }, 'mousedown': function(evt) { $('html').css('cursor', 'col-resize'); evt.preventDefault(); down = true; x = evt.pageX; left = $chartDivCont.scrollLeft(); }, 'mouseup': function() { down = false; $('html').css('cursor', 'auto'); }, 'mousewheel DOMMouseScroll': function(evt) { evt.preventDefault(); if (evt.originalEvent.wheelDelta > 0 || evt.originalEvent.detail < 0) { if (options.width < 31000) { options.width += zoom; var prevScrollLeft = $chartDivCont.scrollLeft(); var prop = ($chartDivCont.scrollLeft() + evt.originalEvent.clientX - leftSpace - svgOffset) / ($('#chart_div svg').width() - leftSpace); chart.draw(data, options); afterDraw(data, colors); $chartDivCont.scrollLeft(prevScrollLeft + (prop * 1000)); } } else { if (options.width >= initWidth + zoom) { options.width -= zoom; var prevScrollLeft = $chartDivCont.scrollLeft(); var prop = ($chartDivCont.scrollLeft() + evt.originalEvent.clientX - leftSpace - svgOffset) / ($('#chart_div svg').width() - leftSpace); chart.draw(data, options); afterDraw(data, colors); $chartDivCont.scrollLeft(prevScrollLeft - (prop * 1000)); } } } }); }); } function afterDraw(data, colors) { $rects = $('#chart_div svg > g:nth-child(5) > rect'); for (var i = 0; i < $rects.length; i++) { $('#chart_div svg > g:nth-child(5) > rect:nth-child(' + (i + 1) + ')').css({ "fill": colors[i] }); } } When i run it on Chrome, memory usage is ~75k. After Draw and max zoom in (zoom it by mouse scroll) memory meter shows 140k, then max zoom out - 180k memory usage, zoom in - 225k, zoom out - 265k. Is any way to free memory after every draw()? I tried to delete HTML elements, to null variables, but nothing helps me -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at https://groups.google.com/group/google-visualization-api. To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/e1c5fa2e-ebf3-4815-a412-48037acdd526%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
