solarisfire

Javascript Rendering Issue - Charts And Widgets

Recommended Posts

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:

 

Flash_Zoomline.PNG

 

which works perfectly....

 

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

 

JS_Zoomline.PNG

 

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:

 

Flash_Bars.PNG

Without flash they don't even load:

 

JS_Bars.PNG

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:

 

Flash_Widgets.PNG

Without Flash:

 

JS_Widgets.PNG

 

 

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!!!

Share this post


Link to post
Share on other sites

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

 

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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:

 

JS_Zoomline_bug1.PNG

 

JS_Zoomline_bug2.PNG

 

JS_Zoomline_bug3.PNG

 

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

 

JS_Widgets_bug1.PNG

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
Guest Sumedh

Greetings. smile.gif

 

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. smile.gif

Share this post


Link to post
Share on other sites
Guest Sumedh

Hi. smile.gif

 

Apologies for the inconvenience caused.

 

We are working on it.

 

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

 

Hope this helps. smile.gif

 

Have a great day. smile.gif

Share this post


Link to post
Share on other sites
Guest Sumedh

Hi, smile.gif

 

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. smile.gif

Share this post


Link to post
Share on other sites
Guest Sumedh

Hi, smile.gif

 

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. smile.gif

post-24802-0-71581800-1329972732_thumb.jpg

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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!!

Share this post


Link to post
Share on other sites

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:

JS_Widgets_bug1.PNG

and Flash:

Flash_Widgets.PNG

 

From the same code look very very different ;-)

Share this post


Link to post
Share on other sites

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):

 

Flash_Widgets_render.PNG

 

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

 

JS_Widgets_render.PNG

 

Share this post


Link to post
Share on other sites

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.:)

Share this post


Link to post
Share on other sites

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...

Share this post


Link to post
Share on other sites
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!!

Share this post


Link to post
Share on other sites
Guest Sashibhusan

Hi,

 

Could you please elaborate a bit more of your requirement?

 

Awaiting your response.

Share this post


Link to post
Share on other sites
Guest Sashibhusan

Hi,

 

Ok. Thanks.:D

 

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now