RGraph is a JavaScript charts library based on
HTML5 SVG and canvas. RGraph is mature (over 16 years
old) and has a wealth of features making it an ideal
choice to use for showing charts on your website.
Get the latest version of RGraph (version 6.20, 1st December 2024) from
the download page. You can read the changelog here. There's also older versions available,
minified files and links to cdnjs.com hosted libraries.
Posted by Roberto at 19:30 on Sunday 25th April 2021[link]
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:
Posted by Richard at 10:20 on Monday 26th April 2021[link]
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:
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
Posted by Richard at 11:13 on Monday 26th April 2021[link]
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
Posted by Roberto at 11:33 on Monday 26th April 2021[link]
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
Posted by Richard at 13:02 on Monday 26th April 2021[link]
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
Posted by Roberto at 13:21 on Monday 26th April 2021[link]
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:
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.
Posted by Richard at 15:10 on Monday 26th April 2021[link]
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
Posted by Roberto at 16:05 on Monday 26th April 2021[link]
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;
Posted by Richard at 16:37 on Monday 26th April 2021[link]
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:
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
Posted by Roberto at 16:54 on Monday 26th April 2021[link]
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?
Posted by Richard at 17:13 on Monday 26th April 2021[link]
You don't need the real data - just add sample data - for example:
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;
}