You can also check out Highcharts https://www.highcharts.com/), chartjs (https://www.chartjs.org/), Fusion Charts (https://www.fusioncharts.com/), and Chartist (https://gionkunz.github.io/chartist-js/). They all have strengths and weaknesses. Personally, after doing some preliminary research, I would pick Chartist, Apex or amCharts depending on my needs (those are in order of least to most chart types). I couldn’t use Google because your data can’t be private, but that might not be an issue for you.
Best posts made by rsrogers4
-
RE: Charts
Latest posts made by rsrogers4
-
RE: Charts
You can also check out Highcharts https://www.highcharts.com/), chartjs (https://www.chartjs.org/), Fusion Charts (https://www.fusioncharts.com/), and Chartist (https://gionkunz.github.io/chartist-js/). They all have strengths and weaknesses. Personally, after doing some preliminary research, I would pick Chartist, Apex or amCharts depending on my needs (those are in order of least to most chart types). I couldn’t use Google because your data can’t be private, but that might not be an issue for you.
-
RE: amCharts and $refs
Thanks, Scott. Your solution worked perfectly out of the box. I did remove carousel animation as well, and it looks great. I learned several new things, including how to post a full Quasar SPA app via Code Sandbox; thanks again.
-
amCharts and $refs
I’m using amCharts4 with Quasar. As per the amCharts4 documentation on integrating with Vue, I am using this.$refs in the mounted method, like this:
mounted() { let chart = am4core.create(this.$refs.chartdiv, am4charts.XYChart);
I had put my chart in a Vue Single-File Component (in this example, called stockChart.vue). This has been working fine for me, but now I’d like the chart to be displayed on a q-carousel-slide. The same chart doesn’t display within the q-carousel-slide, which is stumping me. In other words, this displays the chart as expected:
<template> <q-page class="flex flex-center"> <stockChart /> </q-page> </template>
But this doesn’t display the chart:
<template> <q-page class="flex flex-center"> <q-carousel> <q-carousel-slide> <stockChart /> </q-carousel-slide> </q-carousel> </q-page> </template>
Based on some research, I think this might be because the q-carousel may be using v-if, so the ref isn’t created in the Dom until the slide is shown, but I thought implementing the chart creation code in mounted() [as per the amCharts documentation] would have worked but it doesn’t.
I’m not the most experienced Vue/node.js programmer, so I’m a bit stumped right now. Can someone give me some ideas of where to look or how to debug this?