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:

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

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

<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>

<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>

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"]}

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

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.

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>