Page 1 of 3

Custom Web Chart

Posted: Mon Feb 20, 2012 2:36 pm
by rimai
For those that use custom fields or any other field that is not plotted by the standard web chart, here is an alternative of seeing the web chart for a particular field:

http://forum.reefangel.com/status/chart ... filter=rfw
Reef_Angel_Web_Chart_RFW.png
Reef_Angel_Web_Chart_RFW.png (90.9 KiB) Viewed 31973 times
The example above is my Ecotech Radion White channel using the new PWMParabola() function.

Only two parameters are needed:
id - Your forum id
filter - The filter can be anything in this list:
http://forum.reefangel.com/viewtopic.php?p=5957#p5957

Re: Custom Web Chart

Posted: Tue Nov 27, 2012 2:05 am
by dazza1304
Hi Roberto,

I have tried to access thie first link for the custom web chart but doesn't work - I want to chart my water level expansion.

Can you,help?

Re: Custom Web Chart

Posted: Tue Nov 27, 2012 2:18 am
by dazza1304
Ignore me, just realised I need to add my ID and parameter-all sorted now!

Re: Custom Web Chart

Posted: Mon Mar 04, 2013 5:02 pm
by jsclownfish
How do I filter this for a relay status? http://forum.reefangel.com/status/chart ... filter=XXX

