live wind with amcharts in HTML Template **solved**

[marco]

Hi Forum
I'm working (again) on a HTML Template with many Meteobridge Var's. It is the easiest way for me, to create a cool Dashboard. The HTML Template upload intervall via FTP will be 1 minute.
One element on the dashboard will be the gauge from "amchart" for wind data. But I need some help to realize a "live" wind chart. The goal is, to autoupdate the chart in a certain time (about 15sec.) without reloading the whole page.

There are some exmaples on the amchart site, but they are using JSON files or PHP for loading external Data. I think there should be a way with all those many upload Services from meteobridge to achieve the goal. Problem is that I do not understand everything in detail, about all those upload possibilities from meteobridge. (noob here)
Or will the only solution be, pushing the wind Data into a Mysql Database and pull them out via PHP? An if yes, can someone of you help me with that?
any help is greatly appreciated.

for test purpose I'm uploaded the whole wind chart via ftp service from meteobridge to the web, for playing and testing arround.
https://wetter.xtra1.ch/demo/amchart.html

one example for external Data: (amchart)

Code: Select all

chart.dataSource.url = "/data/myData.php";
chart.dataSource.updateCurrentData = true;
chart.dataSource.reloadFrequency = 5000;

Many thanks in advance Marco

[marco]

Hi Forum
So the solution for my question was as follow:
1.
create a template ending with: ".txt", with a JSON structure. Then store it in the "template" folder of the meteobridge. In my case the variables are actual wind and daily max gust, see code!

Code: Select all

{
	"wind": [{
		"windact": "[wind0wind-act=kmh.1:--]",
		"windgust": "[wind0wind-dmax=kmh.1:--]"
	}]
}

2. Create an FTP upload, timeframe 15second. Then choose your-template.txt you've created in Step one. And as path choose where you wanna store your file on the webserver and name it, ending with: ".json" e.g. "wind_realtime.json".

To make the gauge work now, with this external json-file, I got help from the amchart-guy, so thanks goes to him

Code: Select all

  // Start script from the amchart guy: to import the JSON file 
    var dataSource = new am4core.DataSource();
    dataSource.url = 'wind_realtime.json'; // Path to the JSON file on your webserser in this demo case same directory as the website
    dataSource.events.on('done', function(ev) { 
      var windValue = +ev.data.wind[0].windact;
      var gustValue = +ev.data.wind[0].windgust;
      hand.showValue(windValue , 2000, am4core.ease.cubicOut); 
      label.text = (windValue) + ("km/h").toString();
      hand2.showValue(gustValue, 2000, am4core.ease.cubicOut);
      label2.text = (gustValue) + ("km/h").toString();
    });
      dataSource.reloadFrequency = 5000; 
      dataSource.load();
  //end of script from amchart guy

3. Watch result here.
https://wetter.xtra1.ch/demo/amchart.html
its just a demo for showing that it works (just copy the whole code from the HTML file to play arround with)
With this solution I don't have to push my whole HTML template with dozens of variables every 15 seconds, just for having a "almost live" Wind gauge. This solution pushes just the 2 wind values up in a 15 second step and the rest of the template could be whatever, one or two minutes. At least for me it is enough. Maybe there are other or cleaner solutions out there, to realize such a thing,
hope this was helpfull.
marco