wberghoff
-
Content count
5 -
Joined
-
Last visited
-
Here is the code I am using. <html> <head> <title>My first gauge using FusionWidgets XT</title> <script type="text/javascript" src="fusioncharts/js/fusioncharts.js"></script> <script type="text/javascript" src="fusioncharts/js/fusioncharts.widgets.js"></script> <script type="text/javascript" src="fusioncharts/js/themes/fusioncharts.theme.fint.js"></script> <script type="text/javascript"> FusionCharts.ready(function () { var aqigraph = new FusionCharts({ "type": "VBullet", "renderAt": "chart-container", "width": "125", "height": "400", "dataFormat": "json", "dataSource": { "chart": { "upperlimit": "400", "lowerlimit": "0", "numberprefix": "Current AQI: " , "ticksOnRight": "0", "showtickmarks": "0", "showtickvalues": "0", "showValue": "1", "datastreamurl": "/var/www/html/barstow.php", "refreshInterval": "3", "majortmnumber": "8", "majortmcolor": "646F8F", "majortmheight": "9", "minortmnumber": "4", "minortmcolor": "646F8F", "minortmheight": "3", "majortmthickness": "1", "decimalprecision": "0", "ledgap": "0", "ledsize": "20", "ledborderthickness": "4" }, "colorRange": { "color": [ { "minValue": "0", "maxValue": "50", "code": "#00e400" }, { "minValue": "51", "maxValue": "100", "code": "#ffff00" }, { "minValue": "101", "maxValue": "150", "code": "#ff7e00" }, { "minValue": "151", "maxValue": "200", "code": "ff0000" }, { "minValue": "201", "maxValue": "300", "code": "99004c" }, { "minValue": "301", "maxValue": "400", "code": "7e0023" } ] }, "value": "25" } }); aqigraph.render(); }); </script> </head> <body> <div id="chart-container">An angular guage will load here!</div> </body> </html> Here is the response from the barstow.php file &value=32
-
Vishalika, Thanks for the help but I actually found an easier way to format the data. I now have the output as" &value=32" from the php script. The only problem is once I set the datasourceURL nothing happens. That's all I can tell to do from the documentation, so I am a bit stuck.
-
My next question is how do I tie in json data from an outside source though. I have a php file that will give the data in JSON format with value: "#". Example: [ "AQI", 20, "PollTime", "2014-11-24T14:00:00" ] AQI is the value.
-
Found a pointless container. <html> <head> <title>My first gauge using FusionWidgets XT</title> <script type="text/javascript" src="fusioncharts/js/fusioncharts.js"></script> <script type="text/javascript" src="fusioncharts/js/fusioncharts.widgets.js"></script> <script type="text/javascript" src="fusioncharts/js/themes/fusioncharts.theme.fint.js"></script> <script type="text/javascript"> FusionCharts.ready(function () { var csatGauge = new FusionCharts({ "type": "vled", "renderAt": "chart-container", "width": "400", "height": "250", "dataFormat": "json", "dataSource": { "chart": { "upperlimit": "100", "lowerlimit": "0", "numbersuffix": "%", "majortmnumber": "11", "majortmcolor": "646F8F", "majortmheight": "9", "minortmnumber": "2", "minortmcolor": "646F8F", "minortmheight": "3", "majortmthickness": "1", "decimalprecision": "0", "ledgap": "0", "ledsize": "1", "ledborderthickness": "4" }, "colorrange": { "color": [ { "minvalue": "0", "maxvalue": "30", "code": "cf0000" }, { "minvalue": "30", "maxvalue": "60", "code": "ffcc33" }, { "minvalue": "60", "maxvalue": "100", "code": "99cc00" } ] }, "value": "95" } }); csatGauge.render(); }); </script> </head> <body> <div id="chart-container">An angular guage will load here!</div> </body> </html>
-
Hi, I am first trying this as a basic way following the chart example and tutorial but it's not working at all. Debug gives no good reason as well. <html> <head> <title>My first gauge using FusionWidgets XT</title> <script type="text/javascript" src="fusioncharts/js/fusioncharts.js"></script> <script type="text/javascript" src="fusioncharts/js/fusioncharts.widgets.js"></script> <script type="text/javascript" src="fusioncharts/js/themes/fusioncharts.theme.fint.js"></script> <script type="text/javascript"> FusionCharts.ready(function () { var csatGauge = new FusionCharts({ "type": "vled", "renderAt": "chart-container", "width": "400", "height": "250", "dataFormat": "json", "dataSource": { { "chart": { "upperlimit": "100", "lowerlimit": "0", "numbersuffix": "%", "majortmnumber": "11", "majortmcolor": "646F8F", "majortmheight": "9", "minortmnumber": "2", "minortmcolor": "646F8F", "minortmheight": "3", "majortmthickness": "1", "decimalprecision": "0", "ledgap": "0", "ledsize": "1", "ledborderthickness": "4" }, "colorrange": { "color": [ { "minvalue": "0", "maxvalue": "30", "code": "cf0000" }, { "minvalue": "30", "maxvalue": "60", "code": "ffcc33" }, { "minvalue": "60", "maxvalue": "100", "code": "99cc00" } ] }, "value": "95" } } }); csatGauge.render(); }); </script> </head> <body> <div id="chart-container">An angular guage will load here!</div> </body> </html>