Using query string data

• Introduction
• The available functions
• An example

Introduction

If you're passing data around via the query string that's going to be displayed on your charts then RGraph has a set of functions that will make this much easier for you.

These functions take the name of the query string parameter that you want and return the value to you in the desired format which can be a number, a string, a json object or a javascript array depending on your data and which function you use.

The available functions

The available functions are:

Numbers

RGraph.GET.number(name)
RGraph.SVG.GET.number(name)
This function will return a single number to you. The returned value is a Number type (remember the query string starts off as a string). An example of using it is:

<script>
    // URL: example.html?myNumber=-67.9
    
    var num = RGraph.GET.number('myNumber');
</script>

Strings

RGraph.GET.string(name)
RGraph.SVG.GET.string(name)
This function will return a string (text) to you. Naturally, the type of the variable will be String. An example of using it is:

<script>
    // URL: example.html?myString=someRandomText
    
    var str = RGraph.GET.string('myString');
</script>

Note that you may need to encode the URL when you generate it if it has non-URL-safe characters in it.

Arrays

RGraph.GET.array(name)
RGraph.SVG.GET.array(name)
This function will return an array of data to you. You can use it to get whole datasets from the query string. An example of using it is:

<script>
    //    URL: example.html?myArray=5,8,4,6,3,5,8
    // or URL: example.html?myArray=[5,8,4,6,3,5,8]
    // or URL: example.html?myArray=5|8|4|6|3|5|8
    
    // Get a normal, comma-separated list (with or without enclosing square brackets)
    var arr = RGraph.GET.array('myArray');
    
    // Or using the second parameter to specify the separator character
    var arr = RGraph.GET.array('myArray', '|');
</script>

Objects

RGraph.GET.json(name)
RGraph.SVG.GET.json(name)
This is undoubtedly the most useful of all these functions. It fetches an entire json object (a regular javascript object) from the URL. The advantage of passing an object around is that you can pass multiple bits of information at the same time - for example, both the data and also the labels. An example of using it is:

<script>
    // URL: example.html?myObject={"data":[5,4,3],"labels":["John","Luis","Bob"]}
    
    // Get the object from the URL
    var json = RGraph.GET.json('myObject');
    
    // And then in your chart configuration you can use json.data and json.labels
    // like in the example code below
</script>

Note 1

The json parsing function in javascript is strict in it's interpretation of json - so your strings must be enclosed by double-quotes - not single-quotes. So this would work:

sample.html?json={"data":[4,8,6,5,3,5,8],"labels":["Marry","Tarry","Parry","Gary","Harry","Larry","Barry"]}

But this would not (single-quotes are not allowed):

sample.html?json={'data':[4,8,6,5,3,5,8],'labels':['Marry','Tarry','Parry','Gary','Harry','Larry','Barry']}

Note 2

Also note that you should try to avoid spaces in json where they're not needed. This avoids you seeing lots of %20 encodings in the URL.

Note 3

If you're hoping to get pages indexed by Google, they've previously advised that you shouldn't use certain characters in URLs (for example: { } , [ ]). So this means that you shouldn't use json in these URLs.

An example

This is an example of using the RGraph.GET.json function (because it's the most versatile). It uses a URL like this:

querystring.html?json={"data":[4,8,6,6,3,5,9],"labels":["Mark","Craig","Rich","Pete","Luis","Bob","John"]}#an-example

<script>
    json = RGraph.GET.json('json');


    if(json) {
        new RGraph.Bar({
            id: 'cvs',
            data: json.data,
            options: {
                xaxisLabels: json.labels,
                xaxis: false,
                yaxis: false,
                backgroundGridVlines: false,
                backgroundGridBorder: false,
                responsive: [
                    {maxWidth: null, width: 700, height: 300, options:{textSize: 16, marginInner: 20}},
                    {maxWidth: 750, width: 400, height: 200, options:{textSize: 11, marginInner: 5}}
                ]
            }
        }).wave();
    }
</script>