RGraph is a JavaScript charts library based on HTML5 SVG and canvas. RGraph is mature (over 15 years old) and has a wealth of features making it an ideal choice to show charts on your website.

More »

 

Get the latest version of RGraph (version 6.17) from the download page. There's also older versions available, minified files and links to cdnjs.com hosted libraries.

More »

 

RGraph can be used for free under the GPL or if that doesn't suit your situation there's an inexpensive (£99) commercial license available.

More »

Am absolutely happy with the RGraph charts.
have 2 questions:
a. var scores = sheet.get('H2:K2'); Can I add a selection criteria as for example:
var scores = sheet.get('H2:K2') where score = 3;
b. can I use an URL variable as the selection criteria? Or use the URL variable as input for a graph?

thax in advance

Leo

a. You can't add selection criteria but you can easily do that with a for() loop after you fetch the data:

var row = sheet.get('H2:K2');

// Change values that aren't 3 to null, and populate a new
// array (row2) with those values.
for (var i=0,row2=[]; i<row.length; ++i) {
    if (row[i] !== 3) {
        row[i] = null;
        row2.push(row[i]);
    }
}

b. I don't know your setup so there are two possibilities I can think of. You could get the variable from the URL using server-side scripting (for example PHP). So that would change the above code to:

for (var i=0,row2=[]; i<row.length; ++i) {
    if (row[i] !== <?php echo intval($_GET['myVariable']) ?>) {
        row[i] = null;
        row2.push(row[i]);
    }
}

An example URL would be:

/foo.php?myVariable=3



Another way would be to use JavaScript:

var params = new URLSearchParams(location.search);
var myValue = params.get('myVariable');
    myValue = Number(myValue);

for (var i=0,row2=[]; i<row.length; ++i) {
    if (row[i] !== myValue) {
        row[i] = null;
        row2.push(row[i]);
    }
}