Using query string data
From version 6.06 RGraph has a set of functions that are targeted at making getting hold of data from the query string easy for you. There are functions to read numbers, strings (text), lists/arrays and JSON. This documentation also applies to the SVG versions of these functions.
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 aNumber
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 beString
. 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
Note 1json.data
andjson.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"]}
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 2Also note that you should try to avoid spaces in JSON where they're not needed. This avoids you seeing lots of
Note 3%20
encodings in the URL.If you're hoping to get pages inexed 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). Click the link
below to add some JSON to the URL and the chart that it
produces will appear:
<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 } }).wave().responsive([ {maxWidth: null, width: 700, height: 300, options:{textSize: 16, marginInner: 20}}, {maxWidth: 750, width: 400, height: 200, options:{textSize: 11, marginInner: 5}} ]); } </script>