This is an update to this blog and includes a source code update from Bootstrap 3 to Bootstrap 4. The older Bootstrap 3 code is still available for download.
When creating a clean Dashboard for your Application, as a developer your requirements would meet the following:
Standard FMX Library used and or the VCL Library.
Bootstrap 4 Uses the container-fluid class (the older code uses bootstrap 3).
The TWebBrowser component serves as the Dashboard container for the Chart.JS library objects.
So why not call the CSS or JS from the App without using HTML forms directly? Simply because it will not render the CSS or JS in the Web Browser due to how the Delphi Web Browser (wrapper) is wired.
How does the Demo Work
The ‘Oncreate’ method will load the html file directly into the web browser.
//The timer interval is set to 200 milliseconds procedure TForm4.Timer1Timer(Sender: TObject); begin timer1.enabled:= false; webbrowserstart; end;
These are the id’s found in the index.html file and is wrapped in the Bootstrap Container-Fluid Class making the form responsive.
<canvas id="doughnut-chart" width="200" height="200"></canvas> </div> <div class="col-xs-6 "> <canvas id="mixed-chart" width="200" height="200"></canvas>
To simulate the data, chart background colors and the labels a procedure for each chart is created.
Lets see the code below…
Whilst this demo only used two Buttons to simulate changing data, calling fast changing data would be easily implemented by replacing the buttons with a single timer that would refresh the Web Browser Dashboard in real-time.
This app will compile to Android (tested) and IOS. Follow the procedure to compile and deploy the App to your device.
Feel free to download the full source for this demo.
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