How do I display negative values on a Line chart?


« 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 Pawan on 31st December 2017
Hi,

In my use case, I am creating a line graph in php using RGraph.
I have few negative values in database.
I want to display it in graph below x-axis
Any Help..?

Thanks
Pawan
Posted by Richard on 31st December 2017
Hi there,

With the canvas Line chart you can either set the Xaxis to be in the center using the xaxispos setting or like these demos show you can use the ymin/ymax properties to to get an offset X axis (where the X axis is not dead center):

www.rgraph.net/demos/line-offset-x-axis-inverted.html
www.rgraph.net/demos/line-offset-x-axis.html
www.rgraph.net/demos/line-offset-x-axis2.html

And with the the SVG Line chart you can use the yaxisMax and yaxisMin properties so that you get an effect like this:

www.rgraph.net/demos/svg-line-dynamic.html
www.rgraph.net/demos/svg-line-tooltips.html


Richard
Posted by Pawan on 1st January 2018
Thanks Richard,

In that case i need dynamic Y-Axis, i don't want fixed Y-axis because value fetched from database and i can't fix Y axis.

Thanks
Pawan
Posted by Richard on 1st January 2018
Hi there,

"dynamic Y-Axis" how? The maximum value of charts is, by default, calculated from the data that you give it.


Richard
Posted by Pawan on 1st January 2018
Hi Richard,

I am fetching data from mysql db.
and showing line graph where Y-axis values are fetching from DB.
for Some records there are min value is -53 and max value is 79 and for few records min value is -69 and max value is 93.
So I cant provide a fixed value for yMin and yMax.

it is something like below:

Site Time reading
Site1 1 AM 59
Site1 2 AM -53
Site1 3 AM 73
Site1 4 AM 79
Site1 5 AM -50

Site2 1 AM -90
Site2 2 AM 75
Site2 3 AM 53


In above sample, I am showing time on X-axis and reading on Y-axis.

Hope this will be clear what I asking for.

Thanks
Pawan
Posted by Richard on 1st January 2018
Hi there,

Well you could determine the maximum absolute value by looping through the data and using Math.abs() and set the yaxisMax property to that and set the minimum value to 'mirror'

Like this:

data = [15,18,16,-51,32,56,-78];

for (var i=0,max=0; i<data.length; ++i) {
     var val = Math.abs(data[i]);

     max = Math.max(val, max);
}

var max = Math.ceil(max / 10) * 10;

And the set the yaxis Max and min properties appropriately:

var bar = new RGraph.SVG.bar({
     id: 'cc',
     data: data,
     options: {
         yaxisMax: max,
         yaxisMin: 'mirror'
     }
}).draw();

Richard
Posted by Pawan on 1st January 2018
Hi Richard,

Thanks for your help.
It resolves my problem.

One more thing that there are one property textAngle in RGraph.Line, i am looking for similar property in RGraph.SVG.Line.
Is there any option to set the text angle in RGraph.SVG.Line ?

Thanks
Pawan
Posted by Richard on 1st January 2018
Hi there,
You can't set the text to bw angled in SVG charts.

You can have multiple lined text though by using \r\n in your text.

Richard

Add a reply




« Back to message list