What componets are needed? Webserver with php enabled. If you have one you could use this.

If you don t h ave you maybe want to use xampp or another appliance . MySQL Server. If you have one you could use the existing one. The xampp appl iance for example contains mysql. Download the Highstock Version from http://www.highcharts.com/download Download the latest GitHub Repository from Arduino simple Chart at https://g ithub.com/edvler/Arduino_simple_chart/archive/master.zip Where to install anything? If you use xampp you could install it under c:\xampp\ (my suggestion)! Extract the Arduino simple Chart zip. In the Zip file you will find a folder PUT_ON_YOUR_WEBSERVER. Copy the folder arduino_chart to your document root folder of your webserver . On Linux it maybe /var/www. On Windows and xampp use c:\xampp\htdocs (if you f ollowed my suggestion how to install xampp). Put the folder arduino_chart under the folder c:\xampp\htdocs. Extract the HighStock zip File. In this Zip file you will find a folder call ed js. Copy the folder js to your arudino_chart webfolder under js. Put the folder js under c:\xampp\htdocs\arduino_chart\. All the other folders in the zip file not relay needed. This are examples an so on. Now startup your webserver and your MySql database, if not already running. Configuration / Setup: DB Setup Step 1: Create a MySQL User. The easiest way to do this is with phpmyadmin. If you using xampp open your browser and type http://127.0.0.1/phpmyadmin. On Linux or other webserver installations the URL is often the same. For the first setup it s necessary to give the user full right s on the MySQL Server . In the next step the database schema would be setup. DB Setup Step 2: Open the Script db_config.php (located under <path_to_your_webroot>\arduino_char t\database) 1. Create a user in your MySQL which can create a schema (maybe you use phpmyadm in or MySQL Workbench) 2. Setup the connection parameters in the db_config.php script 3. Change the $setup variable to true! 4. Call this script in your browser (eg. http://127.0.0.1/arduino_chart/database /db_config.php). If the script finished you will see how many SQL commands was e xecuted and how many executed successfully. Only go ahead if all statements comp leted successfully. 5. Change the $setup back to false! FINISHED DB Setup. Now proceed with uploading the Scetch to your Arduino. Setup Arduino to get JSON over HTML:

Now you need the Arduino IDE (Install how to: http://www.edvler-blog.de/arduinosoftware-installieren/) . Please open the example Scetch WEBSERVER_JSON_SAMPLE i ncluded in the directory Arduino_code from the GitHub Repository. Change your MAC, IP-Address and your Subnet to your needs. The network parameter s are placed at the beginning of the code. The most interesting section in the source code is the generation of the JSON St ring. You will find the source code below line 100. Please look at the comments. There you will find an example how to get your valu es into the JSON format. Upload the Scetch to your Arduino. Test it by opening the Arduino IP in your Bro wser. Copy the JSON String to the website http://json.parser.online.fr to check if the JSON string is valid (see right side of the website). Don t proceed if the validation fails! Setup tasks to collect data from your Arduinos: To collect values from your Arduino devices you need to create a scheduled task. In Windows you could create a task with the taskplaner. In linux you could use crontab. From the taskplaner or crontab call the script json_from_arduino.php located und er your webroot/arduino_chart/call_from_taskplaner/ with the two parameters id a nd url. Example Call (assumed u using xampp installed in c:\xampp\): c:\xampp\htdocs\arduino_chart\call_from_taskplaner\json_from_arduino.php id=1 ur l= http://ARDUINO_IP For the id you need to choose unique number to identify this Arduino in the data base The url parameter has to be a Webpage, which returns a pure JSON string. Abstract (average your data) to get more performance on chart loading As longer as you collect data from your Arduino s as more datasets you will get. M aybe you log vales every Minute or shorter. This produces a lot of datasets. To get a good performance while working with the chart the values abstracted in mor e tables. Each table holds averaged datasets for a specific time range. Tables existing ar e DataStore_hour, DataStore_day and DataStore_week If you choose a time range of more days the used tables would be DataStore_day w hich holds less datasets as the original DataStore. If you choose a time range of 3 month the used table would be DataStore_week and so on To abstract your data use the abstract_DataStore.php located in the webroot/ardu ino_chart/call_from_taskplaner folder with the taskplaner (windows) or crontab ( linux). I prefer to call this Script every 30 minutes.

Chart Setup The last step is to set up the chart config. Open the chart_config.js in your we broot folder. There you can configure some parameters. Please place the url of your db_access.php. Replace the IP 127.0.0.1 with th e IP of your webserver! The other parameters set the title and subtitle as well the loading message. FINISH Open the browser and type the URL of your Arduino simple chart installation. If you installed the webserver on localhost the URL is http://127.0.0.1/arduino_cha rt. You will see a welcome Page with some example charts. Click on one of the pictur es to choose the chart type. Each chart type could be used. You could use it eve n all parallel.

If you have any question or problems contact me via the blog article Arduino sim ple chart . www.edvler-blog.de/arduino-simple-charts-diagramm-visualisierung-messw erte