How do I add min/max markers for the Thermometer 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 Othmar on 27th December 2016
Hi Richard.

Is it possible to add some min and max marker on the side of the thermometer. (for day min max value signalisation)
Do you have a idea how i can add some marker?

Thanyks for all your great graphs!

Othmar
Posted by Richard on 27th December 2016
Hi there,

Something like this?

www.rgraph.net/fiddle/view.html/a-thermometer-with-markers





Richard
Posted by Othmar on 27th December 2016
Hi Richard,

YES this is exact what i have searched. But how can i redraw the path after ajax request.

I have to recalc the size of the arrow after first draw.
Currently i have calculated it like:

   //min arrow
   var markerval = width /14;
   var path1 = 'b lw 3 m '+ (3*markerval) +' % l '+(markerval)+' % l '+(markerval)+' % c f rgba(89,89,255,0.8)';
   rect[id] = new RGraph.path2(
                     obj.context,
                       path1 ,
                       ya,
                       ya - markerval,
                       ya + markerval
   );

I have add a little fiddle for redraw this. jsfiddle.net/6851phqr/2/

Thank you
Othmar
Posted by Richard on 28th December 2016
Hi there,

Just here:

$(document).ready( function() {
     $("button").click(function()
     {
         var test = (Math.random() * (100)) ;
        
         // how can i redraw the arrow??
     });
});

Where your comment is just add this:


RGraph.redraw();


So it looks like this:


$(document).ready( function() {
     $("button").click(function()
     {
         var test = (Math.random() * (100)) ;
        
         // how can i redraw the arrow??
         RGraph.redraw();
     });
});




Richard
Posted by Othmar on 28th December 2016
Hi Richard

Thank you for you answer.
I need the syntax to set the parameter of the arrow new. (at redraw)

    var markerval = width /14;
    var path1 = 'b lw 3 m '+ (3*markerval) +' % l '+(markerval)+' % l '+(markerval)+' % c f rgba(89,89,255,0.8)';
    arrow = new RGraph.path2(
                      obj.context,
                        path1 ,
                        ya,
                        ya - markerval,
                        ya + markerval
    );

I meen this - jsfiddle.net/6851phqr/4/

parameter ya and markerval are dynamically. i want to set it. I hope you know what i mean.

(normaly it would be arrow.set(.... but i did not know the syntax) - found nothing in manual.
Best Regards
Othmar




Posted by Richard on 28th December 2016
Hi there,

I can't tell what you're asking for, but I've updated the example so that you can click a button and it will update the chart:


www.rgraph.net/fiddle/view.html/a-thermometer-with-markers




Richard
Posted by Othmar on 28th December 2016
Hi

There are no button at: www.rgraph.net/fiddle/view.html/a-thermometer-with-markers

Othmar
Posted by Othmar on 28th December 2016
Hi

Forget my last post. You have updated it a view seconds later...

Othmar
Posted by Othmar on 31st December 2016
Hi Richard

Have found a "bug". If scale is nagative (thermometer belob 0 grad) the obj.getYCoord(obj.value) is calculated wrong.
See: jsfiddle.net/tzbzb6dh/2/
Position is below thermometer.
Do you have a update or fix for this circumstance?

Happy new year
Othmar
Posted by Richard on 31st December 2016
Hi there,

I'll take a look at that for the next version. Have you tried a regular progress bar instead?




Richard
Posted by Othmar on 1st January 2017
Hi Richard

Vprogress with negative values is much more strange. See: jsfiddle.net/tzbzb6dh/4/
There are wrong scale values! ;-)

Have a Happy new Year,
Othmar
Posted by Richard on 1st January 2017
Hi,

You could use a formatter function to solve that one:



...
scaleFormatter: function(obj, num)
{
     if (parseInt(num)) {
         num = '-' + num;
     }
     return num;
},
...

EDIT Oh and use Math.abs() to convert all the values to positive. The whole code is here:

var progress = new RGraph.VProgress({
     id: "cvs",
     min: 0,
     max: 10,
     value: 4,
     options: {
       scaleFormatter: function(obj, num)
       {
           if (parseInt(num)) {
                num = '-' + num;
           }
           return num;
           },
      scaleVisible: true,
     }
}).on('draw', function (obj){

   var y = obj.getYCoord(obj.value);

     RGraph.path2(
         obj.context,
         'b lw 3 m 80 % l 95 % l 95 % c f blue',
         y,
         y - 10,
         y + 10
     );
}).grow();


Richard
Posted by Othmar on 1st January 2017
Hi Richard

Thanyks for it, but i need the thermometer. (getYCoord bug above)
Have it only checked because you have me asked about.

Othmar
Posted by Richard on 1st January 2017
Hi,

Read the edit above - you should be able to apply the method to the Thermometer too.





Richard
Posted by Othmar on 1st January 2017
Hi Richard

Not realy.. thermometer always have the lowest value on the bottom. So it looks like crazy if the lower value is on top: jsfiddle.net/tzbzb6dh/15/

Its also a problem if there are values with mixed negative and positiv values. eg. -10 to +10 grad C.
So scale formater is no reason.

Othmar
Posted by Richard on 1st January 2017
Hi,

Well you'll probably be able to add more logic to the formatter function, eg to invert the values.

I'll have a look at the scale handling - though it probably won't be until after the next release.





Richard
Posted by Othmar on 1st January 2017
Hi

Great - please let me know when i can use it.


Othmar
Posted by Othmar on 2nd January 2017
Hi Richard

Your new version 4.60 did not change the bug.

othmar
Posted by Richard on 2nd January 2017
Hi there,

> until after the next release


Richard
Posted by Othmar on 2nd January 2017
Hi Richard

OK - sorry...

Othmar
Posted by Richard on 10th January 2017
Hi there,
Try the latest beta - this should have a working getYCoord() method for the Thermometer.

www.rgraph.net/download




Richard
Posted by Othmar on 10th January 2017
Ok Thanks. Will Check it after vacation. I will report result.
Othmar
Posted by Othmar on 30th January 2017
Hi Richard

Beta will not work properly. The getYCord() value does not return the requested value. It return's the current value.
See: jsfiddle.net/hwp6e34b/

Arrow should be at -7 but is -11

Regards Othmar
Posted by Richard on 30th January 2017
Hi there,

Thanks - try the next release - should be working.


Richard
Posted by Othmar on 8th February 2017
Hi Richard

Thermometer works fine now with beta RGraph4_2017-02-06-140332

Thank you!

Best regards Othmar

Add a reply

 




« Back to message list
RGraph on social media