Welcome to My Channel and to the creating dashboard video. Open a Browser Start Google Search and type “Google Charts” Click the first link as developers.google.com/chart and open Google Charts. You will see the available properties and chart gallery. For example, when you select bar charts, you are gonna see available list of bar charts and related methods, CODES and properties that can be done with bar charts. As you see in the video, a lot of attributes of a chart or chart components can be customized such as colors, legends etc. As an another example, select pie chart from the list, you will see available options and relevant CODES to embed it into your development environment. You can get the codes and send it to JsFiddle (By the way I recommend you to have an account at jsfiddle.net.) If jsfidle is open, you can take these related codes in that medium. In the jsfiddle tooli there are seperate containers that define the codes (i.e., upper container) , chart related CODES (bottom container), and a chart object as My Daily Activities (right container). In the chart related CODE section, you see a title as “My Daily Activities”. You can change it to something else. You can change the activity categories and their values as well. And click Run Button to see the effects of your editing. Back to developers.google.com now. Copy the CODE section. Paste this CODE into DW (Dreamweaver) as a php file. Click on Live button for Front End view of the CODE. As in jsfidle, change some data values and click Reload button of built in browser of DW As figured out in the guide for google developers section, there are many OPTIONS that can be customized with respect to your preferences. As an example, we can change the title or colors of pies by adding “colors” attribute within “options” (Note that “blue” is written as “bleu” wrongly. Let us remove/modify some slices! Bleu!!! Corrected as Blue! Now, let us arrange the color of the background as yellow! In our project we created an html file named as “dashboard.html” and we have added various chart types by copying these CODES prepared before. As can be seen in the video and Google Development Guide, each chart has different specifications, attributes and parameters whereas the general framework is same. For example, stack type bar charts showing the proportions of categories horizontally, require four arguments as Utilization as Name, Used as proportion, Free as 1-proportion and role as role. Let us jump to phpMyAdmin now. You will see unique table for each chart. Each chart as a table, has its own data fields. Let us look at our bar chart and try to create related field and fill data in for each categories. We can arrange each category and their value dynamically instead of statically embedding into code part. We create a separate html file as “dashboard FINAL.php” to show the difference. For this dynamic setting, firstly we need to have a connection string to our database from the code part. Here we must specify servername, username and password, and name of database. It can be seen in the video. After having created a bridge to the database, it is time to retrieve the relevant data through simple SQL query sentence. After that point, foreach loop enables us to get all data and insert them into a pie chart like in the previous case before connecting this bridge to the database. The next part of this CODE for the bar chart is very similar to the CODE part for pie chart. This is the same for candle stick chart and other types of chart examples. After having filled all chart examples with data, we are closing the database connection. After setting charts and data arrangements, it is time to create our HTML page. We create our links to reference relevant libraries of google/jsapi. Next step is creating simple CODE parts of jquery Here we have similar code parts for other charts. Later, each chart is inserted into a separate cell in a table. Finally we terminate the php code section for HTML part. We have eventually finished all the structure. We can also update all charts anytime upon updating the database and refreshing front end view… Many thanks to Google for providing such an interactive development environment. We would also like to thank to Dreamweaver for providing us product demo version. Special thanks to phpMyAdmin and MySql developers and open source and free to use enablers.