Dashboard Memory Issues

113 views
Skip to first unread message

Lucas Heasman

unread,
Dec 11, 2017, 11:44:16 AM12/11/17
to Google Visualization API
Hi everyone,

I am fairly new to coding and have created a webpage with multiple dashboards on it. However over time the memory keeps increasing, I have pinned it down to when I draw each dashboard. I am doing this every 5 seconds.

Here is my code for one of the dashboards: 

var chart, dashboard, rangeSlider, prevChart, prevDash, prevSlide;
function allChart() {
var data = new google.visualization.DataTable();
data.addColumn('datetime', 'Time');
for (var i = 0; i<siloArray.length; i++) {
data.addColumn('number', siloArray[i]);
}

data.addRows(allChartData);

var sliderOptions = {
controlType: 'ChartRangeFilter',
containerId: 'sChartFilter',
options: {
filterColumnLabel: 'Time',
ui: {
chartOptions: {
height:50,
width: '100%',
colors: colors,
chartArea: {
width: '90%'
},
hAxis: {

}
},
snapToData: true
}
},
}

var allOptions = {
chartType: 'LineChart',
containerId: 'sChart',
options: {
width: '100%',
height: 560,
focusTarget: 'category',
colors: colors,
legend: {
position: 'top',
maxLines: 5,
},
title: 'Number of Sessions based on Time',
chartArea: {
top: 100,
bottom: 60,
width: '90%',
height: '65%'
},
hAxis: {
title: 'Time',
},
vAxis: {
title: 'Number of Sessions',
format: '0',
maxValue: 6,
minValue: 0
},
},
view:{
}
}

var colArray = [];
for (var j = 0; j<siloArray.length; j++) {
colArray.push(j);
}
allOptions.view.columns = colArray;

if (allChartData.length == 1) {
allOptions.options.hAxis.ticks = [allChartData[0][0]];
sliderOptions.options.ui.chartOptions.hAxis.ticks = [allChartData[0][0]];
}

prevChart = chart;
prevDash = dashboard;
prevSlide = rangeSlider;

rangeSlider = new google.visualization.ControlWrapper(sliderOptions);
chart = new google.visualization.ChartWrapper(allOptions);
dashboard = new google.visualization.Dashboard(document.getElementById("sDashboard")).
bind([rangeSlider], [chart]).

draw(data);

if (prevDash) {
prevDash.visualization.dispose();
prevChart.visualization.clearChart();
prevSlide.visualization.dispose();
}
}

Any help is appreciated.
Lucas

Daniel Arruda

unread,
Dec 28, 2017, 8:18:14 AM12/28/17
to Google Visualization API
Same issue here,

I m using ng2-google-charts for Angular 2+, every 5s i refresh my chart, the memory slowly increases until the browser crashes..

Any hint?

Daniel

Lucas Heasman

unread,
Jan 3, 2018, 12:26:16 PM1/3/18
to Google Visualization API
Hi Daniel,

I found a different way of where you initialise the chart options then only update the points.

var chart, dashboard, rangeSlider, allData;

function allChart() {

//Turn the data variable into a data table with headings for datetime and all the silos
allData = new google.visualization.DataTable();
allData.addColumn("datetime", "Time");
for (var i = 0; i<siloArray.length; i++) {
allData.addColumn("number", siloArray[i]);
}

//Set the location of the dashboard
dashboard = new google.visualization.Dashboard(document.getElementById("sDashboard"))

//Define the options for the rangeSlider
rangeSlider = new google.visualization.ControlWrapper({
controlType: "ChartRangeFilter",
containerId: "sChartFilter",
options: {
filterColumnLabel: "Time",
ui: {
chartOptions: {
height:50,
width: "100%",
colors: colors,
chartArea: {
width: "90%"
},
hAxis: {

}
},
snapToData: true
}
},
});

//Define the options for the chart
chart = new google.visualization.ChartWrapper({
chartType: "LineChart",
containerId: "sChart",
options: {
width: "100%",
height: 560,
focusTarget: "category",
colors: colors,
legend: {
position: "top",
maxLines: 5,
},
title: "Number of Sessions based on Time",
chartArea: {
top: 100,
bottom: 60,
width: "90%",
height: "65%"
},
hAxis: {
title: "Time",
viewWindowMode: "maximized",
},
vAxis: {
title: "Number of Sessions",
format: "0",
maxValue: 6,
minValue: 0
},
}
});
//Bind all the pieces of the dashboard together and draw a dashboard with no data
dashboard.bind([rangeSlider], [chart]);
dashboard.draw(allData);
}

//Create a function for updating the dashboard with new data every 5 seconds
function allUpdate(newData) {

//Add the new data as a row to the data table
allData.addRows(newData);

//Draw the dashboard with new data
dashboard.draw(allData);

//Work around for a bug causing data to only show in the slider, sets the max range between now and a month ago
rangeSlider.setState({end:new Date(), start: new Date(new Date().setMonth(new Date().getMonth()-1))});
}

So I run the allChart function to set it up and then run the allUpdate function whenever I want to add new points on the end, I do this every 5 seconds and have got up to nearly 5000 points multiple times, there still seems to be a memory issue but it is much slower.

Hope this helps,
Lucas

Lucas Heasman

unread,
Jan 5, 2018, 9:45:25 AM1/5/18
to Google Visualization API
*50,000
Reply all
Reply to author
Forward
0 new messages