How to set meter chart color ranges at runtime according to data values?

« 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 Chetan Mahajan on 30th November 2016
Hello Sir/Madam,

I am using Meter Chart in my Asp.Net Project.

I want to know How to set meter chart color ranges at runtime according data values?

Please reply me the information how to do this with RGraph.Meter using ASP.Net Code Behind model.

Thank You,

Posted by Richard on 30th November 2016
Hi there,

Well you can do something like this example shows if that's the kind of thing you mean:

Or if you mean after the page has loaded you could use AJAX to fetch new data from the server:

// An onclick handler could run this:
RGraph.AJAX.getNumber('/ajax/getData.html', function (num)
     meter.value = num;

     // Figure out the colors based on the value
     if (num > 90) {
         var colors = ['red', 'yellow', 'green'];

     } else if (num > 45) {
         var colors = ['blue', 'pink', 'red'];

     } else {
         var colors = ['black', 'gray', '#eee'];

     // Make the ranges
     var ranges = [
         [0,10, 'Gradient(white:{1})'.format(colors[0])],
         [10,35, 'Gradient(white:{2}'.format(colors[1])],
         [35,100, 'Gradient(white:{3})'.format(colors[2])]

         colorsRanges: ranges


There's probably a few errors in there so check the console.

Posted by Othmar on 23rd December 2016
Hi Richard

Your description above does not work with actual version. In the demo in your post above there is no color.
I have tested it on my server and there are also no colors when i redraw meter.
Posted by Richard on 23rd December 2016
Hi there,

That was just a sample. Here's a working example:


Add a reply

« Back to message list