Advice requested on adding configuration parameters in this code

Share RGraph:   Share or Like RGraph on Facebook!

« Back to message list

Enter your email address to get email updates on this topic. You can stop receiving updates by clicking the link in the update email messages.

Posted by Paul on 3rd February 2016
Hi

I'm a novice to RGraph and have only just started to use within the past few days.
I'd like some advice on this code which works perfectly OK but I want to know where to add some additional parameters. I want to change size of text and font using 'textsize' and 'textfont' but not sure where to place in the code... could anyone advise.. thanks

!DOCTYPE html>
<html>
<head>

     <title>A basic Bar chart using CSV data</title>

     <meta name="description" content="A basic example of an RGraph Bar chart that uses AJAX to fetch a CSV file and then parses it with

Javascript" />
     <meta name="googlebot" content="NOODP">

     <!-- 1/3. Include the RGraph libraries -->
     <script src="/libraries/RGraph.common.core.js" ></script>
     <script src="/libraries/RGraph.bar.js" ></script>
     <!--[if lt IE 9]><script src="../excanvas/excanvas.js"></script><![endif]-->

</head>
<body>

     <h3>uses AJAX to request a CSV file from the server</h3>

     <!-- 2/3. This is the canvas that the graph is drawn on -->
     <canvas id="cvs" width="400" height="200">[No canvas support]</canvas>

     <!--
         3/3. This creates and displays the graph. As it is here, you can call this from the window.onload event,
              allowing you to put it in your pages header.
     -->
     <script>
         window.onload = function ()
         {
             /**
             * This is the callback for the AJAX request
             */
             var callback = function ()
             {
                 // Parse the AJAX result text
                 var data = this.responseText.split(/\r?\n/);
                 var labels = [];
                
                 // Handle the response
                 for (var i=0; i<data.length; ++i) {
                     var row = data[i].split(/,/);
                     labels.push(row[0]);

                     var newrow = [];

                     for (var j=1; j<row.length; ++j) {
                         newrow.push(Number(row[j]));
                     }

                     data[i] = newrow;
                 }

                 var bar = new RGraph.Bar('cvs', data)
                     .Set('grouping', 'stacked')
                     .Set('labels', labels)
                     .Set('colors', ['#336699','#FFCC33','yellow','pink','black','gray','green'])
                     .Draw();
             }


             /**
             * Make the AJAX call that fetches the CSV data
             */
             RGraph.AJAX('/vocdata.csv', callback);
         }
     </script>
</body>
</html>
Posted by Richard on 3rd February 2016
Hi,

Add it with the rest of the configuration parameters like this:

var bar = new RGraph.Bar('cvs', data)

     .set('textFont', 'Verdana')
     .set('textSize', 16)

     .set('grouping', 'stacked')
     .set('labels', labels)
     .set('colors', ['#336699','#FFCC33','yellow','pink','black','gray','green'])
     .draw();



Richard
Posted by Paul on 3rd February 2016
thanks for reply... It's working OK now

for the parameter values should they be enclosed in quotes
.set('textSize', 6)
or
.set('textSize', '6')

both options seem to work but what is best practice

regards
Paul
Posted by Richard on 3rd February 2016
Hi,

> for the parameter values should they be enclosed in quotes
> .set('textSize', 6)

This is more of a general JavaScript issue and the answer is no - numbers shouldn' (usually) be enclosed in quotes (either single or double quotes).

The reason is that when you enclose the number in quotes it actually becomes a string that just looks like a number.

JavaScript, being the forgiving beast that it is, will auto-convert it for you most of the time, but sometimes this can lead to unexpected results - so it's best to just avoid the issue entirely and be explicit. If you want a number then use a number.

So:

var myNumber = 56; // A number
var myString = '56'; // A string (text)


You can see the types are distinct if you do this:


alert(typeof myNumber);
alert(typeof myString);


So the thing to remember is: If you want to specify a number then don't use quotes. In RGraph this could be:

var bar = new RGraph.Bar('cvs', [4,8,6,3,5])
     .set('gutterTop', 5)
     .set('gutterRight', 5)
     .draw();


Richard

Add a reply




« Back to message list