Author Topic: ENSO plotting to graph  (Read 1585 times)

0 Members and 1 Guest are viewing this topic.

Offline pimohdaimaoh

  • Senior Contributor
  • ****
  • Posts: 286
  • "Be aware to our nature"
    • PIMOHWEATHER
ENSO plotting to graph
« on: April 27, 2021, 07:19:30 AM »
Hello,

I want to plot this into graphs to visualize changes of ENSO CLIMATE, using a php script which auto plot this into Graphs which will shown like this (see attached image)
The format of txt file source is this:

 YR   MON  TOTAL ClimAdjust ANOM

1950   1   24.56   26.18   -1.62
1950   2   25.07   26.39   -1.32
1950   3   25.88   26.95   -1.07
1950   4   26.29   27.39   -1.11
1950   5   26.19   27.56   -1.37
1950   6   26.47   27.21   -0.74
1950   7   26.28   26.72   -0.44
1950   8   25.88   26.30   -0.42
1950   9   25.73   26.14   -0.41
1950  10   25.68   26.01   -0.32
1950  11   25.46   26.06   -0.60
1950  12   25.29   26.18   -0.88
1951   1   25.26   26.18   -0.92
1951   2   25.72   26.39   -0.66
1951   3   26.91   26.95   -0.04
1951   4   27.59   27.39    0.20
1951   5   27.93   27.56    0.37
1951   6   27.73   27.21    0.52
1951   7   27.59   26.72    0.87
1951   8   27.01   26.30    0.71
1951   9   27.22   26.14    1.08

OR also create a DIAL which when the values changes, it point to the corresponding in the DIAL like (see image second)

I hope someone could create a script like this, this important to monitor when a possible EL Nino or La Nina Occur visually through graphs.

Thanks and regards

-Mike-
« Last Edit: April 27, 2021, 07:24:11 AM by pimohdaimaoh »

Offline WraxallDave

  • Senior Member
  • **
  • Posts: 65
    • Wraxall Weather, Uk
Re: ENSO plotting to graph
« Reply #1 on: April 28, 2021, 05:24:41 AM »
Mike,

Have you thought of using Highcharts?

https://www.highcharts.com/demo/column-negative


Dave

Offline davidefa

  • Forecaster
  • *****
  • Posts: 313
Re: ENSO plotting to graph
« Reply #2 on: April 28, 2021, 05:17:33 PM »
Maybe something like this ( as posted by Dave )

Offline pimohdaimaoh

  • Senior Contributor
  • ****
  • Posts: 286
  • "Be aware to our nature"
    • PIMOHWEATHER
Re: ENSO plotting to graph
« Reply #3 on: April 29, 2021, 01:31:00 AM »
Maybe something like this ( as posted by Dave )

thank you for these replies, but another question is when the file source is in .txt file like this: http://pimohweather.com/cache/enso.txt, How can I auto fetch the source file from this txt which automatically parsing the values and inseting it to array in these sample graph?

lets just say:    

http://pimohweather.com/cache/enso.txt

then auto converts to array then putting it on the sample graph you made?

and to put it here?

// start of var entry

var chart_legends = ['Jan 1950', 'Feb 1950', 'Mar 1950', 'Apr 1950', 'May 1950', 'Jun 1950', 'Jul 1950',
'Aug 1950', 'Sep 1950', 'Oct 1950', 'Nov 1950', 'Dec 1950', 'Jan 1951', 'Feb 1951', 'Mar 1951',
'Apr 1951', 'May 1951', 'Jun 1951', 'Jul 1951', 'Aug 1951', 'Sep 1951'];

var chart_data = [-1.62, -1.32, -1.07, -1.11, -1.37, -0.74, -0.44, -0.42, -0.41, -0.32, -0.60, -0.88, -0.92,
-0.66, -0.04, 0.20, 0.37, 0.52, 0.87, 0.71, 1.08];

// end of var entry

Thanks and regards

