Better Access Charts

Access Europe session
Wed 1 Feb 2023
BETTER ACCESS CHARTS

The real ”Modern Charts” for Access
Thomas Möller, www.Team-Moeller.de

Thomas Möller Better Access Charts - the real "Modern Charts" for Access 2
About me
• Thomas Möller (Graduated banker)
• 2000 - 2013 Access developer
• 2013 - 2017 Data Governance /
Data Quality Management
• 2017 - 2021 Project Manager DWH
• Since 04/2021 Head of Process-Team
• 2007 - 2016 MVP MS Access
• Spare-time activity: Team-Moeller.de
Contact
• Website www.Team-Moeller.de
• Blog Blog.Team-Moeller.de
• E-Mail Thomas@Team-Moeller.de
• Twitter https://twitter.com/ThomasMoeller
• GitHub https://github.com/team-moeller
• XING https://www.xing.com/profile/Thomas_Moeller40
• Linked In https://www.linkedin.com/in/TeamMoeller
• Facebook https://www.facebook.com/TeamMoeller
• MVP http://mvp.microsoft.com/de-de/mvp/Thomas%20Moeller-37548
Schedule
• Charts in Access
• How it came about?
• External dependencies
• Chart.js basics
• Data, Label, Legend, …
• Class modules
• Implementation, data binding, documentation, …

Classic Charts
Modern Charts
Alternative Solutions
CHARTS IN ACCESS
Classic Charts *
• Microsoft Graph Chart, since Office 97
• ActiveX control
• Integrated since Access 2010
• Look somewhat dated
• Non-intuitive
• Steep learning curve
* Modern Charts in Access 2019: https://www.youtube.com/watch?v=LW2Ct8Npyzs

Modern Charts *
+ Modern design, easy to use
+ No external dependencies
+ Usable in Continuous forms
- Limited set of chart types

- Limited formatting options
- No recordset as data source
* Modern Charts in Access 2019: https://www.youtube.com/watch?v=LW2Ct8Npyzs

Alternative solutions
• Export to Excel
• Reporting with Excel
• But on the web …

• … there are such great solutions
• Isn‘t that also

possible with Access?
Demo
Survey
• I use Classic Charts …
regularly, rarely, never
• I use Modern Charts …

• I do charting with Excel …

Initial situation
First thoughts
The first try
Webbrowser control
Schematic structure
HOW IT CAME ABOUT

Initial situation
Home
Office Autumn
Corona
Getting
It‘s dark
raining
Need
Monotony I can not
distraction
get out
First thoughts
• Charts with Javascript
• Think, I have seen
something like this before
• Research on the
Internet
• Can‘t find
anything suitable
The first try

• *.html file with chart „commissioned“
• Choice of framework free *.html
file
• Static *.html file received
• Database
Demo
• Form with webbrowser control
• Code to load the file
• Works as expected
Digression webbrowser control

• Available since Access 2010
• Extensively documented by Daniel Pineault:
Everything You Never Wanted to Know

About the Access WebBrowser Control
• Feature Browser Emulation

• Mark of the Web (MOTW)
Schematic structure
Access database File system
Form
Webbrowser control
Existing dependencies
Chart.js: File vs. CDN
Digression: CDN
Feature Browser Emulation
Solution „without“ dependencies
EXTERNAL DEPENDENCIES
Existing dependencies
Form
Webbrowser control
Chart.js
• Local file
• In the application directory
• Or in a central directory
• Where is the file from?
• Save file to a table …
• … and export if necessary
• CDN
• Internet connection required
Digression: What is a CDN?

• CDN: Content Delivery Network
• Network of regional distributed Servers
• Goals:
• Resiliency
• Fast delivery
• Example: Cloudflare
• Chart.js, for example, is also hosted here
• In more than 250 data centers spread all over the world
Feature Browser Emulation

• Source: Daniel Pineault
• Webbrowser emulates IE 7
• Setting in the registry
• Can be customized using VBA
• Better alternative
• Directive in HTML Code
“Without“ dependencies
Form
Webbrowser control
CDN
Licence
Basic structure of the *.html file
Chart types, data and labels
Colors, title, legend
Axes and plugins
CHART.JS BASICS
Licence
• Published under “MIT Licence“:
 Freely useable, even in commercial products

Basic structure of the *.html file (1)

Mark of the Web
Feature browser emulation
References to scripts
HTML 5 canvas
Basic structure of the *.html file (2)

Get canvas element
Create chart
Definition Chart
Chart types
• A total of 9 chart types: https://www.chartjs.org/docs/2.9.4/charts/
Typ In Excel Stacked? Filled?

Line Line Yes Yes
Bar Column Yes
horizontalBar Column Yes
Radar Radar Yes
Doughnut Doughnut
Pie Pie
Polar Area ---
Bubble Bubble
Scatter Scatter
Data and lables

