Radial And Linear Gauge Widgets Not Displaying Background!

[solarisfire]

Bar charts used to look like this:

 

 

Radial Gauge used to look like this:

 

 

 

But now without any change in the JSON powering them, they have lost their grey faded background...

 

 

Bar Code:

 

<script LANGUAGE="Javascript" SRC="[url="http://10.1.11.24/wp-content/plugins/hornbill-trust/inc/FusionCharts.js"]/wp-content/plugins/hornbill-trust/inc/FusionCharts.js[/url]"></SCRIPT><div id="1145308933">FusionCharts will load here</div><p><script type="text/javascript"><!--			var myChart = new FusionCharts("/wp-content/plugins/hornbill-trust/inc/HLinearGauge", "myChartId", "100%", "100", "0", "1"); 			myChart.setJSONData(			{	"chart": {    "manageresize": "1",    "origw": "200",    "orih": "120",    "bgcolor": "FFFFFF",    "bgalpha": "0",    "showborder": "0",    "upperlimit": "100",    "lowerlimit": "98",    "numbersuffix": "%",    "gaugeroundradius": "5",    "ticksbelowgauge": "1",    "placevaluesinside": "0",    "showgaugelabels": "0",    "valueabovepointer": "1",    "pointerontop": "1",    "pointerradius": "6",    "charttopmargin": "15",    "chartbottommargin": "15",    "chartleftmargin": "25",    "chartrightmargin": "30",    "majortmcolor": "666666"  },  "colorrange": {    "color": [      {        "minvalue": "95",        "maxvalue": "100",        "code": "0E48F6"      }    ]  },  "pointers": {    "pointer": [      {        "value": "99.904916666667"      }    ]  },  "trendpoints": {    "point": [      {        "startvalue": "99.5",        "displayvalue": "Target",        "dashed": "1",        "dashlen": "1",        "dashgap": "3",        "color": "FFFFFF",        "thickness": "2"      }    ],	"point": [      {        "startvalue": "99.95",        "displayvalue": "Goal",        "dashed": "1",        "dashlen": "1",        "dashgap": "3",        "color": "FFFFFF",        "thickness": "2"      }    ]  },  "annotations": {    "groups": [      {        "id": "Grp1",        "showbelow": "1",        "items": [          {            "type": "rectangle",            "x": "$chartStartX",            "y": "$chartStartY",            "tox": "$chartEndX",            "toy": "$chartEndY",            "radius": "10",            "fillcolor": "FFFFFF, FFFFFF, FFFFFF",            "fillangle": "90"          },	  	{            "type": "rectangle",            "x": "$chartStartX+10",            "y": "$chartStartY+10",            "tox": "$chartEndX-10",            "toy": "$chartEndY-10",            "radius": "10",            "fillcolor": "C4D5DC, A3A5A4",            "fillangle": "180"          }         	]      }    ]  },  "styles": {    "definition": [      {        "name": "valueFont",        "type": "Font",        "bgcolor": "333333",        "size": "10",        "color": "FFFFFF"      }    ],    "application": [      {        "toobject": "VALUE",        "styles": "valueFont"      }    ]  }}			);			myChart.render("1145308933"); // --></script>

 

 

Widget Code:

 

