Custom Web Chart

Related to the Portal

Posts: 12475
Joined: Fri Mar 18, 2011 6:47 pm
PostPosted: Tue Sep 02, 2014 3:27 pm
2 different charts and 2 totally different queries.
The problem is that you can pull filter=R, but you can't OR it to get specific ports.
Roberto.
User avatar
Posts: 5416
Joined: Fri Jul 20, 2012 9:42 am
PostPosted: Tue Sep 02, 2014 3:30 pm
Isnt the chart software javascript? Couldn't you massage the result of R and OR it in the js before you process the chart? Another way would be to have a separate js/php/ whatever vb..net i think that would break R up in a usable format.

The problem for me is I dont follow how the graphs get the data :)

But I'm sure we can get some json/xml/output to do it, or am I missing something?

Posts: 12475
Joined: Fri Mar 18, 2011 6:47 pm
PostPosted: Tue Sep 02, 2014 3:35 pm
Data is collected through JSONP for each filter:
For example T1:
http:\\forum.reefangel.com\status\jsonp.aspx?id=reefangel&filter=T1
Code: Select all
You can see the JS that occurs in behind the scene:
[code]
<!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 = [
            'T1'
            ],
            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 = getRandomColor()
                          tname = name.toUpperCase()
                          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'
                          }]
                      },

                        exporting: {
                            url: '/export/index.php',
                            filename: 'Reef Angel Web Chart T1'
                        },

                      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
                  });
              }

          });
         
      function getRandomColor() {
         var letters = '0123456789ABCDEF'.split('');
         var color = '#';
         for (var i = 0; i < 6; i++ ) {
            color += letters[Math.floor(Math.random() * 16)];
         }
         return color;
      }         
      </script>
      
   </head>
   <body>
      <script type="text/javascript" src="http://forum.reefangel.com/js/highstock.js"></script>
        <script type="text/javascript" src="http://forum.reefangel.com/js/modules/exporting.js"></script>
      <div id="container" style="height: 500px; min-width: 600px"></div>
   </body>
</html>
Roberto.
User avatar
Posts: 5416
Joined: Fri Jul 20, 2012 9:42 am
PostPosted: Tue Sep 02, 2014 5:54 pm
So wouldn't you just need jsonp.aspx to have a function to reformat the data if the filter is a relay filter? and then it would just output the R1, R2, R3 etc in the json output?

Posts: 12475
Joined: Fri Mar 18, 2011 6:47 pm
PostPosted: Wed Sep 03, 2014 8:56 am
This is where devs may get confused. Not so much for end users. They never get to see this... But, R1 is actually the variable used for Expansion Box 1 status of all 8 ports and not port 1 of the main box.
I guess you could consider that devs would have a better understanding and not get confused, huh?
Roberto.
User avatar
Posts: 5416
Joined: Fri Jul 20, 2012 9:42 am
PostPosted: Wed Sep 03, 2014 9:19 am
Yeah I was just confusing myself in the reply, but I know the variables.

What I do in my php is break that down to separate varaibles for each relay and do the bitwise masks etc to see if they are actually on/off. It's a lot of extra work :)

Posts: 12475
Joined: Fri Mar 18, 2011 6:47 pm
PostPosted: Wed Sep 03, 2014 9:24 am
Do you have specific names for them?
Roberto.
User avatar
Posts: 5416
Joined: Fri Jul 20, 2012 9:42 am
PostPosted: Wed Sep 03, 2014 9:30 am
I use the following:

$R=$xml->'{R}';
$RON=$xml->{'RON'};
$ROFF=$xml->{'ROFF'};

$RBIN=getBin($R);
$RMASK=applyMasks($R,$RON,$ROFF);

then I have:

$relay1val=$RBIN[7];
$relay1status=$RMASK[7];
..
..

Where relay1val is the auto value for the relay and the relay1status is the actual status of the port.

getBin returns the binary string of the number and applyMasks does the same bitwise operations we do to resolve RelayData and RelayMaskOn/RelayMaskOff.

I can send you (or it's linked in my custom portal page) the php I'm using if it would be helpful...

Posts: 12475
Joined: Fri Mar 18, 2011 6:47 pm
PostPosted: Wed Sep 03, 2014 9:33 am
I guess we better off calling it just like in our libraries.
Port1-Port8, Box1_Port1-Box1_Port etc

Sent from my Galaxy S5 with Tapatalk
Roberto.
User avatar
Posts: 5416
Joined: Fri Jul 20, 2012 9:42 am
PostPosted: Wed Sep 03, 2014 9:54 am
That would be intutitive :)
PreviousNext

Return to Portal

Who is online

Users browsing this forum: No registered users and 1 guest