Here are the different SVG icons to choose from

SVG Code Data Explained

Here is an example svg gauge data.

{
  mainText	: 'Water',
  mainValue	: "22%",
  btIcon	: 'icon-calendar',
  btIconText: "Last Day",
  view		: 'waterdrop',
  fillColor	: 'blue',
  fillValue	: 22,
  range		: 'today()',
  pointId   : p.id,
  index     : index,
  original  : p,
  fold      : 'live'
}

The right side is where the user can define what they would like to display. For example the mainText is Water. The mainValue and fillValue must match in order for the svg to be filled to the proper amount. fillColor defines what color the svg will be filled with. However if fillColor is taken out, the color will be set to a the svg's default color. btIcon and btIconText defines what icon and text will appear in the bottom left. The last 5 lines (range, pointId, original, and fold) are only necessary if the point has a history.