The Wayback Machine - https://web.archive.org/web/20201106134825/https://github.com/shutterstock/rickshaw/issues/610
Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Gettings vis.selectAll is not a function when created from within Vue #610

Open
davidsielert opened this issue Feb 9, 2018 · 5 comments
Open

Comments

@davidsielert
Copy link

@davidsielert davidsielert commented Feb 9, 2018

Nothing is really spectacular from my vue component code but I'm getting

    at klass.render (rickshaw.js:3603)
    at Rickshaw.Graph.render (rickshaw.js:525)

with this simple creation code..

 this.graph = new Rickshaw.Graph({
        element: document.querySelector(`#VB-${this.id}`), //have to call id like this cause the uuid's can start with an integer
        renderer: 'area',
        stroke: true,
        series: [{
            data: this.data,
            color: this.color,
        }]
    });
    this.graph.render();
@davidsielert
Copy link
Author

@davidsielert davidsielert commented Feb 10, 2018

This seems to be related to storing the instance on the Vue instance (this) Compare these...

Doesn't work - throws vis.selectAll is not a function

 this.graph = new Rickshaw.Graph({
        element: document.querySelector(`#VB-${this.id}`), //have to call id like this cause the uuid's can start with an integer
        renderer: 'area',
        stroke: true,
        series: [{
            data: this.data,
            color: this.color,
        }]
    });
    this.graph.render();

This code works

var rs1 = new Rickshaw.Graph({
        element: document.querySelector(`#VB-${this.id}`), //have to call id like this cause the uuid's can start with an integer
        renderer: 'area',
        stroke: true,
        series: [{
            data: this.data,
            color: this.color,
        }]
    });
    rs1.render();

But why would where I'm storing the instance variable matter ? I don't understand this..

@hinguabhishek
Copy link

@hinguabhishek hinguabhishek commented Mar 21, 2018

Hi
I am facing same issue, need to declare a Graph object globally, when I create graph object as component member graph not rendering. can you please provide solution for this.

@vinnitu
Copy link

@vinnitu vinnitu commented Sep 10, 2018

so... it was in march.. have you found solution?

@hinguabhishek
Copy link

@hinguabhishek hinguabhishek commented Sep 11, 2018

@laemtl
Copy link

@laemtl laemtl commented May 7, 2019

Found a solution: Vue wraps all data elements in an observer. This override all methods attached to them. In order to solve this issue, create graph as an array:
data() {
return {
graph: []
},
methods: {
initGraph() {
this.graph[0] = new Rickshaw.Graph({
...
});
this.graph[0].render();

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
4 participants
You can’t perform that action at this time.