Modify Linear Gauge to look like I want it too

[Vedmack]

Hi

 

I'm trying to make the linear gauge to look like the first attached image (rectangle with border and filled with color till some point and with value placed in the center of it)

 

This is what I have managed to do (second attached image)

chartData = {
	"chart": {
		"manageresize": "1",
		"origw": "420",
		"origh": "90",
		"lowerlimit": "0",
		"upperlimit": "100",
		"numbersuffix": "%",
		"showborder": "0",
		"bgcolor": "FFFFFF",
		"showgaugeborder": "0",
		"pointerontop": "0",
		"pointerradius": "5",
		"pointerbordercolor": "000000",
		"pointerbgcolor": "000000",
		"annrenderdelay": "0",
		"showshadow": "0",
		"minortmnumber": "0",
		"basefontcolor": "000000",
		"animation": "1",
		"showTickMarks": '0',
		"showTickValues" : '0'
	},
	"colorrange": {
		"color": [
			{
				"minvalue": "0",
				"maxvalue": "100",
				"alpha": "0"
			}
		]
	},
	"pointers": {
		"pointer": [
			{
				"value": "62"
			}
		]
	},
	"annotations": {
		"groups": [
			{
				"id": "Grp2",
				"showbelow": "1",
				"items": [
					{
						"type": "rectangle",
						"x": "$gaugeStartX",
						"y": "$gaugeStartY",
						"tox": "$gaugeEndX",
						"toy": "$gaugeEndY",
						"fillcolor": "E00000,FCEF27,678000"
					}
				]
			}
		]
	}
};

chartReference = new FusionCharts("HLinearGauge", "license_chart_id", 300, 100, "0", "0");
chartReference.setJSONData(chartData);
chartReference.setTransparent(true);
chartReference.render("license_kpi_container");

Help will be appreciated.

 

 

Daniel.

 

Edited June 18, 2014 by Vedmack

[Guest Sashibhusan]

Hi,

 

Could you please try once by using "HBullet" graph instead of "HLinearGauge", which is more closer to your requirement?

 

For more information on "Horizontal Bullet Graph Specification Sheet ", please visit the link: http://docs.fusioncharts.com/widgets/Contents/Bullet/HBulletXMLAPI.html

 

Hope this helps!