Gurumoorthy

How to represent tickmark value manually in Angular gauge?

Recommended Posts

hi all,

i want represent color range as i attached in the image format.could you please suggest any solution?.

my JSON code :

 

   "chart": {
       "manageresize": "1",
       "origw": "400",
       "origh": "250",
       "managevalueoverlapping": "1",
       "autoaligntickvalues": "0",
       "bgcolor": "AEC0CA,FFFFFF",
       "fillangle": "45",
       "gaugeStartAngle":"0",
       "gaugeEndAngle":"180",
    "adjustTM": "0",
    "majortmnumber": "5",
    "majorTMHeight": "12",
    "majorTMThickness":"2",
    "minorTMThickness":"2",
    "tickValueStep":"1",
       "showgaugeborder": "0",
       "gaugeouterradius": "140",
       "gaugeoriginx": "205",
       "gaugeoriginy": "206",
       "gaugeinnerradius": "2",
       "numbersuffix": "%",
       "pivotradius": "17",
       "showpivotborder": "1",
       "pivotbordercolor": "000000",
       "pivotborderthickness": "5",
       "pivotfillmix": "FFFFFF,000000",
       "tickvaluedistance": "20"
   }

post-62580-0-77708800-1395669343_thumb.png

Edited by Gurumoorthy

Share this post


Link to post
Share on other sites

Hi,

 

Please set 'showTickValues' attribute to 0 and define trendPoints to act as tickValues.

 

Ref. Code:

{
  "chart": {
    "lowerlimit": "100",
    "upperlimit": "0",
    "numbersuffix": "%",
    "showvalue": "1",
    "gaugeouterradius": "160",
    "gaugeinnerradius": "0",
    "gaugestartangle": "0",
    "gaugeendangle": "180",
    "showtickvalues": "0",
    "showlimits": "1"
  },
  "colorrange": {
    "color": [
      {
        "minvalue": "0",
        "maxvalue": "35",
        "code": "FF654F"
      },
      {
        "minvalue": "35",
        "maxvalue": "65",
        "code": "F6BD0F"
      },
      {
        "minvalue": "65",
        "maxvalue": "100",
        "code": "8BBA00"
      }
    ]
  },
  "trendpoints": {
    "point": [
      {
        "startvalue": "35",
        "displayvalue": "90%",
        "color": "666666",
        "thickness": "2",
        "alpha": "10"
      },
      {
        "startvalue": "65",
        "displayvalue": "95%",
        "color": "666666",
        "thickness": "2",
        "alpha": "10"
      }
    ]
  },
  "dials": {
    "dial": [
      {
        "value": "45",
        "showvalue": "0"
      }
    ]
  }
}

Please find attached screenshot of the image rendered using the above JSON data.

 

Hope this helps!

post-62559-0-45788500-1395726063_thumb.png

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now