Sign in to follow this  
wberghoff

How to Render LED Chart

Recommended Posts

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

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

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,

  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

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

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

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
Sign in to follow this