• DOWNLOAD
• DEMOS
• SVG
• CANVAS

• BLOG
• ABOUT
• DONATE
• SUPPORT
  
  

A new HTML table import utility for version 6.03

After a suggestion by a user, RGraph now has an import utility that fetches data from an HTML table (on the same page). This can make getting data into RGraph even easier than before. All you have to do is give it the id of the table (the HTML tag attribute) and RGraph will fetch the table and parse it into a usable form.

Actually, you don't even have to do that - you can, instead of the id, give the constructor a string that contains the table tag and RGraph will turn it into a usable <table> tag and then provide access to the data contained in it.

Here's an example of the code:

<script>
    // Pass the RGraph.HTMLTable constructor the ID (the HTML attribute) of the
    // table and a callback function which creates the chart. The callback function
    // is passed the RGraph.HTMLTable object as the only argument. You can then use
    // the API functions to get to your data.
    new RGraph.HTMLTable('myTable', function (table)
    {
        // Use the column() function to get the labels
        // and the two columns of data
        var labels  = table.column(0, 1), // Column index (starts at zero), start row (starts at zero)
            col1    = table.column(1, 1), // Column index (starts at zero), start row (starts at zero)
            col2    = table.column(2, 1), // Column index (starts at zero), start row (starts at zero)
            numrows = table.numrows,      // Number of rows in the table (including headers and footers)
            numcols = table.numcols,      // Number of columns in the table
            data    = [];                 // The data-array-to-be (it will be populated from the col1 and col2 variables)

        // Combine the two columns into one data array that
        // can be passed to the Bar chart object
        for (var i=0; i<col1.length; ++i) {
            data.push([col1[i], col2[i]]);
        }


        // Now, create the chart
        var bar = new RGraph.Bar({
            id:'cvs',
            data: data,
            options: {
                yaxis: false,
                xaxis: false,
                xaxisLabels: labels,
                marginInner: 5,
                marginBottom: 15,
                colors: ['#666', '#7CB5EC'],
                backgroundGridBorder: false,
                backgroundGridHlines: false,
            }
        }).grow({frames: 45}).responsive([
            {maxWidth: null, width: 650, height: 250, options:{textSize: 14},parentCss:{'float':'right'}},
            {maxWidth: 750, width: 400, height: 200, options:{textSize: 10}, parentCss:{'float':'none'}}
        ]);
    });
</script>

Version 6.02 of RGraph is now available

A little earlier than I was planning but Google's update to v4 of the Sheets API has forced my hand. The Sheets connector wasn't working any longer so I had to update it (all three copies!) and there are also a few other minor things that you can read about on the changelog page

You can download RGraph as usual from the download page:

Version 6.01 of RGraph is now available

Happy release day! Version 6.01 is now available from the download page.

You can read the full list of changes on the changelog page. This is a minor release so there are no ground-breaking changes that are worthy of mention. But the changes that are included are definitely worth noting so by all means take a read!

You can download RGraph as usual from the download page:

Apache mod_rewrite? Pah! Rewriting URLs without using mod_rewrite

If there's anything that strikes fear into many-a-developers heart and turns it to stone, it's having to face the prospect of writing mod_rewrite Apache directives. Actually, it may just be me, but I really don't like it.

So why do it at all? I've just converted the RGraph website to use a different way of doing things that is far more straightforward and easier to handle, particularly if you're comfortable with a server-side scripting language like PHP.

I've been using PHP now for over 20 years and whilst I'm not fully au-fait on recent versions or additions to the language (the last version I used as a fully-paid-up server-side developer was around the version 5.2 era) I'm still very confident with it when you compare it with something like, say, Apache configuration. Particularly my hosting company's version of it which I'm adamant is not a standard implementation.

So imagine my sheer delight when I had the random thought (which I presume others might have had long, long ago) of handling rewrites with PHP. Oh, how wonderful that would be. So that's what I've done with the RGraph website and oh how well it works! It's so much easier to work with from day to day and has the potential to save a lot of time and heartache.

How does it work?

It's very simple to implement and involves a small snippet of Apache configuration (which is not that difficult to understand) and a PHP script (which can be as simple or as complex as you wish).

