RGraph is a JavaScript charts library based on HTML5 SVG and canvas. RGraph is mature (over 15 years old) and has a wealth of features making it an ideal choice to show charts on your website.

More »

 

Get the latest version of RGraph (version 6.17) from the download page. There's also older versions available, minified files and links to cdnjs.com hosted libraries.

More »

 

RGraph can be used for free under the GPL or if that doesn't suit your situation there's an inexpensive (£99) commercial license available.

More »

Hi,
i should dynamically pass the size based on the amount of input data using a myWidth variable that I pass to the responsive() function, if I set the myWidth variable with a preset value for example var myWidth = 3400; it works, if instead I examine the input data as in the following code it doesn't work:

    var myWidth = 1400;

    if (arrayValGraficoAsseX.length > 40 && arrayValGraficoAsseX.length <= 80) {
        alert("width 2400");
         myWidth = 2400;
    }
    if (arrayValGraficoAsseX.length > 80 && arrayValGraficoAsseX.length <= 140) {
        alert("width 3400");
        myWidth = 3400;
    }
    if (arrayValGraficoAsseX.length > 140 && arrayValGraficoAsseX.length <= 250) {
        alert("width 4400");
         myWidth = 4400;
    }

Try adding this before the if() statements:

$p(arrayValGraficoAsseX);

Not only will this alert() the contents of that variable - but it will also show you the type, which is important. It should be a number. If it's a string you can convert it to a number by doing this:

arrayValGraficoAsseX = parseInt(arrayValGraficoAsseX);

Also check your browsers JavaScript console for an error message - you can view the console in Chrome by pressing CTRL+SHIFT+J

Richard

Hello,
it still does not work. I'll give you an example referring to the code taking as an example a value of arrayValGraficoAsseX.length = 135:

var myWidth = 1400;

     if (arrayValGraphAxisX.length> 40 && arrayValGraphAxeX.length <= 80) {
         myWidth = 2400;
     }
     if (arrayValGraphAxisX.length> 80 && arrayValGraphAxeX.length <= 140) {
         myWidth = 3400;
     }
     if (arrayValGraphAxisX.length> 140 && arrayValGraphAxeX.length <= 250) {
    
         myWidth = 4400;
     }
    alert ("last width:" + myWidth);

the final alert message prints 3400 and it is correct but when I launch the program it gives me an error while if I set var myWidth = 3400; directly works

What is the error? And what do you get if you alert() the arrayValGraphAxisX variable, like this:

$p(arrayValGraphAxisX);

You can also log it to the console with this:

$cl(arrayValGraphAxisX);

Richard

Error message:

[RGRAPH] Warning: you have a negative bar width. This may be caused by the marginInner being too high or the width of the canvas not being sufficient.

I still need the length of the array arrayValGraficoAsseX.length to perform the check so even if it were not an integer it would not be a problem, printing arrayValGraficoAsseX.length is 135 them where I have the error message, then enter the second if and assign the width to 3400

That's due to there not being enough space for the number of bars. For example if your canvas tag is 1000px wide and you have margins at the default 35px then that leaves 930px for the bars. By default there's a margin either side of each bar so that leaves even less space for each bar.

So if you have more bars than the space available the bars are going to be a negative amount of pixels wide - which won't work.

What you can do is reduce the marginInner value to zero by putting this in your configuration:

...
marginInner: 0,
...

And, importantly, ensure that the width of the bars that you choose means that all of the bars can fit on the chart.

Start with a high value for the canvas size and gradually reduce it until you find the limit.

Richard

I rephrase the question.
So, I need to dynamically adapt the size of the chart as I sometimes have 5 data and sometimes 150. Having said that if in my specific case I give my chart size 1400 and I pass it 5 or 10 or 20 data it works, in case I pass 135 rightly gives me error. So giving the myWidth variables a value of 3400 the graph is again displayed correctly and with the scroll bar at the bottom and that's what I want.
Having said that it is necessary to give it the dimension dynamically otherwise I would have in some cases a giant chart with little data. For this reason I set the variable myWidth which will take a value based on the length of the input array and therefore the number of data, and I did this in the following way:

var myWidth = 1400;

     if (arrayValGraphAxisX.length> 40 && arrayValGraphAxeX.length <= 80) {
         myWidth = 2400;
     }
     if (arrayValGraphAxisX.length> 80 && arrayValGraphAxeX.length <= 140) {
         myWidth = 3400;
     }
     if (arrayValGraphAxisX.length> 140 && arrayValGraphAxeX.length <= 250) {
    
         myWidth = 4400;
     }
    alert ("last width:" + myWidth);

The problem is therefore the following, (with arrayValGraphAxisX.length = 135) if I delete the if and leave only var myWidth = 3400; the program works, if instead I leave everything as shown above to adapt the myWidth variable according to the data it does not work, why?

I hope I have been able to explain the problem.

You'll have to put the chart online and send me a link to it so that I can see what you're doing.

Richard

