Quasar e Apex Charts [Sample application]

[patryckx]

Hello person.

I made an example repository of integration between Quasar V1 and Apex Charts.
Integration is extremely easy.
There is a good range of graphics, and responsiveness is great too

we use the npm packages:

• apexcharts
• vue-apexcharts

Github: https://github.com/patrickmonteiro/quasar-apexcharts

Here are some prints:

[s.molinari]

How about making an App Extension for this?

Scott

[patryckx]

@s-molinari I will read the documentation and try to create an extension. I have no experience in this yet.

[s.molinari]

You can also look at the different app extensions already built for examples on how to build one.

https://quasar.dev/app-extensions/discover

Scott

[patryckx]

Added new examples.

[ekoster]

Just wondering for I’ve apex too. In my situation all charts on the dashboard use the same dataset. I just can’t get the ‘event’ from apex click back yet otherwise they would be linked. I have a custom legend now per chart which handles the drill down to the data in a table. I also already have ‘filter buttons’ in the legend which are hidden for the next phase for they didn’t function 100% to my liking. I’m going to try to add crossfilter to the dataset for speedy filtering. I could try phase two as an extension. It’s to include:

• multi datasets on a dashboard
• multi chart cards with which type of chart
• position chart on dashboard (draggable I think)
• save dashboard so you get a dropdown to choose which saved dashboard
• off course the drilldown to the table
• charts probably only thing used from apex, using quasar components for the legend and so forth
• auto color shading per item (now I have an array of 30 colors, I want it auto generated and linking to the legend item so if you have two charts with that legend item its the same color)
• export to something (pdf/excel)

I’ll try to get updates going here and/or in the ‘i made this’ in discord.

[dazaizone]

good day, I am trying to use this, but it ask for access token ? … anyway thanks for this sir.

[patryckx]

UPDATE Example

[jeffatpf]

@patryckx Do you need to support IE 11 with your application and Apex Charts? Apex Charts no longer supports IE 11 without the addition of a few polyfills. I’m in the process of figuring out how to add these polyfills within the quasar environment/webpack, as we still do need to support IE11.

The change itself - https://github.com/apexcharts/apexcharts.js/releases?after=v3.13.1
The fix to the change - https://github.com/apexcharts/apexcharts.js#using-it-with-ie11

[patryckx]

@jeffatpf Unfortunately, the “price” we pay to offer something to IE11 is high. I will do a little test to try to make them work in IE11.
Any advances, I comment here.
Thank you for your feedback!

[patryckx]

@jeffatpf I updated my index.template.html by adding the scripts you mentioned above. It worked correctly in IE11.
DEMO: https://quasar-apexcharts.surge.sh/#/

[dobbel]

@patryckx Did you have to make other concessions to your applications functionality/features/UI by supporting IE beside using polyfills?

[patryckx]

@dobbel just follow the apexcharts documentation and enable compatibility with ie no quasar.conf.js file

https://github.com/apexcharts/apexcharts.js#using-it-with-ie11

[patryckx]

new examples added!

[patryckx]

New examples added!

[lobo]

hi patrick I learning from your examples to implements the apexcharts but in the new framework quasar 2.0.0 I couldnt install so I looking what is changing and in the end I found the new way so I want to pass the information for help others programers so in the file the boot “apex.js” not recognize “Vue” so the new way is this:
file name apex.js
<------------------------implement this code------------------------------------->
import VueApexCharts from ‘vue3-apexcharts’

export default ({ app }) => {
app.component(‘apexchart’, VueApexCharts)
}
<----------------------------------end----------------------------------------------->
and you need have install “vue3-apexcharts” if you use the normal mark error too so that is very important i forgot add the file boot in the quasar.config.js i waste to much time for remember i hope you can improve my informacion in your page for helping other programers i hope this info helping see you and thnx for you excelente page.