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>

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

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

Can confirm this is fixed in SR3! Thanks!

Can anyone tell me why this page loads in Chrome, but not in firefox? http://101smf.com/solarisfire/static.htm

I gather that now, it's just interesting how the different browsers react to this differently :-)

Worked this out. It's a problem with this line: var myChart = new FusionCharts("http://trust.hornbill.net/wp-content/plugins/hornbill-trust/inc/Pie2D.swf", "1554794125", "100%", "100%", "0", "1"); Specifically the bit that says: "100%", "100%" In IE + Chrome it works fine, and fills out to take up all the room that it needs. In Firefox it takes up no space. Set it to an actual figure, aka "433", "150" instead of the percentages and it works perfectly. Not sure this is a bug in the way the firefox rendering engine handles the code, or the way flash renders...

Please help with this... I really don't understand why it would work in two browsers but not firefox :-(

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

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

I will test this code now. However JS: and Flash: From the same code look very very different ;-)

Also the lines render fine in Flash but not in JS! They should look almost identical in both rendering formats...

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.

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

Any Update?

Thank you

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.

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

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

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