-Mike-
« Last Edit: April 29, 2021, 03:03:45 AM by pimohdaimaoh »

Offline WraxallDave

  • Senior Member
  • **
  • Posts: 65
    • Wraxall Weather, Uk
Re: ENSO plotting to graph
« Reply #4 on: April 29, 2021, 04:20:20 AM »
Hi Mike,

Myself, I would write a PHP function that uses "fopen" to read that txt file, and use php "explode" to convert the line to an array to populate $datax and $datay on line 54 and 57.

I hope this helps,

Regards,

Dave

Offline davidefa

  • Forecaster
  • *****
  • Posts: 313
Re: ENSO plotting to graph
« Reply #5 on: April 29, 2021, 10:15:04 AM »
As Dave said, it is not a very complex task ( added also a few comments )
Only a note: it is not a good idea to separate the fields with a variable number of spaces ( fixed format, but variable spaces ), a better idea is using some fixed separator ( a ';' like in csv files )

To pass php array to javascript array use:
Code: [Select]
var chart_legends = <?php echo json_encode($data_date); ?>;
var chart_data = <?php echo json_encode($data_anom); ?>;

Offline WraxallDave

  • Senior Member
  • **
  • Posts: 65
    • Wraxall Weather, Uk
Re: ENSO plotting to graph
« Reply #6 on: April 29, 2021, 10:37:32 AM »
Hi There,

That was a nice concise example in the previous post.

I went for a function with two global arrays, used "explode" and allowed for two different column spaces in the txt document.
As already mentioned, if the txt file had fixed separators, then the code to read the data is easier than I have done here.

I have also added the option to change month number to three letter month name.

I added the zoom option to the HighChart, so you hold down the left mouse on the plot and drag right and release to zoom.

change the attached file to a PHP suffix file and add your txt file to cache directory.

I hope this gives you a few ideas,

Dave.

ps: please remove line 122 in the attached example. "maxZoom: 100,"
« Last Edit: April 29, 2021, 11:02:18 AM by WraxallDave »

Offline pimohdaimaoh

  • Senior Contributor
  • ****
  • Posts: 286
  • "Be aware to our nature"
    • PIMOHWEATHER
Re: ENSO plotting to graph
« Reply #7 on: April 29, 2021, 08:20:00 PM »
Hi There,

That was a nice concise example in the previous post.

I went for a function with two global arrays, used "explode" and allowed for two different column spaces in the txt document.
As already mentioned, if the txt file had fixed separators, then the code to read the data is easier than I have done here.

I have also added the option to change month number to three letter month name.

I added the zoom option to the HighChart, so you hold down the left mouse on the plot and drag right and release to zoom.

change the attached file to a PHP suffix file and add your txt file to cache directory.

I hope this gives you a few ideas,

Dave.

ps: please remove line 122 in the attached example. "maxZoom: 100,"

Thank You for pointing this out, I will try this idea, will post the result progress, however, I have no Idea if this can be put to limited plot if I want to plot only 48 months to present instead plotting ENTIRE year from 1951 to 2021, well let me check it first hand


UPDATE:

Nice, It works (see image attached) but I noticed and I realized that I want to limit its plot graph where only 48 months instead of ENTIRE range from 1950 - 2021 XD
maybe if can add its limitations instead from 1950, it only plots what year range I want to plot like only from year 2019 to 2021 for example
« Last Edit: April 29, 2021, 10:33:04 PM by pimohdaimaoh »

Offline WraxallDave

  • Senior Member
  • **
  • Posts: 65
    • Wraxall Weather, Uk
Re: ENSO plotting to graph
« Reply #8 on: April 30, 2021, 03:21:35 AM »
Hi Mike,

That is easy, modify the function that reads the txt file so it doesn't start populating the array until it has found the start date. I have set a flag when I see a particular year at the start of the line (I went for 1999).

I have included an example using the "HighCharts" line plot instead of bars, like you showed, plus added zoom and a subtitle about the zoom option.

