Server Generated Graphs for MX

[master1986]

hello , I would be interested to save data to MySQL and read .

However, the aim should be to generate a graph of a precise period , then selecting the start and end of the period .

It's possible?

Sounds like it should be, once you have the data in MySQL you can extract pretty much whatever you want.

hello , you have developed something about it ?

[BCJKiwi]

Thanks reply posted.

[mcrossley]

hello , you have developed something about it ?

You need to define exactly what it is you want. Server based graphs or client side generated graphs (you will find a thread or two about Highcharts graphs on the forum) like these or these. What time periods you want, selectable or fixed periods etc.

[BeaumarisWX]

Hi Mark,

Thanks for looking at this, due to work and her in doors breaking a rib (badly) been snowed under (maybe snowed under literally in next 48hrs big cold front on way.

I will look at it later in week hopefully. Still running original (it's got regular wind data again so working) though I know not correctly.

Brian, I noticed you added it as I did to the Gauges Tooltip. This requires mods to "wx-gauges-ss.css" and "gauges-ss-wx.js"

For "wx-gauges-ss.css" add new size; Change;
From;

Code: Select all

.ddimgtooltip{
  z-index: 2000;
  box-shadow: 3px 3px 5px #818181; /*shadow for CSS3 capable browsers.*/
  border-radius: 10px;
  display: none;
  position: absolute;
  border: 1px solid black;
  background: white;
  color: black;
  padding: 0 7px 3px 7px;
  font-family: sans-serif;
  font-size: 10px;
}
.tipinfo{
  text-align: left;
  padding: 3px 0 3px 2px;
}
.tipimg{
/*
  width: 438px;
  height: 175px;
*/
  width: 430px;
  height: 215px;
  }

To: Include size for the WindRose; "tipimgx" 400x400 or whatever you want;

Code: Select all

.ddimgtooltip{
  z-index: 2000;
  box-shadow: 3px 3px 5px #818181; /*shadow for CSS3 capable browsers.*/
  border-radius: 10px;
  display: none;
  position: absolute;
  border: 1px solid black;
  background: white;
  color: black;
  padding: 0 7px 3px 7px;
  font-family: sans-serif;
  font-size: 10px;
}
.tipinfo{
  text-align: left;
  padding: 3px 0 3px 2px;
}
.tipimg{
/*
  width: 438px;
  height: 175px;
*/
  width: 430px;
  height: 215px;
  }
.tipimgx{
  width: 400px;
  height: 400px;
}

Then for gauges-ss-wx.js (need to modify createtip section to as per below);
From:

Code: Select all

    createtip : function ($, tipid, tipinfo) {
        if ($('#' + tipid).length === 0) { //if this tooltip doesn't exist yet
            return $('<div id="' + tipid + '" class="ddimgtooltip" />')
                        .html(
                            ((tipinfo[1]) ? '<div class="tipinfo" id="' + tipid + '_txt">' + tipinfo[1] + '</div>' : '') +
                            (tipinfo[0] !== null ? '<div style="text-align:center"><img class="tipimg" id="' + tipid + '_img" src="' + tipinfo[0] + '" /></div>' : '')
                        )
                        .css(tipinfo[2] || {})
                        .appendTo(document.body);
        }
        return null;
    },

To:

Code: Select all

   createtip : function ($, tipid, tipinfo) {
        if ($('#' + tipid).length === 0) { //if this tooltip doesn't exist yet
      var sfx = '';
      if (tipid === 'imgtip10') { sfx = 'x';}
            return $('<div id="' + tipid + '" class="ddimgtooltip" />')
                        .html(
                            ((tipinfo[1]) ? '<div class="tipinfo" id="' + tipid + '_txt">' + tipinfo[1] + '</div>' : '') +
                            (tipinfo[0] !== null ? '<div style="text-align:center"><img class="tipimg' + sfx + '" id="' + tipid + '_img" src="' + tipinfo[0] + '" /></div>' : '')
                        )
                        .css(tipinfo[2] || {})
                        .appendTo(document.body);
      }
        return null;
    },

The above principle is also what I use to display the GFS Map Tooltip for my Ozone Gauge.

Brian, I will email you later this week, as I have some other fixes for other non related pages for you as well - just not had time.

regards,

[BCJKiwi]

Mark, Tony,

Thanks for the updates - all good now.

[jlmr731]

Need a bit of help I just downloaded the sql scripts from github, and getting this error
"ERROR - TZ Statement"
looking through graphSetting php i see

Code: Select all

$result = $mysqli->query("SET time_zone='UTC'");
    if (!$result) {
       die("ERROR - TZ Statement");

before i go messing around much more would this be in the setting of mysql? or something else
My database is all done by cumulusMX 3041

Thanks

[mcrossley]

Need a bit of help I just downloaded the sql scripts from github, and getting this error
"ERROR - TZ Statement"
looking through graphSetting php i see

Code: Select all

$result = $mysqli->query("SET time_zone='UTC'");
    if (!$result) {
       die("ERROR - TZ Statement");

before i go messing around much more would this be in the setting of mysql? or something else
My database is all done by cumulusMX 3041

Thanks

It is probably because the time zone system tables have not been populated on your server. This is only done by default on Windows servers.
http://dev.mysql.com/doc/refman/5.7/en/ ... o-sql.html

If you have problems getting your web server support people to do this, then you may try using

Code: Select all

$result = $mysqli->query("SET time_zone='+00:00'");

[jlmr731]

Thanks for the help and the links and yes mysql is on my linux box and never ran into that issue before so running

Code: Select all

mysql_tzinfo_to_sql /usr/share/zoneinfo | mysql -u root -p mysql

fixed it all up.
Now another problem easily solved was the select from realtime, I used the scripts from cumulusMX to create the database table and it names it Realtime
so if others run into that problem just change that line in graphSetting.php

Code: Select all

  $query = "SELECT unix_timestamp(LogDateTime) AS time, $cols
        FROM Realtime  /--------Changed to cap R
        WHERE LogDateTime >= now() - INTERVAL " .$GRAPH['hours']. " HOUR
        ORDER BY time";

Now if i run any of the scripts directly in the browser (like localhost/graph/SQL/graphRain.php) all error's are gone but all i see is a very tiny box with nothing inside well maybe cause its so small, i did try changing
$Graph['width'] and $Graph['height'] but did not change the size, i also edited the jpgraph file as in the README.md file

I would guess i should have an output running this way and yes running the scripts from the json dir work great

[mcrossley]

Have you tried running the query directly in myPHPAdmin (or the SQL command line)?

Code: Select all

SELECT unix_timestamp(LogDateTime) AS time, temp
FROM Realtime
WHERE LogDateTime >= now() - INTERVAL 1 HOUR
ORDER BY time

Have you also tried to generate the jpgraph demo graphs to test your jpgraph install?

Also check your web server error log for a clue.

[jlmr731]

Thanks for your time on this. now i am a bit confused First im not a programmer but i can read code and some what understand it as long as its not long and complex. so here we go. Yes i get the sql query to work and jpgraph examples, well most work and i see file missing errors on some of them but it is not what your graph require. Now i still get a very small outline of a box in chrome about the size of heading letter. Also I have no errors in my apache logs
then i tried firefox and there it shows me something and here is the html source of it first from fire fox and second from chrome

Code: Select all

<img alt="The image ?http://localhost/graph/SQL/graphTempOut.php? cannot be displayed because it contains errors." src="http://localhost/graph/SQL/graphTempOut.php">

<img style="-webkit-user-select: none" src="http://localhost/graph/SQL/graphTempOut.php">

SO what i see is that for some reason its not naming correctly

SO i ran php comand on it "php graphfile.php" and wow i had out put that looked like image stuff as output, so i did a cat to a file and it opens with the image


So we see it does work (sort of) all i see in the script that may be responsible for it is this

Code: Select all

$name = basename($_SERVER['PHP_SELF'], '.php').'.png';
// Create the graph and set a scale.
$graph = new Graph($GRAPH['width'], $GRAPH['height'], $name, $GRAPH['cachetime']);
$graph->SetScale('datlin');

Now of course i have no idea whats going on within jpgraph or if there is something missing from the script.

Thanks Mark

[mcrossley]

Any chance of link to the scripts?

[jlmr731]

Thanks for taking time on this here is the link
jlmr731.duckdns.org/graph/SQL

[mcrossley]

OK, the script is generating a image correctly, but the output has two line feeds 0xA characters before the image.

As it is happening with all the images I suspect the graphSettings.php file has these extra characters in it somewhere. I can't see the source so you'll have to check it yourself - or post the file here so I can take a look.

[jlmr731]

Here is my graphSettings
Now that you said about the extra line when i used comand line for output i had to remove first 2 lines to get image to work. sorry that slipped my mind

[mcrossley]

Yep, you have two extra line feeds in that file after the closing ?>
Delete those and you should be OK.