Custom Web Chart

Related to the Portal
User avatar
Posts: 5349
Joined: Fri Jul 20, 2012 9:42 am
PostPosted: Sun Aug 10, 2014 10:43 am
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. :)
User avatar
Posts: 5349
Joined: Fri Jul 20, 2012 9:42 am
PostPosted: Sun Aug 10, 2014 10:45 am
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..

Posts: 12246
Joined: Fri Mar 18, 2011 6:47 pm
PostPosted: Sun Aug 10, 2014 2:12 pm
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.
Roberto.
User avatar
Posts: 5349
Joined: Fri Jul 20, 2012 9:42 am
PostPosted: Sun Aug 10, 2014 2:23 pm
So how about just biting the bullet then and storing 0 values? You could use NULL value for storing non-sent data.
User avatar
Posts: 5349
Joined: Fri Jul 20, 2012 9:42 am
PostPosted: Sun Aug 10, 2014 2:50 pm
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.

Posts: 263
Joined: Wed Jan 01, 2014 7:26 am
PostPosted: Sun Aug 24, 2014 10:48 am
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.

Posts: 12246
Joined: Fri Mar 18, 2011 6:47 pm
PostPosted: Sun Aug 24, 2014 3:26 pm
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>
Roberto.

Posts: 263
Joined: Wed Jan 01, 2014 7:26 am
PostPosted: Sun Aug 24, 2014 5:15 pm
Right. Is it because you use highstock.js instead of highchart.js? I wouldn't think so, though. Weird.

Posts: 145
Joined: Fri Jul 05, 2013 5:29 am
PostPosted: Thu Aug 28, 2014 8:13 am
rimai wrote:I created a page for the new U-App that should work for your purpose:
status/appchart.aspx?id=reefangel&filter=t1&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
Image

Posts: 12246
Joined: Fri Mar 18, 2011 6:47 pm
PostPosted: Thu Aug 28, 2014 8:27 am
I changed it so it uses a random color.
Try it again.
Roberto.
PreviousNext

Return to Portal

Who is online

Users browsing this forum: No registered users and 2 guests

cron