No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Quasar e Apex Charts [Sample application]

    Useful Tips (NEW)
    7
    16
    4023
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • patryckx
      patryckx last edited by

      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:
      753cc2e9-a36d-42c5-836f-63b55c614596-image.png

      11388577-6c7f-42b7-bed6-082dc613f386-image.png

      1 Reply Last reply Reply Quote 3
      • s.molinari
        s.molinari last edited by

        How about making an App Extension for this?

        Scott

        patryckx 1 Reply Last reply Reply Quote 1
        • patryckx
          patryckx @s.molinari last edited by

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

          1 Reply Last reply Reply Quote 0
          • s.molinari
            s.molinari last edited by

            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

            1 Reply Last reply Reply Quote 1
            • patryckx
              patryckx last edited by

              Added new examples.
              02012e6d-d1bf-498c-9fc1-be37858db89e-image.png

              1 Reply Last reply Reply Quote 1
              • E
                ekoster last edited by

                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.

                1 Reply Last reply Reply Quote 1
                • dazaizone
                  dazaizone last edited by

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

                  1 Reply Last reply Reply Quote 0
                  • patryckx
                    patryckx last edited by

                    UPDATE Example

                    0b265e03-c9e9-460d-9138-18a278a0c6da-image.png

                    1 Reply Last reply Reply Quote 0
                    • J
                      jeffatpf last edited by 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

                      1 Reply Last reply Reply Quote 1
                      • patryckx
                        patryckx last edited by 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!

                        1 Reply Last reply Reply Quote 0
                        • patryckx
                          patryckx last edited by

                          @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 1 Reply Last reply Reply Quote 0
                          • dobbel
                            dobbel @patryckx last edited by dobbel

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

                            patryckx 1 Reply Last reply Reply Quote 0
                            • patryckx
                              patryckx @dobbel last edited by

                              @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

                              1 Reply Last reply Reply Quote 0
                              • patryckx
                                patryckx last edited by

                                new examples added!

                                1206668d-6251-4f63-8f23-a067f1ffac5a-image.png

                                1 Reply Last reply Reply Quote 1
                                • patryckx
                                  patryckx last edited by

                                  New examples added!

                                  Captura de Tela 2021-01-08 às 11.22.56.png

                                  Captura de Tela 2021-01-08 às 11.23.02.png

                                  1 Reply Last reply Reply Quote 1
                                  • L
                                    lobo last edited by

                                    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.

                                    1 Reply Last reply Reply Quote 0
                                    • First post
                                      Last post