Problemsa using Chart.js through an Access webbrowser (1 Viewer)

daveinhull

Registered User.
Local time
Yesterday, 22:22
Joined
Mar 4, 2014
Messages
22
Hi, hope someone can help.

I'm trying to use Chart.js through an access Webbrowser and having some problems getting it to work with V3 of Chart.js.
I've got it working using V2 of Chart.js, but when I change to V3 nothing is displayed and I get a script error.
The java script works perfectly in my desktop browser (firefos) and also in the latest version of IE (11 I think) and Edge.
I understand that the webbrowser defualts to using IE 7, but you canforce it to use the latest through a registry hack, which I've tried without success.

Below is the html file that the browser is trying to load. It errors on both the '<script src=' lines and then errors again when it can't find the definition of Chart, used later.

I'm using MS access 2019, 64 bit.

Any thoughts on how to fix (if possible) would be appreciated, thanks in advance.
HTML:
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <script src="https://cdn.jsdelivr.net/npm/chart.js@3.3.0/dist/chart.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0-rc"></script>
        <canvas id="myChart" width="850" height="520"></canvas>
        <title>Programming Lang. Chart</title>
    </head>
    <body>

    //<canvas id="myChart" height="300" width="500"></canvas>
    <canvas id="myChart"></canvas>
    <script>
      var ctx = document.getElementById('myChart');
      Chart.register(ChartDataLabels); // first way of registering the plugin, registers them for all your charts
      var myChart = new Chart(ctx, {
        type: 'bar',
        plugins: [ChartDataLabels], // second way of registering plugin, register plugin for only this chart
        data: {
              labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
              datasets: [{
                data: [12, 19, 3, 5, 2, 3],
                label: 'Advisor Closed MTD',
                backgroundColor: 'rgb(192,111,94)',
                barThickness: 50,
                datalabels: {
                      color: '#FFCE56'
                }
          }],
        },
        options: {
               borderWidth: 2,
              borderColor: 'black',
               borderRadius: 20, 
               backgroundColor: [
                   'rgba(255, 99, 132, 0.2)',  // Bar 1
                   'rgba(54, 162, 235, 0.2)',  // Bar 2
                   'rgba(255, 206, 86, 0.2)',  // Bar 3
                   'rgba(75, 192, 192, 0.2)',  // Bar 4
                   'rgba(153, 102, 255, 0.2)', // Bar 5
                   'rgba(255, 159, 64, 0.2)'   // Bar 6
               ],
              responsive: false,
              plugins: {
                datalabels: {
                      anchor: 'end', // remove this line to get label in middle of the bar
                      align: 'end',
                      //formatter: (val) => (`${val}%`),
                      labels: {
                        value: {
                              color: 'blue'
                        }
                      }
                }
              }
        }
    });
    </script>
</body>
</html>
 
Hi
In case you aren't aware, Thomas Moller is leading a presentation on this topic to the Access Europe User Group tomorrow (Wed 1 Feb) at 18:00 UK time. The link below gives more info and connection details


If anyone can answer your question, Thomas is probably your best bet!
 
Many thanks isladogs, i'm goinh to be on the road aorund that time which is a pity, but I'll see if I can get in touch.
If, in the meantime, anyone else has any thoughts that would be great.
 
Ah. That's a shame. The session will be recorded & the video uploaded to YouTube next week
 
Thomas Moller doesn't have an account at AWF so he asked me to post the following response on his behalf

Chart.js 3.0 and higher is not compatible with the actual webbrowser control. With Chart.js 3.0 the developers dropped th support of Internet erxplorer. They use some commands in Java script which can not be interpreted by the IE emulated from the webbrowser control.

So the answer is, for now, use version 2.9.4 of chart,js
When the new Chromium Edge web broser is released in a few months, hopefully it will support all the features of chart.js v3

BTW you missed an outstanding session 😉👍
 
Sorry I missed it Colin, but was out at a meeting I couldn't avoid.

Looking forward to the video once it's sorted out, as we currently have moved all our vaguely complicated graphing requirements into Excel or Powerpoint, which is a bit painful.
 
Thomas Moller jsChart is available to the Public:
GitHub - team-moeller/better-access-charts: Better charts for Access with chart.js

definitely worth playing and exploring.
Never bothered with Graphs/Charts in MS Access because irrespective of all the time invested trying to making them look attractive they look shit*.. My alternative was using Excel to represent data but never liked that approach. jsChart is a breath of fresh air and looks to be well worth investing in..
 
Yes I agree.
Hopefully it will get even better when the new Edge browser control is released as Thomas should then be able to use charts.js v3 or later
 
@arnelgp
If you watch the video, he explains that he is still using v2.9.4 of charts.js as v3 doesn't work with the current IE web browser
He has re-tested since the AEU session and that is still the case
I haven't tested this myself

@Josef P.
Very nice. Using it as an add-in is a very good idea. How easy was it to convert to an add-in?
Have you sent Thomas a copy?
 
@Josef P.
Very nice. Using it as an add-in is a very good idea. How easy was it to convert to an add-in?
I forked Thomas repository.
... but there is certainly still room for improvement.
The add-in file and an example is in /access-add-in/

It was easy to convert / integrate. I just added a property collection to make it easier to transfer the chart properties.
Other than that, I didn't even look closely at Thomas' code, since I was just building the add-in around the framework.

The add-in is also the library, so only a few code modules need to be copied into the application.

Have you sent Thomas a copy?
Of course - in the spirit of open source. ;)
 
Last edited:
I forked Thomas repository.
... but there is certainly still room for improvement.
The add-in file and an example is in /access-add-in/

It was easy to convert / integrate. I just added a property collection to make it easier to transfer the chart properties.
Other than that, I didn't even look closely at Thomas' code, since I was just building the add-in around the framework.

The add-in is also the library, so only a few code modules need to be copied into the application.


Of course - in the spirit of open source. ;)
Addin works well for me....
 
@Josef P.

Odd; Addon Script works on one PC but not the other... Manually adding works fine.
English conversion for original Install Script...
 

Attachments

  • Install.zip
    Install.zip
    838 bytes · Views: 148
  • Untitled.jpg
    Untitled.jpg
    51.7 KB · Views: 127

Users who are viewing this thread

Back
Top Bottom