pcmm

how to realtime update gauges with url

Recommended Posts

I've got 6 gauges that I'm trying to realtime update using the "dataStreamUrl" method and it doesn't seem to work with dial ID's despite instructions to the contrary. I have a php page that outputs the following string of data that I want to use to update 6 gauges.  The page outputs the following string:

&pvvolt=18.33&pvamp=0&pvpower=0&batvolt=13.93&batamp=0&batpower=0&chargertemp=21.21&battemp=20.16

According to the documentation I should be able to set "id": "pvvolt" in the dial section that it should pick out the 18.33 value from the string and populate it.  But it doesn.  it only works if I change &pvvolt= to &value=  (and hide the rest of the string).  

is it possible to update several gauges from 1 output string or am I going about this wrong?  

the code from my test page is below this line.  the "id": "pvvolt"  is in the correct location  so I don't know why it doesn't behave.  help?

<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts['debugger'].outputTo(function (message) {
    console.log(message);
});
FusionCharts['debugger'].enable(true);

    FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'angulargauge',
    renderAt: 'chart-container',
    id: 'pvvoltage',
    width: '400',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "PV Voltage",
            "lowerLimit": "0",
            "upperLimit": "50",
            "numberSuffix": "v",
            "dataStreamUrl": "./getsolarstats-mppt1.php",
            "refreshInterval": "7",
            "theme": "fint",
            "showValue": "1",
            "valueBelowPivot": "1",
            "majorTMNumber": "9",
            "minorTMNumber": "5",
        },
            "colorRange": {
            "color": [{
            "minValue": "0",
            "maxValue": "90",
            "code": "#71ef1c"
            }, {
            "minValue": "91",
            "maxValue": "100",
            "code": "#e44a00"
           }]
        },
        "dials": {
            "dial": [{
                "id": "pvvolt",
                "value": "0",
                "tooltext": "$value"
            }]
        }
    }
}
);
    fusioncharts.render();
    });
</script>
</head>
<body>
    <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

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