I noticed that the plot was going off the top of the page, so I altered the range and shading.

I am interested in where you got the data file, and did it come in either CSV or JSON format? Either would have made reading the file easier.

Regards,

Dave.

PS: if you want ticks under the x-axis, change as below:

Code: [Select]
xAxis: {
categories: chart_legends,
zoomType: 'x',
tickInterval: 1,
tickWidth: 1
},

« Last Edit: April 30, 2021, 03:27:49 AM by WraxallDave »

Offline pimohdaimaoh

  • Senior Contributor
  • ****
  • Posts: 286
  • "Be aware to our nature"
    • PIMOHWEATHER
Re: ENSO plotting to graph
« Reply #9 on: April 30, 2021, 07:21:09 AM »
Hi Mike,

That is easy, modify the function that reads the txt file so it doesn't start populating the array until it has found the start date. I have set a flag when I see a particular year at the start of the line (I went for 1999).

I have included an example using the "HighCharts" line plot instead of bars, like you showed, plus added zoom and a subtitle about the zoom option.

I noticed that the plot was going off the top of the page, so I altered the range and shading.

I am interested in where you got the data file, and did it come in either CSV or JSON format? Either would have made reading the file easier.

Regards,

Dave.

PS: if you want ticks under the x-axis, change as below:

Code: [Select]
xAxis: {
categories: chart_legends,
zoomType: 'x',
tickInterval: 1,
tickWidth: 1
},



Hello Dave,

Thank you for your help with this, after a non stop trial and error analyzing and using your scripts you've shared here, it seems its working now, Im also adding some features like plotting the LAST Current Value so that the viewer will know what is the latest data value in ENSO heres the result http://www.pimohweather.com/elninolanina.php

now to study how to create a DIAL Graph out of this maybe to test your first script which will parse the txt then ONLY getting the last current value to plot in Dial in which pin points the pointer if its NEUTRAL, EL NINO or La NINA which then to use on my ajax dashboard view.

About the source data where I got the txt files came from noaa site :

https://origin.cpc.ncep.noaa.gov/products/analysis_monitoring/ensostuff/detrend.nino34.ascii.txt

there I used my old scrape script learned from ken a couple of years ago after self studying his scripts so it automatically extract the txt and downloaded through my web server as cache file in which this new script will pull the cache file generrated. Maybe a clever move but it help stil though

regards

-Mike-
« Last Edit: April 30, 2021, 07:22:47 AM by pimohdaimaoh »

Offline WraxallDave

  • Senior Member
  • **
  • Posts: 65
    • Wraxall Weather, Uk
Re: ENSO plotting to graph
« Reply #10 on: April 30, 2021, 08:17:50 AM »
Hi Mike,

Looking Good,

HighCharts do several Gauges scripts but I have never used them, most weather sites use SteelSeries gauges.

Regards,

Dave.

Offline pimohdaimaoh

  • Senior Contributor
  • ****
  • Posts: 286
  • "Be aware to our nature"
    • PIMOHWEATHER
Re: ENSO plotting to graph
« Reply #11 on: April 30, 2021, 11:55:52 AM »
Hi Mike,

Looking Good,

HighCharts do several Gauges scripts but I have never used them, most weather sites use SteelSeries gauges.

Regards,

Dave.

hello dave

its Nice to know that, I tried to use this script but trying to echo only the last value from the array is there a code ONLY to read the last value array of text?

<?php

$content = file('./cache/ENSO.txt', FILE_IGNORE_NEW_LINES);   // reads the file, each line in an element of the array

$data_date = array();
$data_anom = array();
$i = 0;
foreach ($content as $line) // for each element in the array ( each line of the file )
  {
  if ($i != 0)  // removes header
    {
    $data = preg_split('/\s+/', $line);     // returns an array: each element is a 'field' if the imput line ( deals with variable number of spaces between fields )
   $data_date[] = $data[0]." ".$data[1];   // $data[0] is the year, $data[1] is the month...
   $data_anom[] = $data[4];
   }
  $i++;
  }