This small snippet of Apache configuration can go in a .htaccess file and, in my case, goes in the .htaccess file in each directory (I only have a small number of directories on the website). This example is from the .htaccess file which is located in the /blog directory.

RewriteEngine On
RewriteBase /blog
RewriteCond %{REQUEST_URI} !-d
RewriteCond %{REQUEST_FILENAME} !\.(png|gif|jpg|jpeg|css|js|ttf|xml|bz2|gz|tar|zip|csv)$
RewriteRule  .* _router.php [L]

Now, breaking that down, the first line turns on mod_rewrite, the second line (which may or may not be required - I'm sure that I've not used it in the past) sets the directory (this file is located in the /blog directory remember) and the third, fourth and fifth lines are the rewrite rules which send everything to the _router.php PHP script. Let's break down that rule (RewriteRule .+ _router.php [L]):

The RewriteRule is the name of the directive, the .+ matches the filename (one or more characters in this case - so any filename) and the _router.php is the name of a PHP script (located in the /blog directory) that handles the job of looking at the request and deciding what to do with it. the [L] flag tells mod_rewrite that this is the last rule. It's not really needed in this case as there's nothing else in the .htaccess file.

So what happens then? Well, in the _router.php script, it's a simple matter of either redirecting to a different URL or, if you want to keep the URL in the navigation bar, show the correct content. So you can:

1. Redirect by sending the relevant HTTP headers like this:

   http_response_code(301);                        // Send a permanent redirect response code
   header('Location: ' . '/some/where/else.html'); // Send the new location header
   exit;                                           // End the PHP script
   

2. Show the relevant content. In this case, if you want to keep the URL in the address bar, you can use the require() or include() PHP functions to show the correct content like this:

   $file = basename($_SERVER['REQUEST_URI']);
   
   if ($file === 'authors') {
       require('authors.html');
       exit;
   }
   

   Or alternatively if the file exists on your filesystem you could just show it:

   $file = basename($_SERVER['REQUEST_URI']);
   
   if (file_exists($file) {
       require($file);
       exit;
   }
   

What happens with subdirectories?

If you have a .htaccess file and a _router.php in the /blog directory (for example) then due to the way that .htaccess files are handled by Apache, the /blog/.htaccess file will be checked even when you're requesting a file in a subdirectory.

So if you request the file /blog/foo/bar.html in your browser then the /blog/.htaccess will be checked and the /blog/_router.php file (or whatever you may have called it) will be called. In that case, the $_SERVER['REQUEST_URI'] PHP variable will contain the full address of the page, which in this example is /blog/foo/bar.html.

What if I've turned off override files?

If you've turned off override files (.htaccess is an override file) then this method provides an extra advantage. Normally, editing the server configuration files requires you to restart the server for any changes to be picked up but with this method, you wouldn't be editing the server configuration files to add a redirect/rewrite. You would add the above configuration once and then to add a new redirect/rewrite or to modify an existing one you can just change the _router.php file and the new change is effective immediately.

Performance considerations

Unless your server is experiencing meltdown levels of traffic then you're unlikely to notice any difference in performance. The extra versatility that this method brings (especially if you're comfortable with PHP) compared to having to struggle with Apache configuration and mod_rewrite directives is well worth it in my opinion.

A 3D Line chart demonstration

Here's a novel new demonstration of a chart: A 3D Line chart with multiple datasets. This is not a natively supported type of chart though the code to create it, whilst big, is not complicated and it's fully annotated so you should find it easy to follow.

The next release will feature it as part of the demos that come with RGraph which are located in the demos/ folder and it will be called: demos/line-chart-3d.html. Here's an image showing it and you can see the demo in its full glory by following the link below to a codepen of it.

View the chart on codepen.io...

What's new with RGraph at the moment?

It's been a month and a bit since the last release so here's an update on what's been added to RGraph recently. There's not a huge amount - but perhaps that's a sign that RGraph is close to being perfect...? Yes, let's go with that.

