Javascript Rendering Issue - Charts And Widgets

[solarisfire]

Guys I've been working with fusioncharts and fusionwidgets since one of my colleagues told me we had an enterprise licence for it the other day.... Pretty awesome products.... But I can't for the life of me get charts to render properly using Javascript....

 

I'm using the trial swf files for the widgets at the moment because of another issue ;-)

 

So this is the zoomline graph rendered in flash:

 

 

which works perfectly....

 

But if I switch off flash, which should render the file using Javascript, it then looks like this:

 

 

Which is a little rubbish because it doesn't display any data.

 

The code looks like this:

 

<p><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><center><div id="1934800262">FusionCharts will load here</div><p><script type="text/javascript"><!-- 			var strJSON = { "chart": { "caption": "Uptime Per Pod", "xaxisname": "Date","yaxisname": "Uptime", "yAxisMaxValue": "100", "yAxisMinValue": "98", "divintervalhints": "99, 99", "palette": "1" }, "categories": [									{					"category": [{						"label": "2011-03"							},{						"label": "2011-04"							},{						"label": "2011-05"							},{						"label": "2011-06"							},{						"label": "2011-07"							},{						"label": "2011-08"							},{						"label": "2011-09"							},{						"label": "2011-10"							},{						"label": "2011-11"							},{						"label": "2011-12"							},{						"label": "2012-01"							},{						"label": "2012-02"							}]						}					],"dataset": [ {"seriesname": "Average",									"data": [{									"value": "99.912"									},{									"value": "99.929"									},{									"value": "99.916"									},{									"value": "99.898"									},{									"value": "99.956"									},{									"value": "99.944"									},{									"value": "99.945"									},{									"value": "99.993"									},{									"value": "99.703"									},{									"value": "99.995"									},{									"value": "99.995"									},{									"value": "100"									}]											},{"seriesname": "sw1-uk-01",									"data": [{									"value": "99.921"									},{									"value": "99.947"									},{									"value": "99.917"									},{									"value": "99.842"									},{									"value": "99.943"									},{									"value": "99.931"									},{									"value": "99.958"									},{									"value": "100"									},{									"value": "99.418"									},{									"value": "99.991"									},{									"value": "99.991"									},{									"value": "100"									}]											},{"seriesname": "htl-uk-01",									"data": [{									"value": "99.904"									},{									"value": "99.911"									},{									"value": "99.914"									},{									"value": "99.954"									},{									"value": "99.969"									},{									"value": "99.956"									},{									"value": "99.933"									},{									"value": "99.987"									},{									"value": "99.989"									},{									"value": "100"									},{									"value": "100"									},{									"value": "100"									}]											}]						};			var myChart = FusionCharts.render("/wp-content/plugins/hornbill-trust/inc/ZoomLine.swf", "myChartId", "100%", "600", "1934800262", strJSON, "json");			// --></script> </center></p>

 

The formatting is a mess because this is generated by some PHP I wrote, but it should still work and it's still valid JSON.

 

So... What about the widgets... First set is a few percentage bars:

 

With Flash it looks like this:

 

Without flash they don't even load:

 

Again code looks like this:

 

<h3>Average</h3><p><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="928234640">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.932166666667"      }    ]  },  "trendpoints": {    "point": [      {        "startvalue": "99.5",        "displayvalue": "Target",        "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("928234640"); // --></script> </p><h3>htl-uk-01</h3><p><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="1452035822">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.95975"      }    ]  },  "trendpoints": {    "point": [      {        "startvalue": "99.5",        "displayvalue": "Target",        "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("1452035822"); // --></script> </p><h3>sw1-uk-01</h3><p><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="387353614">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"      }    ]  },  "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("387353614"); // --></script>

 

And finally some angular gauges :-)

 

With Flash:

 

Without Flash:

 

 

 

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="1789166527">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("1789166527"); // --></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="2039239059">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("2039239059"); // --></script> <center>100% 2012-02</center>

 

 

Please help this is driving me crazy!!!

[solarisfire]

Also:

 

 

fusioncharts.js @version fusioncharts/3.2.2-servicerelease1.4200

FusionCharts.HC.Widgets.js @version fusioncharts/3.2.3-release.4749

FusionCharts.HC.js @version fusioncharts/3.2.2-servicerelease1.4200

FusionCharts.HC.Charts.js @version fusioncharts/3.2.2-servicerelease1.4200

 

 

