News and updates for 2021

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 lets 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 the purposes of 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[%{group}]}: %{global:data[%{group}]}',
            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 aren'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! Lets 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