• There are now some pseudo-constants that you might be able to make use of. Obviously (older) JavaScript implementations don't have constants - so really they're just variables with an all-capitals naming convention. They are: RGraph.MONTHS_SHORT RGraph.MONTHS_LONG RGraph.DAYS_SHORT RGraph.DAYS_LONG RGraph.HOURS24 RGraph.HOURS12
• Both the Line and Scatter charts can now add a trendline to your data if you wish. An example of the Line chart using a trendline is shown on the RGraph Facebook page. The options that control the trendline are as follows:
  • trendline
  • trendlineColors
  • trendlineLinewidth
  • trendlineMargin
  • trendlineDashed
  • trendlineDotted
  • trendlineDashArray
  They're pretty self-explanatory though the documentation describes each one and will be available with the release of version 6.01.
• The Scatter chart now has an explode effect. With this effect, the marks on the chart explode outwards from a point on the chart (top-left, top-center, top-right, center-left, center-center, center-right, bottom-left, bottom-center or bottom-right).
• The RScatter chart also now has an explode effect. Similar to the Scatter chart, with this effect the marks on the chart explode outwards from the center of the chart.

Also, whilst not strictly a change to RGraph, it's definitely worthy of mention that RGraph can now be found on GitHub (the source control website used by many, many developers).

So there you go - not a great deal happening with RGraph at the moment but development is most definitely still occurring, albeit at a somewhat slower pace. I've pegged the next release for July - though if you can't wait you could grab the source code for a particular library from the GitHub repository (link above). If you do then remember that you may also need to get the common core library as well as the chart library that you want.

An attractive new Horizontal Bar chart demo

Now that the majority of the demos are no longer online I've stopped making new demos as frequently - but here's a new Horizontal Bar chart demo that can be made with the existing release - version 6 - so you could take the source code that you see below and make your own demo if you wanted to. It's just a normal Horizontal Bar chart but it uses a vertical Bar chart behind it to get the background bars. It's animated, though to see it you need to click the button that's below the chart (because when the page loads the chart is out-of-sight). Here's the chart:

<!-- Load all of the necessary RGraph libraries -->
<script src="RGraph.common.core.js" ></script>
<script src="RGraph.common.dynamic.js" ></script>
<script src="RGraph.common.tooltips.js" ></script>
<script src="RGraph.bar.js" ></script>
<script src="RGraph.hbar.js" ></script>

<!--
  The chart itself only requires the canvas. The container <div>
  and the button are just there for this website
  and the animation.
-->
<div style="text-align: center; margin-top: 50px">
    <canvas id="cvs_hbar_fortune_500" width="820" height="250">[No canvas support]</canvas><br />
    <button style="font-size: 16pt; cursor: pointer" onclick="hbar_fortune_500.grow({frames: 45})">Animate!</button>
</div>

<script>
    // This is used for both the tooltips and the Y-axis labels
    countries = ['US','China','Japan','France','Germany','Britain','Switzerland','Netherlands','South Korea','Canada','Australia','Italy','India','Brazil','Spain','Russia','Taiwan','Sweden'];
    
    // The data that's shown on the HBar chart
    data      = [134,103,52,29,28,25,15,12,15,11,8,9,7,7,9,5,7,3];

    // The Bar chart is used to get the background vertical bars
    bar_fortune_500 = new RGraph.Bar({
        id: 'cvs_hbar_fortune_500',
        data:[1,0,1,0,1,0,1],
        options: {
            backgroundGrid: false,
            marginInner: 0,
            xaxis: false,
            yaxis: false,
            yaxisScale: false,
            marginBottom: 5,
            marginTop: 5,
            marginRight: 5,
            colors: ['#ccc']
        }
    }).draw();

    // The HBar configuration
    hbar_fortune_500 = new RGraph.HBar({
        id: 'cvs_hbar_fortune_500',
        data: data,
        options: {
            xaxisLabelsCount: 7,
            xaxisLabelsSize: 10,
            xaxisLabelsOffsety: 5,
            xaxisPosition: 'top',
            xaxisTitle: 'Number of Fortune 500 company\'s by country',
            xaxisTitleSize: 16,
            xaxisScaleMax: 140,
            yaxisLabels: countries,
            yaxisLabelsSize: 8,
            xaxis: false,
            yaxis: false,

            backgroundGrid: false,
            colors: ['black'],
            
            marginInner: 1,
            marginBottom: 5,
            marginTop: 5,
            marginRight: 5,
            
            // Use tooltip templates to specify the tooltips
            tooltips: '<i style="font-size: 12pt">July 2019 count:</i><br />%{global:countries[%{dataset}]}: %{global:data[%{dataset}]}',
            tooltipsPointer: false,
            tooltipsEvent: 'mousemove',
            tooltipsEffect: 'none',
            tooltipsPositionStatic: false,
            
            // Add some CSS that's applied to the tooltips
            tooltipsCss: {
                paddingTop: 0,
                backgroundColor: 'rgba(255,255,255,0.9)',
                color: 'black',
                border: '2px solid black',
                fontSize: '20pt',
                pointerEvents: 'none'
            }
        }
    }).draw()
    
    // Add the responsive configuration so that the chart
    // fits on smaller screens
    hbar_fortune_500.responsive([
        {maxWidth: null, width: 600, height: 250},
        {maxWidth: 900, width: 400, height: 150}
    ]);
    
    // Set the bar chart left margin to the same as the hbar.
    bar_fortune_500.set(
        'marginLeft',
        hbar_fortune_500.get('marginLeft')
    );
    
    RGraph.redraw();
