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
On Thursday, December 28, 2017 at 1:18:14 PM UTC, Daniel Arruda wrote:
>
> 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
>
> Em segunda-feira, 11 de dezembro de 2017 14:44:16 UTC-2, Lucas Heasman
> escreveu:
>>
>> 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
>>
>
--
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/0a307e91-951a-4697-97e5-d964827d1a30%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
