How do I move the x axis like a window in google chart while x increases

Question

I would like to draw a chart to my html, the chart I am using is google chart. However, while my x value is increasing, the chart is getting bigger. But I just want a fixed size window which increase both minimum x value and maximum x value. Like sliding window.

The attachment below is my code. This is the js code which updates the gets the value and updates the chart

// load google charts library
google.load("visualization", "1", {packages:["corechart"]});

// for rest, walk, fast_walk data
var data, options, chart;

var xMin = 0;
var xMax = 10;

var i = 0;


/* initialize chart1 - rest, walk, fast_walk data */
function drawChart(data, options) {
    var chart = new 
    google.visualization.LineChart(document.getElementById('data-container'));
    chart.draw(data, options);
    return(chart);
}

/* update the chart1 - rest, walk, fast_walk data */
function updateChart(percentage) {
    i = (i + 1);

    data.addRow([
        ""+i,
        percentage
    ]);

    if(xMax >= 9) {
      xMin + 1;
    }
    xMax + 1;

    chart.draw(data, options);
}

$(function() {

    data = google.visualization.arrayToDataTable([
        ['Time', 'percentage'],
        ['0', 0],
    ]);

    options = {
        title: 'Energy data',
        "curveType": "function",
        vAxis: {
          min: xMin,
          max: xMax
        }
    };

    chart = drawChart(data, options);
});


/* reset charts */
function reset(){
    i = 0;

    data = google.visualization.arrayToDataTable([
        ['Time', 'percentage'],
        ['0', 0],
    ]);

    options = {
        title: 'Energy data',
        "curveType": "function",
        hAxis: {
          viewWindow: {
              min: 0,
              max: 10
          }
        }
    };

    chart = drawChart(data, options);
}

I am wondering if it can be designed into a sliding window, so that the x value doesn't stick with the minimum value 0. instead if we want to see the earliest value, we can just scroll left.

Answer 1

According to the documentation at [https://developers.google.com/chart/interactive/docs/gallery/linechart]

/* copied from site*/
var options = {
    chart: {
      title: 'Box Office Earnings in First Two Weeks of Opening',
      subtitle: 'in millions of dollars (USD)'
    },
    width: 900, //<--- set fixed width like so
    height: 500
  };

To get a scrollable div,you can wrap your chart inside another div

<div class='h-scrollable' > <!---- chart code here ----> </div>

and for css

.h-scrollable {
    width: 100%;
    overflow: hidden;  // only if you don't want y axis to be scrollable
    overflow-x: auto;
}

Now, for the chart give a width depending on the number of x values you have. You could do a mathematical computation by taking the width of the h-scrollbale div in javascript and dividing it by number of x-points you want in a window and then multiplying it with total x values you have and setting it as chart width.

Update: inititally get the width of h-scrollable as let viewWidth = document.querySelector(".h-scrollable").offsetWidth [refer : How to find the width of a div using raw JavaScript?

Then if you want to show 10 x values in a view, divide viewWidth by 10 to get one xWidth. Now you can re-render the chart each time by setting width as no.of X values * xWidth so that it scrolls accordingly

Answer 2

Upon each update, you can just remove the first raw.