• Definition of lables und datasets
• https://www.chartjs.org/docs/2.9.4/charts/radar.html#data-
structure
Colors
• Definition within datasets possible
• https://www.chartjs.org/docs/2.9.4/general/colors.html
• RGB, RGBA, standard color codes
• Alternative: Plug-In
Chart title
• Definition of the title and its properties
• https://www.chartjs.org/docs/2.9.4/configuration/title.html
Legend
• Definition of the legend and its properties
• https://www.chartjs.org/docs/2.9.4/configuration/legend.html
Axes
• Definition of the axes and their properties
• https://www.chartjs.org/docs/2.9.4/axes/
Plugins
• Definition of plugins and their properties
• https://www.chartjs.org/docs/2.9.4/developers/plugins.html
• List of plugins and other extensions:

• https://github.com/chartjs/awesome
Basic ideas
Schematic structure
Installation in your application
Data binding, properties
Documentation
CLASS MODULES
Basic ideas
• Easy integration in your own application
• No prior knowledge of HTML/Javascript required
• No detailed knowledge of Chart.js necessary
• Simple data binding
• Implementation in class modules

• Configuration via VBA code
• Similar to Excel charts
• IntelliSense, where possible
Schematic structure
Table Module
Form
Webbrowser control
CDN
Installation in your application

1. Import of class modules Demo
2. Insert webbrowser control

3. First lines of Code (basic function)
Data binding and chart type

• Select chart type from enumeration
• Pass table, query, SQL string or recordset
• Specify field with description
• Specify data fields
Specify additional properties

• Insert title
• Insert legend
• Format Axes
• … and other options
Properties overview
Published on GitHub
Documentation on the wiki

Additions on the blog

Contributions?
To be continued …
• Hierarchy of classes
• Additional properties
• Solution for reports
• Get rid of the html file
• Adjustments to chart.js version 3

Links
Links
Links
RESOURCES
Links
• GitHub Project: Better Access Charts
• https://github.com/team-moeller/better-access-charts
• Blog posts on Better Access Charts

• https://blog.team-moeller.de/search/label/Better%20Access%20Charts
• Better Access Charts Wiki

• https://github.com/team-moeller/better-access-charts/wiki
• Roadmap to Better Access Charts

• https://github.com/team-moeller/better-access-charts/wiki/roadmap
• Documentation on Better Access Charts

• https://github.com/team-moeller/better-access-charts/wiki/documentation
• Releases on Better Access Charts

• https://github.com/team-moeller/better-access-charts/releases
Links
• Chart.js Homepage
• https://www.chartjs.org/
• Chart.js Documentation
• https://www.chartjs.org/docs/latest/
• Chart.js Samples
• https://www.chartjs.org/docs/latest/samples
• YouTube Video „Getting Started With Chart.js“

• https://www.youtube.com/watch?v=sE08f4iuOhA&t=761s
• Curated list on Chart.js

• https://github.com/chartjs/awesome
Links
• WebBrowserControl object (Access)
• https://docs.microsoft.com/en-us/office/vba/api/access.webbrowsercontrol
• Everything you never wanted to know about …

• https://www.devhut.net/2019/10/18/everything-you-never-wanted-to-know-about-the-access-webbrowser-
control/
• MS Access – Improved Charting
• https://www.devhut.net/2019/10/10/ms-access-improved-charting/
• Modern Charts in Access 2019

• https://www.youtube.com/watch?v=LW2Ct8Npyzs
Access Europe session
Wed 1 Feb 2023
BETTER ACCESS CHARTS

The real „Modern Charts“ for Access
Thomas Möller, www.Team-Moeller.de

Better Access Charts

Uploaded by

Copyright:

Available Formats

Better Access Charts

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Better Access Charts

Uploaded by

Copyright:

Available Formats

Access Europe session

Wed 1 Feb 2023

BETTER ACCESS CHARTS

Thomas Möller, www.Team-Moeller.de

• How it came about?

• Data, Label, Legend, …

• Implementation, data binding, documentation, …

* Modern Charts in Access 2019: https://www.youtube.com/watch?v=LW2Ct8Npyzs

- Limited set of chart types

* Modern Charts in Access 2019: https://www.youtube.com/watch?v=LW2Ct8Npyzs

• But on the web …

• Isn‘t that also

• I use Modern Charts …

• I do charting with Excel …

HOW IT CAME ABOUT

The first try

Digression webbrowser control

• Extensively documented by Daniel Pineault:

Everything You Never Wanted to Know

• Feature Browser Emulation

Digression: What is a CDN?

Feature Browser Emulation

 Freely useable, even in commercial products

Basic structure of the *.html file (1)

Feature browser emulation

Basic structure of the *.html file (2)

Typ In Excel Stacked? Filled?

Data and lables

• RGB, RGBA, standard color codes

• List of plugins and other extensions:

• Implementation in class modules

Installation in your application

2. Insert webbrowser control

Data binding and chart type

Specify additional properties

Documentation on the wiki

Additions on the blog

• Solution for reports

• Get rid of the html file

• Adjustments to chart.js version 3

• Blog posts on Better Access Charts

• Better Access Charts Wiki

• Roadmap to Better Access Charts

• Documentation on Better Access Charts

• Releases on Better Access Charts

• YouTube Video „Getting Started With Chart.js“

• Curated list on Chart.js

• Everything you never wanted to know about …

• Modern Charts in Access 2019

BETTER ACCESS CHARTS

Thomas Möller, www.Team-Moeller.de

You might also like