For some reason the upper and lower limt and some ticker values are cut off?
I am placing the gauge in gauge1 div below.
<div class="row span10" style="margin-left:0px;width:auto; vertical-align:bottom;display:block">
<!--
<div class="span2 vintage" style="margin-left:0px; padding-right:15px; width:auto;display: table-cell;vertical-align: bottom;float: none;">
<h1 style="vertical-align:text-bottom">165</h1>
</div>
-->
<div class="span4" style="margin-left:0px; padding-left:0px;padding-right:0px;margin-right:0px; display: table-cell;vertical-align: bottom;float: none;">
<div id="gauge1" style="width:200px; height:200px">
</div>
</div>
<div class="span6" style="margin-left:0px; width:auto;vertical-align:top;display: table-cell;float:none">
<div id="chart1" style="width: 750px;height:200px"></div>
</div>
</div>
javascript:
var gaugeThree = new FusionCharts("AngularGauge", "3gauge", "200", "200", "0");
gaugeThree.setJSONData(
{
"chart": {
"lowerlimit": "100",
"is2D": "0",
"upperlimit": "230",
"gaugestartangle": "240",
"showBorder": "0",
"lowerLimitDisplay":"100",
"upperLimitDisplay":"230",
"bgColor": "#ffffff",
"gaugeendangle": "-60",
"manageResize":"1",
"gaugefillmix":"",
"gaugeouterradius": "100",
"gaugeinnerradius": "80"
},
"colorrange": {
"color": [
{
"minvalue": "100",
"maxvalue": "170",
"code": "FF0000"
},
{
"minvalue": "170",
"maxvalue": "185",
"code": "FFFF00"
},
{
"minvalue": "185",
"maxvalue": "205",
"code": "008000"
},
{
"minvalue": "205",
"maxvalue": "215",
"code": "FFFF00"
},
{
"minvalue": "215",
"maxvalue": "230",
"code": "FF0000"
}
]
},
"dials": {
"dial": [
{
"value": "205.8",
"rearextension": "1",
"baseWidth":"4",
"topWidth":"4"
}
]
}
}
);
gaugeThree.render("gauge1");