Google charts - set the finite range of the ChartRangeFilter to the maximum new data

I have an application that continuously adds temperature data to a line chart. When new data is added to the chart, it is not displayed because the maximum range ChartRangeFilter

does not include it, even if it was far right before the update. To show new data, you need to manually configure the range filter to include addition.

I tried to find a solution to this problem but no luck so far. For some reason, I cannot call my instance methods chart1

outside of the function drawChart

. (see code below)

The most important criterion for a problem is that it should only be corrected to the far right if it was already in the far right before the update.

Here is the relevant Javascript code:

google.load('visualization', '1', {'packages':['corechart', 'controls', 'linechart']});
google.setOnLoadCallback(drawChart);

var chart1;
function drawChart() 
{
    // Create the dataset (DataTable)
    data = new google.visualization.DataTable();
    data.addColumn('date', 'Date');
    data.addColumn('number', 'Temperature');

    // Create a dashboard.
    dash_container = document.getElementById('dashboard'),
    dashboard = new google.visualization.Dashboard(dash_container);

    for (var i = 0; i < all_history.length; i ++)
    {
        var obj = all_history[i];
        data.addRow([new Date(obj.time.value), obj.temperature.value]);
    }

    chart1 = new google.visualization.ChartWrapper(
    {
            chartType : 'LineChart',
            containerId : 'chart1',
            legend: { position: 'bottom' },
            vAxis: 
            {
                maxValue: 40,
                minValue: 10
            }
    });

    // Initial range limits
    var start = new Date(new Date().setTime(new Date().getTime() - 300000));
    var end = new Date();

    control1 = new google.visualization.ControlWrapper(
    {
            controlType: 'ChartRangeFilter',
            containerId: 'control1',
            options: 
        {
                filterColumnLabel: 'Date'
            },
        ui:
        {
            //snapToData: true
        },
        state: 
        {
                range: 
                {
                        start: start,
                        end: end
                }
            }
    });

    dashboard.bind(control1, chart1);

    dashboard.draw(data);
}

function addToChart(chart, item)
{
    data.addRow(item);
    dashboard.draw(data);
    return;
    // code below this is full of bugs


    resize = false;

    //chart1.clearChart(); 
    //console.log(chart1.getHAxisValue(400));
    //console.log(chart1.getXLocation(400));
    // ALL OF THE ABOVE CALLS THROWS AN ERROR -> WHY?

    if (control1.getState().range.end == chart1.hAxis.maxValue)
    {
        resize = true;
    }


    if (resize)
    {
        control1.setState({start: control1.getState().range.start, end:      chart1.hAxis.maxValue})
    }
}