Cannot get vue-google-charts to work in browser mode

137
May 07, 2021, at 9:30 PM

I'm starting to learn Vue.js and can use Google Charts standalone but cannot get the vue-google-charts component to work. I've included both vue.js and vue-google-charts.js as per instructions here https://github.com/devstark-com/vue-google-charts#browser but the chart does not render and get I the following error message

Unknown custom element: <gchart>

Example can be viewed here https://jsfiddle.net/ugLc0zrj/

What am I doing wrong?

Answer 1

In console you can see this error:

Cross-Origin Read Blocking (CORB) blocked cross-origin response https://raw.githubusercontent.com/devstark-com/vue-google-charts/master/dist/vue-google-charts.browser.js with MIME type text/plain. See https://www.chromestatus.com/feature/5629709824032768 for more details.

The script wasn't loaded. Other people had similar issues using raw.githubusercontent.com: Github issue- i couldn't use the component directly on browser

Use this CDN link suggested by authors instead: https://unpkg.com/vue-google-charts@0.3.3/dist/vue-google-charts.browser.js

Working fiddle

Rent Charter Buses Company
READ ALSO
Convert Blob to CSV - date formatting

Convert Blob to CSV - date formatting

Using sqlite3 and a batch file / script, I am able to convert many Blob files to a readable CSV fileTo reduce unnecessary CSV formatting I am trying to fine tune the script

133
Allowing access to USB debugging authorization dialog when in Lock Task Mode

Allowing access to USB debugging authorization dialog when in Lock Task Mode

I'm using device owner to run an app in lock task mode

112
Pagination in a Bootstrap Modal

Pagination in a Bootstrap Modal

I'd like to have pagination in a modal, such that when it refreshes the modal it would stays there

158
Creating text element in seperate cells across columns

Creating text element in seperate cells across columns

What I am trying to do is on button press I will add 4 text elements, each text element in its own cell; beneath its corresponding columnEg

32