</script>

Version 6.0 of RGraph is now available

Happy release day! Version 6.0 of RGraph is now available. That's right - a major version increment!

There isn't, however, a bucket-load of breaking changes (I'm sure you'll be glad to hear). The reason for the major version increment is because, from version 6.01, I'll be starting to use features from JavaScript ES6 in the codebase.

I won't be going back and changing the entire codebase, however, I'll be simply making use of the new features as and when the opportunity arises.

You can read the full list of changes on the changelog page and you can download RGraph as usual from the download page:

RGraph is now on GitHub!

After years of denial and confusion by it, RGraph is finally available from GitHub. It's far from a complete switch and initially, it will purely be me uploading each new release. But it's a start! Maybe one day my entire working process will be based around GitHub - though that won't happen any time soon.

Currently, my working environment for developing RGraph is tied very closely to my hosting and the RGraph website which is based on a Linux environment. And trying to incorporate Git into that is not going to be a simple task.

But that will change given time I guess and hopefully, it will become more tied to GitHub. But for now, I'll be updating GitHub with each new release - so the next update will be version 6.0.

A new version of RGraph: version 5.28

Happy release day! Both of you! The time has come, after two whole months, to bring out a new version of RGraph - version 5.28.

Not much has changed in this release but there are three new meters available - the Activity meter, the Horseshoe meter, and the Segmented donut. The Activity meter can show multiple values whilst the other two can both show a single value.

All of the new meters have different aesthetics and the Activity meter can be further customised to look how the old Radial Progress meter looked. There's a demo of this in the download archive.

Other changes include the addition of new and renames of existing properties for labels, additions to the default colors of the Bipolar chart, improvements to tooltip positioning for the Bar, Bipolar, Horizontal Bar and SVG Bar charts and the addition of a CSS class for the X-axis labels (this may help when trying to retrieve the label DOM nodes with the API function document.getElementsByClassName()).

You can read the full list of changes on the changelog page and you can download RGraph as usual from the download page.

What's next for RGraph? Well - I'm planning to update the version number of RGraph from 5.28 straight up to 6.00 for the next release.

There won't be any ground-breaking changes - it will be a significant version increment because from the next release I plan to start using JavaScript ES6 features in the RGraph code.

This does not mean, however, that I'll be going back through all of the libraries and altering things. I plan to simply start making use of the new language features in new code. Some of the new features of ES6 that look interesting are:

• Array and object destructuring
• Block scoping for variables
• Arrow functions
• Rest parameters
• for/of loops

https://www.rgraph.net/download.html

A new year - a new version of RGraph!

Happy 2021 everybody! Let's hope that it's a better year than 2020 - but that won't be difficult to achieve, will it?!

Let's start the year with a brand new fresh release of RGraph! So I've released version 5.27. This version features an overhaul of the responsive() function - changing it from using the window.onresize function/event to the newer window.matchMedia API. This is a programmatic way to install media queries using JavaScript.

The other additions and changes in this release are more minor and you can read about them in the changelog.

https://www.rgraph.net/download.html