JSFiddle - React, Tailwind, and code Playground

by heennkkee

HTML

<script src="https://www.google.com/jsapi?ext.js"></script>
<div id="chart_div"></div>
<div id="text_div">Displaying row 3 to 5</div>
<input onClick="redrawChart(-1)" type="button" value="<- Left" />
<input onClick="redrawChart(1)" type="button" value="Right ->" />

JavaScript

google.load('visualization', '1.1', {'packages': ['controls']});

var showRows = [2, 3, 4]
var maxRows = 0

// Define maxRows to the returned number of the function drawChart
google.setOnLoadCallback(function () {
    maxRows = drawChart(showRows)
});

// redraws chart, either plus or minus depending on what "a" is defined as.
function redrawChart(a) {
    for (i = 0; i < showRows.length; i++) {
        showRows[i] += a
    }
    
    // If the middle value is 0 or less, all rows will be displayed.
    if (showRows[1] <= 0) {
        showRows[0] = -1
        showRows[1] = 0
        showRows[2] = 1
    }
    
    //If the middle value is maxRows or more, all rows will be displayed
    if (showRows[1] >= maxRows) {
        showRows[2] = maxRows + 1
        showRows[1] = maxRows
        showRows[0] = maxRows - 1
    }
    //Change description text
    document.getElementById("text_div").innerHTML = "Displaying rows " + (showRows[0] + 1) + " to " + (showRows[showRows.length - 1] + 1)
    //redraw chart, throwin in which rows to show
    drawChart(showRows)
}

function drawChart(rowsToShow) {
    // defining the data
    var data = google.visualization.arrayToDataTable([
        ['Number', 'Potatoes'],
        ['One', 12],
        ['Two', 20],
        ['Three', 7],
        ['Four', 54],
        ['Five', 22],
        ['Six', 3],
        ['Seven', 42],
        ['Eight', 33]
    ]);
    
    //How many rows are there?
    var numberOfRows = data.getNumberOfRows() - 1

    // Are you trying to show an invalid row? Display all instead.
    for (i = 0; i < rowsToShow.length; i++) {
        if (rowsToShow[i] < 0) {
            rowsToShow = null
            document.getElementById("text_div").innerHTML = "Displaying all rows"
            break;
        }
        if (rowsToShow[i] > numberOfRows) {
            rowsToShow = null
            document.getElementById("text_div").innerHTML = "Displaying all rows"
            break;
        }
    }

    // Options for the chart
   ...