[solarisfire]

Also:

 

 

fusioncharts.js @version fusioncharts/3.2.2-servicerelease1.4200

FusionCharts.HC.Widgets.js @version fusioncharts/3.2.3-release.4749

FusionCharts.HC.js @version fusioncharts/3.2.2-servicerelease1.4200

FusionCharts.HC.Charts.js @version fusioncharts/3.2.2-servicerelease1.4200

 

 

 

I have updated javascript but this will not help....

 

fusioncharts.js @version fusioncharts/3.2.2-servicerelease1.4200 --> @version fusioncharts/3.2.3-release.4749

FusionCharts.HC.Widgets.js @version fusioncharts/3.2.3-release.4749

FusionCharts.HC.js @version fusioncharts/3.2.2-servicerelease1.4200 --> @version fusioncharts/3.2.3-release.4749

FusionCharts.HC.Charts.js @version fusioncharts/3.2.2-servicerelease1.4200 --> @version fusioncharts/3.2.3-release.4749

[solarisfire]

Ok I've got it working, kind-of... It definitely still has bugs...

 

Had to upgrade the SWF files to the new 3.2.3 SR2 release which I thought I had already done but I guess I didn't....

 

Now everything is still working in the flash version, but I have the following problems in the HTML5 version:

 

The zoomline graph decided it doesn't want to join all of it's points with lines:

 

 

 

 

And the radial gauges do not have the red and yellow colour sections...

 

 

[solarisfire]

Do any support people actually want to help me with this?

 

I have clearly found multiple bugs in the software that my company has paid for and you are totally ignoring these...

 

Appalling service.

[Guest Sumedh]

Greetings.

 

Apologies for the delay and inconvenience.

 

We are looking into the issue.

 

We will get back to you soon.

 

Hope you have a great day.

[solarisfire]

Greetings.

 

Apologies for the delay and inconvenience.

 

We are looking into the issue.

 

We will get back to you soon.

 

Hope you have a great day.

 

Thank you

[solarisfire]

Any Update?

[Guest Sumedh]

Hi.

 

Apologies for the inconvenience caused.

 

We are working on it.

 

As it will be fixed in the next service release version.

 

Hope this helps.

 

Have a great day.

[Guest Sumedh]

Hi,

 

I am glad to inform you that, bug with ZoomLine chart is fixed now.

 

We are looking into the issues of Angluar gauge and Horizontal Linear gauge.

 

However fix for ZoomLine chart would be released in the next in service release version.

 

And we will update you with Angular gauge and Horizontal Linear gauge.

 

Hope you have a great day.

[Guest Sumedh]

Hi,

 

Defining the minimum and maximum value which will be plotted on the gauge scale. They are termed as the lower and upper limits of the gauge scale.

 

You can differentiate the gauge scale by defining it into regions. Thus, regions can be differentiated using colorRange element.

 

Thus, for proper gauge scaling and to display color range on the gauge, you would need to set the upperLimit, lowerLimit attrubutes ( for gauge scale) and minValue, maxValue attributes( for colorRange) properly.

 

For Angular Gauge scaling, could you please, modify the following attributes under the chart element.

 

"lowerLimit" : "0" "upperLimit" : "100"

 

Please refer the following code,

 

