wberghoff Report post Posted November 24, 2014 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> Share this post Link to post Share on other sites
wberghoff Report post Posted November 24, 2014 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> Share this post Link to post Share on other sites
wberghoff Report post Posted November 24, 2014 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. Share this post Link to post Share on other sites
Vishalika Report post Posted November 25, 2014 Hi, Welcome to FusionCharts Forum. Glad to know that the first issue was resolved. As per your second issue you can pass your JSON data via PHP file. Refer this link for the sample: https://www.dropbox.com/s/hdm9gqk335cjzt7/Forum_16262.rar?dl=0 Hope this helps. Share this post Link to post Share on other sites
wberghoff Report post Posted November 25, 2014 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. Share this post Link to post Share on other sites
wberghoff Report post Posted November 25, 2014 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 Share this post Link to post Share on other sites
Vishalika Report post Posted November 26, 2014 Hi, For the Vertical Bullet graph, currently the attributes 'datastreamURL' and 'refreshInterval' are not supported. Vertical LED is real time but vertical bullet is not real time. Can you specify how you want to update the graph? Whether continuously or one-time update? Awaiting response. Share this post Link to post Share on other sites