I finally got around to connecting my homemade lightsensors to the IO unit (http://forum.reefangel.com/status/chart ... &filter=C0 or C1 for right and left side of the tank ) and I wanted to look at them overlayed with the actual relay units that control the lights.

They seem to work pretty well for a confirmation that the bulbs are working OK. :geek:


Thanks,
Jon

Re: Custom Web Chart

Posted: Mon Mar 04, 2013 5:11 pm
by rimai
:( can't.
The filter is for the entire 8 relays.
You need to do the math or use something like the relay activity chart.

Re: Custom Web Chart

Posted: Mon Mar 04, 2013 5:52 pm
by jsclownfish
ahhh, OK. I couldn't figure it out. I guess the json data then represents day, time, and relay status. One of these days I'm going to have to learn about bit math. :?

Jon

Re: Custom Web Chart

Posted: Mon Mar 04, 2013 6:52 pm
by rimai
But, as an alternative, you could use one of the custom variables to report the status for a particular relay.
Would that work?

Re: Custom Web Chart

Posted: Mon Mar 04, 2013 7:16 pm
by jsclownfish
That's a good alternative. It's not really critical or anything, I was just curious how the graph would look lining up the light relays with the light sensors.

Re: Custom Web Chart

Posted: Thu Apr 11, 2013 3:26 pm
by arch
This is very useful - thanks.

The custom web chart seems to be picking up the wrong (someone else's?) series labels.

See the attached example for status/chart.aspx?id=arch&filter=T2

First image is custom web chart - with incorrect label "Canopy" - the second image is the Portal web chart with the correct label.
CustomWebChart.gif
CustomWebChart.gif (54.36 KiB) Viewed 31385 times
Portal.gif
Portal.gif (75.79 KiB) Viewed 31385 times
.

Re: Custom Web Chart

Posted: Thu Apr 11, 2013 3:44 pm
by rimai
Yeap :)
Bug

Re: Custom Web Chart

Posted: Tue May 21, 2013 8:39 pm
by mkoryto
Is there a way to graph two or more filters on the custom web chart. Such as filter=T1,WL. If not, can this be added?

Re: Custom Web Chart

Posted: Tue May 21, 2013 9:01 pm
by rimai
No... :(
You would have to copy the javascript source code and create your own html page.
Because it is jsonp based, it doesn't really need to be hosted in the server.

Re: Custom Web Chart

Posted: Sun Aug 10, 2014 7:11 am
by lnevo
Has anyone attempted this javascript? I'm playing with my dimming strategy and it would be really useful to overlay my pwm channels and see when each is dimming and coming on, etc.

Roberto, aren't you already doing this with the two graphs already built into the portal? Couldn't you give us a way load more than one param? Or can you point us to the code your using to map the Temps/PH or the relay status?

Thanks in advance

Re: Custom Web Chart

Posted: Sun Aug 10, 2014 8:59 am
by rimai
I created a page for the new U-App that should work for your purpose:
http://forum.reefangel.com/status/appch ... &filter=t2
You can just append filters.

Re: Custom Web Chart

Posted: Sun Aug 10, 2014 10:02 am
by lnevo
Nice. I'll try it out!

Re: Custom Web Chart

Posted: Sun Aug 10, 2014 10:08 am
by lnevo
Works well but strange because of the not graphing 0s...i might have to adjust my code to shut off at 1% so there's something to graph..

Re: Custom Web Chart

Posted: Sun Aug 10, 2014 10:09 am
by jsclownfish
I don't know if it helps, but Roberto made this example for me awhile ago and I keep icons on my phone and iPad that quickly bring up an assortment of graphs. http://forum.reefangel.com/viewtopic.ph ... lit=+chart It's nice to use when I just want a quick look at the flow rates, or lighting sensors, I am using.

-Jon

Re: Custom Web Chart

Posted: Sun Aug 10, 2014 10:22 am
by rimai
lnevo wrote:Works well but strange because of the not graphing 0s...i might have to adjust my code to shut off at 1% so there's something to graph..
Yes, the server doesn't store zeros.

Re: Custom Web Chart

Posted: Sun Aug 10, 2014 10:31 am
by lnevo
The server doesn't have to store zeroes if you filled in the gaps though it would suffice :)

Re: Custom Web Chart

Posted: Sun Aug 10, 2014 10:33 am
by rimai
If the server didn't store data, how would it know the timestamp?

Re: Custom Web Chart

Posted: Sun Aug 10, 2014 10:43 am
by lnevo
If your missing data just fill in the missing timestamps with 0...so if at 6am i had 5 and that was the last data, but I'm getting the chart at 7am, we can fill in 0 at 6:05, 6:10, 6:15... We can just assume no data sent would also be 0..good for if controller goes offline and you look at a chart today you will think your WL is just fine since the chart shows 50%...meanwhile your not sending data for 3 days...for example. :)

Re: Custom Web Chart

Posted: Sun Aug 10, 2014 10:45 am
by lnevo
It also hides when sensors eroneously report 0...like my ph does occasionally...however i cam see when without finding a gap in the timeline..

Re: Custom Web Chart

Posted: Sun Aug 10, 2014 2:12 pm
by rimai
We would need to analyze the results of the query record by record to be able to do this.
Remember that this is a SQL query.

Re: Custom Web Chart

Posted: Sun Aug 10, 2014 2:23 pm
by lnevo
So how about just biting the bullet then and storing 0 values? You could use NULL value for storing non-sent data.

Re: Custom Web Chart

Posted: Sun Aug 10, 2014 2:50 pm
by lnevo
Your using HighCharts IIRC? I think they have some solutions and its actually opposite of what I said above if I'm interpreting correctly. It asks for you to store the missing data as NULL if you want the x axis to stay consistent.

Re: Custom Web Chart

Posted: Sun Aug 24, 2014 10:48 am
by AlanM
For missing data on HighCharts, here is an example of making the X axis of the chart nice and even which might be uneven in time (Because of 0 values or missed contact with the controller).

http://www.highcharts.com/demo/spline-irregular-time

I don't see what they're doing different from what the portal does in its JS code, though. Maybe it's a later version of the .js than what the portal points to?

Looks like if the data is a series of x,y values, or I assume an array of 2 element arrays. it should do the right thing with the datetime plot.

Re: Custom Web Chart

Posted: Sun Aug 24, 2014 3:26 pm
by rimai
That seems to be the same way I setup the charts :(

Code: Select all

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
        <meta name="viewport" content="user-scalable=no, initial-scale=.5, maximum-scale=.5, minimum-scale=.5, target-densitydpi=device-dpi" />
        <meta name="msapplication-tap-highlight" content="no" />
        <link href='http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css' rel='stylesheet'>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script src='http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js'></script>
        <title>Reef Angel U-App</title>
    		
		<script type="text/javascript">
		    $(function () {
				$.mobile.loading( 'show', {
					text: 'Connecting to Portal',
					textVisible: true,
					theme: 'b',
					html: ""
				});

		        Highcharts.setOptions({
		            global: {
		                useUTC: false
		            }
		        });
		        var seriesOptions = [],
				yAxisOptions = [],
				seriesCounter = 0,
				seriesID = 0,
				names = [
				'PH'
				],
				colors = Highcharts.getOptions().colors;

		        $.each(names, function (i, name) {

		            $.getJSON('http://forum.reefangel.com/status/jsonp.aspx?id=reefangel&filter=' + name.toLowerCase() + '&callback=?', function (data) {
		                var pcolor;
		                var tname;
		                var ydec;
		                var yunit;
		                if (name == "PH") {
		                    pcolor = '#669900'
		                    tname = 'pH'
		                    ydec = 2
		                    yunit = 'pH'
		                }
		                else if (name == "PHE") {
		                    pcolor = '#447700'
		                    tname = 'pH Expansion'
		                    ydec = 2
		                    yunit = 'pH'
		                }
		                else if (name == "SAL") {
		                    pcolor = '#000066'
		                    tname = 'Salinity'
		                    ydec = 1
		                    yunit = 'ppt'
		                }
		                else if (name == "ORP") {
		                    pcolor = '#330000'
		                    tname = 'ORP'
		                    ydec = 0
		                    yunit = 'mV'
		                }
		                else if (name == "T1") {
		                    pcolor = '#FF0000'
		                    tname = 'Temp 1'
		                    ydec = 1
		                    yunit = '°'
		                }
		                else if (name == "T2") {
		                    pcolor = '#FF8800'
		                    tname = 'Temp 2'
		                    ydec = 1
		                    yunit = '°'
		                }
		                else if (name == "T3") {
		                    pcolor = '#9900CC'
		                    tname = 'Temp 3'
		                    ydec = 1
		                    yunit = '°'
		                }
                        else {
		                    pcolor = '#FF0000'
		                    tname = 'PH'
		                    ydec = 0
		                    yunit = ''
                        }
		                if (data.length) {
		                    seriesOptions[seriesID] = {
		                        dataGrouping: {
		                            smoothed: true
		                        },
		                        name: tname,
		                        color: pcolor,
		                        tooltip: {
		                            yDecimals: ydec,
		                            ySuffix: yunit
		                        },
		                        data: data
		                    };
		                    seriesID++;
		                }
		                // As we're loading the data asynchronously, we don't know what order it will arrive. So
		                // we keep a counter and create the chart when all the data is loaded.
		                seriesCounter++;

						if(data.length==0) 
						{
							$('#container').html("No data to display");
							$.mobile.loading( "hide" );							
						}
						else
							if (seriesCounter == names.length) {
								createChart();
								$.mobile.loading( "hide" );							
		                }
		            });
		        });


		        // create the chart when all data is loaded
		        function createChart() {

		            chart = new Highcharts.StockChart({
		                chart: {
		                    renderTo: 'container',
		                    type: 'spline'
		                },
		                title: {
		                    text: 'Reef Angel Controller Web Chart'
		                },
		                subtitle: {
		                    text: 'Parameters logged for the past 7 days'
		                },

		                credits: {
		                    enabled: false
		                },

		                legend: {
		                    enabled: true,
		                    //align: 'right',
		                    //backgroundColor: '#FCFFC5',
		                    borderColor: 'black',
		                    borderWidth: 2,
		                    //layout: 'vertical',
		                    verticalAlign: 'top',
		                    y: 100,
		                    shadow: true
		                },


		                rangeSelector: {
		                    buttons: [{
		                        type: 'minute',
		                        count: 60,
		                        text: '1h'
		                    }, {
		                        type: 'minute',
		                        count: 720,
		                        text: '12h'
		                    }, {
		                        type: 'day',
		                        count: 1,
		                        text: '1d'
		                    }, {
		                        type: 'day',
		                        count: 3,
		                        text: '3d'
		                    }, {
		                        type: 'all',
		                        text: '7d'
		                    }],
		                    selected: 2,
		                    inputEnabled: false
		                },

		                navigator: {
		                    xAxis: {
		                        type: 'datetime',
		                        maxZoom: 3600000, // 1 hour
		                        dateTimeLabelFormats: { // don't display the dummy year
		                            second: '%I:%M:%S %p',
		                            minute: '%I:%M %p',
		                            hour: '%b/%e',
		                            day: '%b/%e',
		                            week: '%b/%e'
		                        }
		                    }

		                },
		                xAxis: {
		                    type: 'datetime',
		                    maxZoom: 3600000, // 1 hour
		                    dateTimeLabelFormats: { // don't display the dummy year
		                        second: '%I:%M:%S %p',
		                        minute: '%I:%M %p',
		                        hour: '%I:%M %p',
		                        day: '%b/%e',
		                        week: '%b/%e'
		                    }
		                },

		                yAxis: {

		                    plotLines: [{
		                        value: 0,
		                        width: 1,
		                        color: 'silver'
		                    }]
		                },

		                tooltip: {
		                    borderColor: 'silver',
		                    xDateFormat: '%A, %b %e, %l:%M %p',
		                    pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b><br/>'
		                },

		                series: seriesOptions
		            });
		        }

		    });
		</script>
		
	</head>
	<body>
		<script type="text/javascript" src="http://forum.reefangel.com/js/highstock.js"></script>
		<div id="container" style="height: 500px; min-width: 600px"></div>
	</body>
</html>

Re: Custom Web Chart

Posted: Sun Aug 24, 2014 5:15 pm
by AlanM
Right. Is it because you use highstock.js instead of highchart.js? I wouldn't think so, though. Weird.

Re: Custom Web Chart

Posted: Thu Aug 28, 2014 8:13 am
by ganjero
rimai wrote:I created a page for the new U-App that should work for your purpose:
http://forum.reefangel.com/status/appch ... &filter=t2
You can just append filters.
When using this with the pwm channels it uses the same color coding for both channels. Is there a way to change that?

Thanks

Re: Custom Web Chart

Posted: Thu Aug 28, 2014 8:27 am
by rimai
I changed it so it uses a random color.
Try it again.