Posted on 23rd Jan 2017 in Bootstrap 3
Working with PHP PDO and MySQL, there comes a time when you require a Graphical Outcome of your stored data.
I ended up choosing Morris.js library linked with the Raphael.js graphic library to which produces a really good Client professional output.
What I liked about Morris, is its easy output from a Json (string) input. So all it requires is a Json encoded output from the Database at the server then sent to the client-side web browser with the output.
Using the Source examples that I provide as a download, demonstrates how to easily populate Morris Charts dynamically with PDO-PHP using Json with little markup code required. The Source includes examples for a Bar chart, Line chart, Area chart and a Donut chart.
Two methods are found in the source code.
• A Static method connecting directly using only Json static data.
Download the file folder and extract the files. Extract the morris.sql file with PhpMyAdmin or similar into your MySQL database server. Run the index.php file in a XAMPP or WAMP stack. Full Source Code is provided includes Bootstrap 3 versioned files.
Using a PDO connection, PDO - php easily pulls the Server- Side data and using a built in features, convert the data to Json efficiently with minimal code.
The trick is to create the correct Aliases in the SQL statement when calling the Database. The result is a quick and easy way to parse the results into the required Json format to be sent to the Morris Chart.
Let work with the Donut Chart which requires the label and value for each input. We change the sql statement to reflect the ‘ip as label’ and ‘count(*) as value’. This will allow us to prepare and execute the PDO statement. PDO performs all the magic in FETCH_ASSOC using fetchAll.
<?php $sql ="SELECT ip as label, count(*) as value from totalview GROUP by label ORDER BY value DESC LIMIT 5"; $stmt = $PDO->prepare($sql); $stmt ->execute(); $data=$stmt->fetchAll(PDO::FETCH_ASSOC); $phpobj =json_encode($data); ?>
Pulling the data from the Database requires low overhead. The conversion to Json is quick and easy and sending light- weight data from the Server does not slow the response in the browser.
This project uses MorrisChart.js. The code uses PHP 5.6 and higher.
This project is licensed under the MIT license agreement. This means that you can use the code as you wish commercially or modify as needed.
October 2018Delphi VCL Buttons in DBGrid
September 2018Delphi Libusb Library Introduction
August 2018Delphi Object directly to a Json string in a REST Client
July 2018Delphi FMX Leaflet Plotter using OSM Maps
June 2018C2PAS32 Convertor Application
May 2018Delphi PDF Embedded viewer with PDF.js
March 2018Delphi FMX - Changing TCharacter to TCharHelper
January 2018Delphi FMX Dashboard using Chart.JS
December 2017PHP Slim REST Server & Delphi Auth Part 5
November 2017Delphi FMX REST Client App Part 4
October 2017Delphi VCL REST Pricing Client App Part 3
September 2017Delphi REST VCL Client Basic Auth Part 2B
August 2017Delphi REST Client Part 2A
July 2017PHP REST Server and Delphi Client Intro
June 2017Delphi SQLite Encryptor-Decryptor Tool
May 2017Create a Visual IP Address Geolocation with PHP
March 2017PHP Downloader using Countdown timer
January 2017Morris Charts and PHP-PDO
December 2016CSS to create a functional Toggle Button