amcharts / amcharts3

JavaScript Charts V3
Other
395 stars 129 forks source link

Supporting Vue.js #110

Open wushan opened 7 years ago

wushan commented 7 years ago

Is there any chance that releasing a amcharts component for vue.js ? Since Angular and React have one.

Pauan commented 7 years ago

@wushan We'll consider it. However, nobody on the AmCharts team uses Vue, so we'll have a hard time supporting it.

craigcampbell commented 7 years ago

Any update on this?

martynasma commented 7 years ago

No, not yet. There are no immediate plans for Vue.js support, I'm afraid.

abelovic commented 7 years ago

+1 for Vue support.

Vue currently has 63k+ stars on github and is just about as popular as React and Angular (which you support)

martynasma commented 7 years ago

@abelovic I hear you. We are a small team, though, and can't possibly support everything. Vue is on our radar. Even if we don't have immediate plans or resources to implement the support, we might come back to it in the future.

I hope you find this reasonable.

jgn-epp commented 7 years ago

Still hoping this will happen one day.

vsg24 commented 7 years ago

I want this.

deemaxx commented 6 years ago

+1

ropinheiro commented 6 years ago

+1

mitrm commented 6 years ago

What do you use in the alternative amcharts, for vuejs?

jgn-epp commented 6 years ago

I still use amcharts and use watchers to call update functions.

LobsterMan commented 6 years ago

+1

u-Azathoth commented 6 years ago

+1

martynasma commented 6 years ago

We've just published a tutorial on using amCharts with Vue.js:

https://www.amcharts.com/kbase/using-amcharts-vue-js-webpack/

I know it's not exactly the same as native component, but still might help someone.

bragma commented 6 years ago

@martynasma thanks for the tutorial, but please don't put vue out of your sights. :)

martynasma commented 6 years ago

@bragma Noted ;)

peluprvi commented 6 years ago

And please don't forget to place it in https://github.com/vuejs/awesome-vue#charts

romakov commented 6 years ago

When I try create a chart by the tutorial, I get some error like this:

TypeError: r.a.makeChart is not a function

ekamgit commented 6 years ago

@martynasma I am receiving TypeError: __WEBPACK_IMPORTED_MODULE_1_amcharts3___default.a.makeChart is not a function.

ailon commented 6 years ago

@romakov @ekamgit are you just following the tutorial or do you get the error in your own/some more elaborate setup? If the latter, would it be possible for you to share some code so we can investigate?

romakov commented 6 years ago

<div id="chartdiv" style="width: 100%; height:400px;">

`

<script>
import AmCharts from 'amcharts3'
import AmSerial from 'amcharts3/amcharts/serial'

export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  created () {
    AmCharts.makeChart("chartdiv",
      {
        "type": "serial",
        "categoryField": "type",
        "chartCursor": {},
        "graphs": [
          {
            "type": "column",
            "title": "Pizza types",
            "valueField": "sold",
            "fillAlphas": 0.8
          }
        ],

        "dataProvider": [
          { "type": "Margherita", "sold": 120 },
          { "type": "Funghi", "sold": 82 },
          { "type": "Capricciosa", "sold": 78 },
          { "type": "Quattro Stagioni", "sold": 71 }
        ]
      }
    );
  }
}
</script>

I make component by your guide, but AmCharts is empty object without a 'makeChart' method

ailon commented 6 years ago

@romakov Looks like amCharts package is missing in your project. Are you sure you've installed it from npm?

npm install amcharts/amcharts3 --save

romakov commented 6 years ago

@ailon Yes, I did it many times, but I still get the same error. Let's try do it step by step

peluprvi commented 6 years ago

@romakov Try to place it inside a this.$nextTick(() => { /* AmCharts.makeChart here */ }). That is the majority difference between your setup and mine. The other thing is that I imported AmChart in my main.js, but I don't think this is the case. In my package.json it is in dependencies as "amcharts3": "github:amcharts/amcharts3"

quillhon commented 6 years ago

@abelovic try to change import AmCharts from 'amcharts3' import AmSerial from 'amcharts3/amcharts/serial' to import 'amcharts3' import 'amcharts3/amcharts/serial'

and then use window.AmCharts.makeChart(...

@martynasma Do u really tried the tutorial? The amcharts3 library doesn't support import/module method. The js file only place AmCharts in global(window) scope.

martynasma commented 6 years ago

@quillhon No, I didn't. It was written, verified and reverified by my colleague @ailon. I'm going to leave it here, since I'm not competent to comment on the topic. If you elaborate what you are trying to do, maybe someone in this thread will be able to figure out why it's not working.

cartbeforehorse commented 6 years ago

@martynasma

  1. Frustrating that the documentation on your site suggests that amCharts does come with Vue support. At the very least you could update your documentation to inform the world of the true situation.
  2. I understand that you're close to a v4 release of amCharts, so you're probably prioritising that at the moment. Nevertheless, and ETA would be much appreciated. I would "really" like to use amCharts on my Vue development projects, but without this kind of support may have to find an alternative.