{ "chart" : {

...

"lowerLimit" : "0",

"upperLimit" : "100"},

 

And also, modify the following attributes under the colorRange element for showing regions on the gauge.

 

For red color range: "minvalue": "0" "maxvalue": "45",

For yellow color range: "minvalue": "45", "maxvalue": "60",

For green color range: "minvalue": "60", "maxvalue": "100",

 

Refer the following code:

 

 

"colorrange": {

"color": [

{

"minvalue": "0",

"maxvalue": "45",

"code": "FF654F"

},

{

"minvalue": "45",

"maxvalue": "60",

"code": "F6BD0F"

},

{

"minvalue": "60",

"maxvalue": "100",

"code": "8BBA00"

}

]

},

 

This would solve your purpose.

 

Find attached screenshot for your reference which is rendered in JavaScript.

 

Hope this helps.

[solarisfire]

This doesn't really solve my problem at all...

 

The number I am plotting on this graph will nearly always be a floating point number between 99 and 100, so it's pointless having a gauge scale from 0-100 as it will always be at the top.

 

I instead need the graph to be able to have a value of 99.5 and be able to position the needle...

 

What you are suggesting isn't a very flexible solution.

[solarisfire]

Also the lines render fine in Flash but not in JS!

 

They should look almost identical in both rendering formats...

[Guest Sashibhusan]

Hi,

 

According to your requirement, you would need to provide the values between "lowerLimit" and "upperLimit" attributes and need to set the color range accordingly as below:

 

Ref. Code:

{ "chart" : {

...

"lowerLimit" : "99",

"upperLimit" : "100"},

 

 

"colorrange": {

"color": [

{

"minvalue": "99",

"maxvalue": "99.4",

"code": "FF654F"

},

{

"minvalue": "99.4",

"maxvalue": "99.5",

"code": "F6BD0F"

},

{

"minvalue": "99.5",

"maxvalue": "100",

"code": "8BBA00"

}

]

},

 

Could you please elaborate a bit more on "Also the lines render fine in Flash but not in JS!" ?

 

If you are talking about the border lines of AngularGauge, the chart looks almost similar in Flash as well as JS but not identical.

 

Hope this helps!!

[solarisfire]

Hi,

 

According to your requirement, you would need to provide the values between "lowerLimit" and "upperLimit" attributes and need to set the color range accordingly as below:

 

Ref. Code:

{ "chart" : {

...

"lowerLimit" : "99",

"upperLimit" : "100"},

 

 

"colorrange": {

"color": [

{

"minvalue": "99",

"maxvalue": "99.4",

"code": "FF654F"

},

{

"minvalue": "99.4",

"maxvalue": "99.5",

"code": "F6BD0F"

},

{

"minvalue": "99.5",

"maxvalue": "100",

"code": "8BBA00"

}

]

},

 

Could you please elaborate a bit more on "Also the lines render fine in Flash but not in JS!" ?

 

If you are talking about the border lines of AngularGauge, the chart looks almost similar in Flash as well as JS but not identical.

 

Hope this helps!!

 

I will test this code now.

 

However JS:

and Flash:

 

From the same code look very very different ;-)

[solarisfire]

Ok this still doesn't work...

 

The code to colour these bars in is now:

 

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": "99",        "maxvalue": "99.5",        "code": "FF654F"      },      {        "minvalue": "99.5",        "maxvalue": "99.95",        "code": "F6BD0F"      },      {        "minvalue": "99.5",        "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"      }    ]  }});

 

And this works on flash (although there is still a bug rendering the background):

 

 

But the yellow area doesn't render at all on JS...

 

 

[Swarnam]

Hi,

 

Could you please try using the following code:

 

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": "99",        "maxvalue": "99.5",        "code": "FF654F"      },      {        "minvalue": "99.5",        "maxvalue": "99.95",        "code": "F6BD0F"      },      {        "minvalue": "99.95",        "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"      }    ]  }});

 

Hope this helps.

[solarisfire]

Ignore me, I still had two values overlapping.

 

It's just infuriating to see it work in Flash but not in JS even from the same code.

 

But I would like the background not being visible on flash looked into...

[Guest Sashibhusan]

Hi,

 

Let me make myself very clear about minValue and MaxValue of <color> element,

 

"minValue ": Indicates the starting value of that color range.

 

The minValue of the first color range should be equal to the chart's lowerLimit and the minValue of the succeeding <color> element should be equal to the current <color> element's maxValue.

 

"maxValue": Indicates the end value of that color range. The maxValue of the last color range should be equal to the chart's upperLimit.

 

Also pleae note that since JavaScript chart does a strict XML validation, sometimes it may happen that the chart will appear in Flash mode but not in JavaScript mode for the same XML data.

 

Please find the attached snap-shot of the AngularGauge which looks similar in both Flash and JS mode using the following code.

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": "99",        "maxvalue": "99.5",        "code": "FF654F"      },      {        "minvalue": "99.5",        "maxvalue": "99.95",        "code": "F6BD0F"      },      {        "minvalue": "99.95",        "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"      }    ]  }});

 

Hope this helps!!

[solarisfire]

Can confirm this is fixed in SR3! Thanks!

[Guest Sashibhusan]

Hi,

 

Could you please elaborate a bit more of your requirement?

 

Awaiting your response.

[solarisfire]

I have no requirement. Just saying the problem with zoomline has been fixed.

[Guest Sashibhusan]

Hi,

 

Ok. Thanks.

 

Feel free to post your queries if you have in future.