function mostraNascondiGrafico(arrayValGraficoAsseX, arrayDateLabelAsseX, arrayLimiti) {

    
    var canvas = document.getElementById('cvs');
    RGraph.reset(canvas);

    var spaceInner = 500 / arrayValGraficoAsseX.length;

    //default width
    var myMaxWidth = 1600;
    var myWidth = 1400;

    if ( arrayValGraficoAsseX.length > 40 && arrayValGraficoAsseX.length <= 80) {
        alert("Disegno width 2400");
        myMaxWidth = 2600;
        myWidth = 2400;
    }
    if ( arrayValGraficoAsseX.length > 80 && arrayValGraficoAsseX.length <= 140) {
        alert("Disegno width 3400");
        myMaxWidth = 3600;
        myWidth = 3400;
    }
    if ( arrayValGraficoAsseX.length > 140 && arrayValGraficoAsseX.length<= 250) {
        alert("Disegno width 4400");
        myMaxWidth = 4600;
        myWidth = 4400;
    }
    
    var myYScale = 80;
    if (arrayLimiti[0] != 0) {
        myYScale = parseInt(arrayLimiti[0]) + parseInt((arrayLimiti[0] / 3));
    }

    bar = new RGraph.Bar({
        id: 'cvs',
    
        data: arrayValGraficoAsseX,

        options: {
        
            title: 'Grafico',
            yaxisScaleMax: myYScale,
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            backgroundGridColor: '#999',
            xaxisLabels: arrayDateLabelAsseX,

            marginLeft: 55,
            marginRight: 55,
            marginBottom: 75,

            colors: ['Gradient(#A18AC5:#D1AAF5)'],
            textColor: '#ccc',
            xaxisTickmarksCount: 0,
            xaxis: true,
            yaxis: false,
            shadowColor: 'black',
            shadowOffsetx: 0,
            shadowOffsety: 0,
            shadowBlur: 15,
            colorsStroke: 'rgba(0,0,0,0)',
            combinedEffect: 'wave',
            combinedEffectOptions: '{frames: 30}'

        }
    });


    line = new RGraph.Line({
        id: 'cvs',
        data: arrayLimiti,
        options: {
            yaxisScaleMax: myYScale,
            xaxis: false,
            yaxis: false,
            backgroundGrid: false,
            colors: ['#d00'],
            yaxisPosition: 'right',
            textColor: '#ccc',
            marginLeft: 45,
            marginRight: 45,
            tickmarksStyle: null,
            spline: true,
            combinedEffect: 'trace',
            textSize: 18
        }
    });

    combo = new RGraph.CombinedChart([bar, line]).draw();

    line.set({
        yaxisScale: true
    });

    RGraph.redraw();

    bar.responsive([

{maxWidth: null, width: myWidth, height: 500, options: {textSize: 18, marginInner: spaceInner}},
{maxWidth: myMaxWidth, width: myWidth, height: 500, options: {textSize: 12, marginInner: spaceInner}}


    ]);

    line.responsive([
{maxWidth: null, width: myWidth, height: 500, options: {textSize: 18, marginInner: 45, linewidth: 7}},
{maxWidth: myMaxWidth, width: myWidth, height: 500, options: {textSize: 12, marginInner: 20, linewidth: 5}}

    ]);


    
}

I can't tell what the issue might be I'm afraid. I have a sneaking suspicion that the 3 variables that are passed in to your function are not what you expect so you could add this at the top of the function:

    $p(arrayValGraficoAsseX);
    $p(arrayDateLabelAsseX);
    $p(arrayLimiti);

That will show you the contents and types of the variables. You could also use this:

    $cl(arrayValGraficoAsseX);
    $cl(arrayDateLabelAsseX);
    $cl(arrayLimiti);

Which will log them to the JavaScript console.

If you can't put a sample HTML file online you could create *a functioning* example using http://codepen.io which shows the issue - you'll probably need to create an account first.

Richard

It is difficult for me to put online at http://codepen.io since I refer to data on mysql database. In general, the files arrayValGraficoAsseX, arrayDateLabelAsseX, arrayLimit in printed input are correct, they are simple arrays.
In general, deleting everything that has been said how do you give a dynamic width to a graph?

You don't need the real data - just add sample data - for example:

data_small = [4,5,3,5,8,5,6,4,5,5];

data_medium = [
    4,5,3,5,8,5,6,
    4,5,5,5,9,6,3,
    6,9,5,7,4,8,5,
    8,6,3,5,6,8,9,
    5,4,6
];

data_large = [
    4,5,3,5,8,5,6,
    4,5,5,5,9,6,3,,
    6,9,5,7,4,8,5,8,
    6,3,5,6,8,9,5,4,
    6,4,5,3,5,8,5,6,
    4,5,5,5,9,6,3,6,
    9,5,7,4,8,5,8,6,
    3,5,6,8,9,5,4
];

In terms of dynamic width, have you thought about setting the width of the canvas tag based on the number of items coming from your database by using your server-side scripting (eg PHP or ASP etc)?

eg

<?php
// $data is the data coming from your database
if (count($data) > 100) {
    $width = 2000;
} else {
    $width = 1000;
}

printf(
    '<canvas id="cvs" width="%d" height="500"></canvas>',
    $width
);
?>

Richard