meteomatics · jsolenth · Feb 10, 2023
diff --git 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
@@ -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
diff --git a/src/index.html b/src/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>Data to Highcharts</title>
+
+    <script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
+    <script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script>
+    <script type="text/javascript" src="https://code.highcharts.com/modules/data.js"></script>
+
+</head>
+
+<body>
+    <h1>Example 1</h1>
+    <div id="hc1" class="hc1 chart">
+      <p>Couldn't load the file. Is the project on a server?</p>
+    </div>
+    <h1>Example 2</h1>
+    <div id="hc2" class="hc2 chart"></div>
+
+
+    <script type="text/javascript" src="index.js"></script>
+
+</html>
diff --git a/src/index.js 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
@@ -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: [] })
+    ],
+
+};