//echo json_encode($data_date); <---------- only read the last $data_date
//echo json_encode($data_anom); <---------- only read the last $data_anom
?>


so it only viewed the last values when echoed, is there a way on this?

//echo json_encode($data_date); <---------- only read the last $data_date from array
//echo json_encode($data_anom); <---------- only read the last $data_anom from array


regards

-Mike-
« Last Edit: April 30, 2021, 11:58:15 AM by pimohdaimaoh »

Offline pimohdaimaoh

  • Senior Contributor
  • ****
  • Posts: 286
  • "Be aware to our nature"
    • PIMOHWEATHER
Re: ENSO plotting to graph
« Reply #12 on: September 04, 2021, 03:03:21 AM »
Hello Dave,

Thank you again for the help regarding ENSO Graphs, I need another help of how to make this into a GAUGE graph either in jpgraphs of Highcharts which points if negative numbers (values) are La nina and positive values pointed to El Nino  similar below (see image). I want to put this on my dashboard as front indicator.

Thank You for the response and help

regards,


-Mike

Offline WraxallDave

  • Senior Member
  • **
  • Posts: 65
    • Wraxall Weather, Uk
Re: ENSO plotting to graph
« Reply #13 on: September 04, 2021, 03:21:49 AM »
Hi Mike,

To get the exact design you require you will struggle with jpgraphs and Highcharts.

I suggest writing it in <canvas> and JavaScript, if you tell me the values that define when the value is in each segment, I will see what I can do.

It might take me a while, I am a bit busy.

Dave

Offline pimohdaimaoh

  • Senior Contributor
  • ****
  • Posts: 286
  • "Be aware to our nature"
    • PIMOHWEATHER
Re: ENSO plotting to graph
« Reply #14 on: September 05, 2021, 02:25:30 AM »
Hi Mike,

To get the exact design you require you will struggle with jpgraphs and Highcharts.

I suggest writing it in <canvas> and JavaScript, if you tell me the values that define when the value is in each segment, I will see what I can do.

It might take me a while, I am a bit busy.

Dave

Hi Dave,

Here is my struggling example of the whole script attached below, I tried to workout, initally its working, but it creates so many needles viewing all values, maybe you can help fixing it for me. TY

Regards

-Mike-

Offline WraxallDave

  • Senior Member
  • **
  • Posts: 65
    • Wraxall Weather, Uk
Re: ENSO plotting to graph
« Reply #15 on: September 05, 2021, 02:52:28 AM »
Mike,

I thought the idea of a guage was it took one value and displayed that value as a pointer on a scale.

Your example seems to take the entire database of values you used last time.

I have written an example of the gauge using HTML Canvas, but I need a bit longer to add comments to the script.

Dave.

Offline WraxallDave

  • Senior Member
  • **
  • Posts: 65
    • Wraxall Weather, Uk
Re: ENSO plotting to graph
« Reply #16 on: September 05, 2021, 11:14:13 AM »
Hi Mike

I have now commented the HTML Canvas example and a working example can be seen here:

https://www.wraxallweather.co.uk/enoguage.html

I am attaching the zip file so you can see how it can be modified to meet your needs

Regards, Dave.
« Last Edit: September 05, 2021, 01:19:56 PM by WraxallDave »

Offline pimohdaimaoh

  • Senior Contributor
  • ****
  • Posts: 286
  • "Be aware to our nature"
    • PIMOHWEATHER
Re: ENSO plotting to graph
« Reply #17 on: September 06, 2021, 10:24:59 PM »
Hi Mike

I have now commented the HTML Canvas example and a working example can be seen here:

https://www.wraxallweather.co.uk/enoguage.html

I am attaching the zip file so you can see how it can be modified to meet your needs

Regards, Dave.

hello dave,

This is fantastic and I dont expect you give it also a detail same from my sample

Thank You for this, at least I can assured monitoring the sea surface  changes in realtime


regards,

-Mike-