<div class="widgetwrap"><h5><span>Uptime Last Month</span></h5><script LANGUAGE="Javascript" SRC="[url="http://10.1.11.24/wp-content/plugins/hornbill-trust/inc/FusionCharts.js"]/wp-content/plugins/hornbill-trust/inc/FusionCharts.js[/url]"></SCRIPT><div id="849173302">FusionCharts will load here</div><script type="text/javascript"><!-- 			var myChart = new FusionCharts("/wp-content/plugins/hornbill-trust/inc/AngularGauge", "myChartId", "100%", "125", "0", "1"); 			myChart.setJSONData(			{  "chart": {    "manageresize": "1",    "origw": "350",    "origh": "200",    "palette": "2",    "bgalpha": "0",    "bgcolor": "FFFFFF",    "lowerlimit": "99",    "upperlimit": "100",    "numbersuffix": "%",    "showborder": "0",    "basefontcolor": "FFFFDD",    "charttopmargin": "5",    "chartbottommargin": "5",    "tooltipbgcolor": "009999",    "gaugefillmix": "{dark-10},{light-70},{dark-10}",    "gaugefillratio": "3",    "pivotradius": "8",    "gaugeouterradius": "120",    "gaugeinnerradius": "70%",    "gaugeoriginx": "175",    "gaugeoriginy": "170",    "trendvaluedistance": "5",    "tickvaluedistance": "3",    "managevalueoverlapping": "1",    "autoaligntickvalues": "1"  },  "colorrange": {    "color": [      {        "minvalue": "0",        "maxvalue": "99.4",        "code": "FF654F"      },      {        "minvalue": "45",        "maxvalue": "99.5",        "code": "F6BD0F"      },      {        "minvalue": "80",        "maxvalue": "100",        "code": "8BBA00"      }    ]  },  "dials": {    "dial": [      {        "value": "99.995",        "rearextension": "10",        "basewidth": "10"      }    ]  },  "trendpoints": {    "point": [      {        "startvalue": "62",        "displayvalue": "Average",        "usemarker": "1",        "markerradius": "8",        "dashed": "1",        "dashlen": "2",        "dashgap": "2"      }    ]  },  "annotations": {    "groups": [      {        "id": "Grp1",        "showbelow": "1",        "showshadow": "1",        "items": [          {            "type": "rectangle",            "x": "$chartStartX+5",            "y": "$chartStartY+5",            "tox": "$chartEndX-5",            "toy": "$chartEndY-5",            "radius": "10",            "fillcolor": "C4D5DC, A3A5A4",            "showborder": "0"          }        ]      }    ]  },  "styles": {    "definition": [      {        "name": "RectShadow",        "type": "shadow",        "strength": "3"      },      {        "name": "trendvaluefont",        "type": "font",        "bold": "1",        "bordercolor": "FFFFDD"      }    ],    "application": [      {        "toobject": "Grp1",        "styles": "RectShadow"      },      {        "toobject": "Trendvalues",        "styles": "trendvaluefont"      }    ]  }});myChart.render("849173302"); // --></script> <center>99.995% 2012-01</center></div>                </div><!-- .one_fourth -->                <div class="one_fourth last">                <div class="widgetwrap"><h5><span>Uptime This Month</span></h5><script LANGUAGE="Javascript" SRC="[url="http://10.1.11.24/wp-content/plugins/hornbill-trust/inc/FusionCharts.js"]/wp-content/plugins/hornbill-trust/inc/FusionCharts.js[/url]"></SCRIPT><div id="234153891">FusionCharts will load here</div><script type="text/javascript"><!-- 			var myChart = new FusionCharts("/wp-content/plugins/hornbill-trust/inc/AngularGauge", "myChartId", "100%", "125", "0", "1"); 			myChart.setJSONData(			{  "chart": {    "manageresize": "1",    "origw": "350",    "origh": "200",    "palette": "2",    "bgalpha": "0",    "bgcolor": "FFFFFF",    "lowerlimit": "99",    "upperlimit": "100",    "numbersuffix": "%",    "showborder": "0",    "basefontcolor": "FFFFDD",    "charttopmargin": "5",    "chartbottommargin": "5",    "tooltipbgcolor": "009999",    "gaugefillmix": "{dark-10},{light-70},{dark-10}",    "gaugefillratio": "3",    "pivotradius": "8",    "gaugeouterradius": "120",    "gaugeinnerradius": "70%",    "gaugeoriginx": "175",    "gaugeoriginy": "170",    "trendvaluedistance": "5",    "tickvaluedistance": "3",    "managevalueoverlapping": "1",    "autoaligntickvalues": "1"  },  "colorrange": {    "color": [      {        "minvalue": "0",        "maxvalue": "99.4",        "code": "FF654F"      },      {        "minvalue": "45",        "maxvalue": "99.5",        "code": "F6BD0F"      },      {        "minvalue": "80",        "maxvalue": "100",        "code": "8BBA00"      }    ]  },  "dials": {    "dial": [      {        "value": "100",        "rearextension": "10",        "basewidth": "10"      }    ]  },  "trendpoints": {    "point": [      {        "startvalue": "62",        "displayvalue": "Average",        "usemarker": "1",        "markerradius": "8",        "dashed": "1",        "dashlen": "2",        "dashgap": "2"      }    ]  },  "annotations": {    "groups": [      {        "id": "Grp1",        "showbelow": "1",        "showshadow": "1",        "items": [          {            "type": "rectangle",            "x": "$chartStartX+5",            "y": "$chartStartY+5",            "tox": "$chartEndX-5",            "toy": "$chartEndY-5",            "radius": "10",            "fillcolor": "C4D5DC, A3A5A4",            "showborder": "0"          }        ]      }    ]  },  "styles": {    "definition": [      {        "name": "RectShadow",        "type": "shadow",        "strength": "3"      },      {        "name": "trendvaluefont",        "type": "font",        "bold": "1",        "bordercolor": "FFFFDD"      }    ],    "application": [      {        "toobject": "Grp1",        "styles": "RectShadow"      },      {        "toobject": "Trendvalues",        "styles": "trendvaluefont"      }    ]  }});myChart.render("234153891"); // --></script> <center>100% 2012-02</center>

[Guest Sumedh]

Greetings,

 

I am afraid, I could not replicate the same.

 

Angular Gauge and Horizontal Linear Gauge are rendering fine with XML and JSON data formats.

 

Please find attached screenshots for your reference.

 

Hope this helps.

[solarisfire]

Is this using the JSON I posted? Very strange...

[Guest Sumedh]

Hi,

 

Yes. Chart has been tested using the same JSON data.