diff --git a/README.md b/README.md index 1718f97..c944470 100644 --- a/README.md +++ b/README.md @@ -2,3 +2,21 @@ Meteomatics Data To Highcharts [Meteomatics API](https://api.meteomatics.com/Overview.html "Documentation Overwiev") =================================================================================== + + +This is a short example demonstrating how data of the meteomatics API can be used to render a chart with Highcharts. + +**Installation Instructions:** + +- Install dependencies `npm install`. +- Build the example and serve it using a development server: `npm run start`. +- Open the example in your browser using the url printed to the console. Most likely [localhost:8080](http://localhost:8080). + +**Explanation:** + +The development server is necessary to work around the [Cross-Origin Resource Sharing (CORS)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) +policy of the browser. For local develop with the development server you can modify the `user:password` placeholder on the `webpack.config.js` file + + +If you set this system up for production. Instead of using the development server, you should set up a production grade proxy +to forward data to the meteomatics API. This proxy should also attach your credentials. Do not serve your username and password to the browser. diff --git a/package.json b/package.json new file mode 100644 index 0000000..0dd3d21 --- /dev/null +++ b/package.json @@ -0,0 +1,26 @@ +{ + "name": "javascript-csv-data-to-highcharts", + "version": "1.0.0", + "description": "[![logo](https://static.meteomatics.com/meteomatics-logo.png)](https://www.meteomatics.com \"Meteomatics - Your Experts in Weather Data Processing\")", + "main": "index.js", + "scripts": { + "start": "webpack-dev-server", + "build": "webpack" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/meteomatics/javascript-csv-data-to-highcharts.git" + }, + "author": "", + "license": "ISC", + "bugs": { + "url": "https://github.com/meteomatics/javascript-csv-data-to-highcharts/issues" + }, + "homepage": "https://github.com/meteomatics/javascript-csv-data-to-highcharts#readme", + "devDependencies": { + "html-webpack-plugin": "^4.5.2", + "webpack": "^4.46.0", + "webpack-cli": "^3.3.12", + "webpack-dev-server": "^3.11.2" + } +} diff --git a/php_request_script.php b/php_request_script.php deleted file mode 100644 index 82c5f83..0000000 --- a/php_request_script.php +++ /dev/null @@ -1,26 +0,0 @@ - array ( - 'header' => 'Authorization: Basic ' . base64_encode("$username:$password") - ) - ) - ); - - $response = []; - $url = "https://api.meteomatics.com/2018-01-01T06:00:00ZP2D:PT1H/t_2m:C,relative_humidity_2m:p/47.423336,9.377225/csv"; - $response = file_get_contents($url, false, $context); - - return $response; - - } -?> diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..25890a9 --- /dev/null +++ b/src/index.html @@ -0,0 +1,25 @@ + + + + + + Data to Highcharts + + + + + + + + +

Example 1

+
+

Couldn't load the file. Is the project on a server?

+
+

Example 2

+
+ + + + + diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..cf7b53a --- /dev/null +++ b/src/index.js @@ -0,0 +1,54 @@ +$.ajax({ + type: "GET", + url: '/api/meteomatics/2023-02-10T00:00:00Z--2023-02-13T00:00:00Z:PT3H/t_2m:C,relative_humidity_2m:p/47.423336,9.377225/csv', + success: function (data) { + $('#hc1').highcharts({ + chart: { + type: 'column' //or spline + }, + data: { + csv: data, + itemDelimiter: ';', + lineDelimiter: '\n' + }, + title: { + text: 'Meteomatics CSV Data to Highcharts' + }, + subtitle: { + text: 'From csv file must be on a server' + } + }); + }, + error: function () { + console.log('error'); + } +}); + +//For testing local without Server Side +var csvString = `validdate;t_2m:C;relative_humidity_2m:p + 2017-06-07T13:35:00Z;13.6;56.5 + 2017-06-07T16:35:00Z;13.4;60.2 + 2017-06-07T19:35:00Z;11;68.4 + 2017-06-07T22:35:00Z;8.9;77 + 2017-06-08T01:35:00Z;7.4;84.2 + 2017-06-08T04:35:00Z;9.1;70.3 + 2017-06-08T07:35:00Z;14.3;57.5 + 2017-06-08T10:35:00Z;18;56.4 + 2017-06-08T13:35:00Z;19.8;53.9 + ` +$('#hc2').highcharts({ + chart: { + type: 'column' //or spline + }, + data: { + csv: csvString, + itemDelimiter: ';', + lineDelimiter: '\n' + }, + title: { + text: 'Meteomatics CSV Data to Highcharts' + }, + subtitle: { + text: 'From csv in a string' + } +}); diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 0000000..0e9a8ce --- /dev/null +++ b/webpack.config.js @@ -0,0 +1,31 @@ +var path = require("path"); +var HtmlWebpackPlugin = require("html-webpack-plugin"); + +module.exports = { + entry: "./src/index.js", + output: { + filename: "index.js", + path: path.resolve(__dirname, "dist"), + }, + devServer: { + proxy: { + "/api/meteomatics": { + target: "https://api.meteomatics.com", + auth: "user:password", + pathRewrite: { + "api/meteomatics/": "", + }, + cookieDomainRewrite: "localhost", + changeOrigin: true, + secure: false, + logLevel: "info", + }, + }, + }, + plugins: [ + new HtmlWebpackPlugin({ + template: "./src/index.html", + chunks: [] }) + ], + +};