How to represent tickmark value manually in Angular gauge?

[Gurumoorthy]

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"

   }

Edited March 24, 2014 by Gurumoorthy

[Bindhu]

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!