The console is reporting

You may have an infinite update loop in watcher with expression "options"

When using the following code.

<network class="network" ref="network" :nodes="this.vue2vis.nodes" :edges="this.vue2vis.edges" :options="options"

options: { layout: { hierarchical: { direction: "LR" } }, nodes: { shape: "square" }, }

When ever "hierarchical" is used even while empty, this message appears.

I am trying to add a "select" event so whenever user selects an element on the timeline, it adds a css class to a v-card that holds the details of that element.

<timeline ref="timeline" :items="events" :options="{}" :events="['select']" @select="highlightSelected" :groups="[{id: 0, content: ''}]"></timeline>

<v-card v-for item in messages>{{item.title}} </v-card>

highlightSelected(props){ console.log(props.items) }, It returns the item.title of the selected element. Now I want to check this item.title with the one in v-card and if they were the same, I want to highlight the card. I appreciate your help

How to use network view?

I tried importing this.
import { Timeline } from 'vue2vis';
But it is giving me same error
This dependency was not found:

* vue2vis in ./src/main.js

To install it, you can run: npm install --save vue2vis
> Listening at http://localhost:8080

Hi,
I'm trying to change the localisation from "en" to "de".
From Vis documentation (http://visjs.org/docs/timeline/#Methods) I see that there is an option for that, as long moment.js with locales is installed.
In my vue.js project I have added moment.js and got it working, so that the localisation is set global to "de".
But it seems that if I configure the options for the timeline like below, it doesn't have any effect at runtime:
... timeline: { groups: [ { "id": "0", content: 'Timeline 1' }, ], items: [ { id: '0', group: '0', start: new Date(), content: 'event', title: 'xxx', className: '' }, ], options: { locale: 'de', } } ...
Do I missing something else?
Best regards
Alex

Is there any way to change the grid for the drag and the resize when dragging and resizing items in vis.js. Or is it possible to turn off the grid for the drag and the resize?

Thanks.

When trying to do next:

this.$refs.network.redraw()

getting:

TypeError: Cannot read property 'redraw' of undefined

Hi

I'm trying to add multiple instance of network on the same page. This almost works, but calling methods via $refs.networkA.... gets mixed up.

As far as I can see, the reason is the module variable "network" inside Network.vue. It will point to the last instance created.

Hi, I use your network component in my project. but I have a trouble when the nodes more than 7000。I will draw the graph very long and the whole page is very carlton. How to optimize the interface ？

Hi,
The network example shows the usage of the network module. However, if dragging one node (say node data n) to another location, the attributes n.x and n.y won't change accordingly. One may simply replicate this by adding one duplicate instance of network component and binding the same data (nodes and edges) with networks. If one node (node 1) in one network is moved, the corresponding node (node 1') won't move in the other network. It looks the data are not binded in the other direction.
I try to have a workaround by binding a method to handle the dragging event. However, I cannot since I'm not using webpack and in-DOM template would induce an error.
Could you share any clue? Thanks.

There's a link in the readme to a changelog, but I don't see it anywhere. The link 404's. Am I missing something?

Hello,

I'm trying to make a drop event after I drag my items but when I drop it nothing happens the function that i set for the drop event is not called.

In my template I set the event for drop.

<timeline v-if="items.length > 0" ref="timeline" :items="items" :groups="groups" :options="options" :events="['drop', 'changed']" @drop="myDropCallback()"> </timeline>

And in methods I set the function.

myDropCallback: function (value) { console.log('drop event') },

Does anyone know why is this happening? Thanks.

I failed on 'npm install'

The code provided on the master branch via this fiddle shows a custom component for a timeline item.

How can custom elements be added to a network? I tried to do it a similar way to the fiddle, but it doesn't seem to have that option.

Here is an example using raw vis. JS Bin found from this issue in Vis issue #3436

ERROR Failed to compile with 2 errors 4:23:06 PM

These dependencies were not found:

• -!../node_modules/css-loader/index.js??ref--6-oneOf-1-1!../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2!./vue2vis/dist/vue2vis.css in ./node_modules/css-loader??ref--6-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--6-oneOf-1-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/v2vNetwork.vue?vue&type=style&index=0&lang=css&
• vue2vis in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/v2vNetwork.vue?vue&type=script&lang=js&

To install them, you can run: npm install --save -!../node_modules/css-loader/index.js??ref--6-oneOf-1-1!../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2!./vue2vis/dist/vue2vis.css vue2vis

I cannot manage to import vue2vis component with a super basic setup :

<template>
  <div>
    <timeline ref="timeline" :items="items" :groups="groups" :options="options">
    </timeline>
  </div>
</template>
<script>
import Timeline from 'vue2vis'
export default {
  name: 'MyTimeline',
  components: {
    Timeline
  },
  data () {
    return {
      groups: [{
        id: 0,
        content: 'Group 1'
      }],
      items: [{
        id: 0,
        group: 0,
        start: new Date(),
        content: 'Item 1'
      }],
      options: {
        editable: true
      }
    }
  }
}
</script>
<style scoped></style>

The error thrown is :

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Hello,

when I try to import the timeline component as it says in the Readme I'm getting this error

'vue2vis' is not defined.

I tried to import it like this import Vue2Vis from 'vue2vis' and then call it with Vue2Vis.Timeline but this does not works neither.

Does anyone know the solutiong for that. Thanks!

From what I can tell changes were added in the 0.0.17 release to support customTimeMarkers. But I don't think markers where added in the visjs library until after 4.21.0.

@alexcode do you know if 0.0.18 should support markers or will this not be until #52 has been addressed?

After upgrading this package to 0.0.14, Vue fail to load vue2vis, saying window is not defined (even if the SSR is off).

I solved this problem by adding config.output.globalObject = 'this' in ./scripts/webpack.js. But I want to inspect this issue more detailed.

Can you take a look at this issue?

Upon updating to 0.0.17 (the release from 2 days ago) I can no longer import the vue2vis library.

I get this:

This dependency was not found:

vue2vis in ./src/main.js

To install it, you can run: npm install --save vue2vis

I think the way to use the component changed to:

Vue.component('timeline', vue2vis.Timeline);

when before I was including the components like this:

import { Timeline, DataSet } from 'vue2vis';

@alexcode could you explain if the include process has changed with the updates?

Error when I am not actually using dates or time
Error in mounted hook: "TypeError: Cannot read property 'getTime' of undefined"

In the Vis library you can pass in callbacks within the options of the timeline. Such as onMove, onRemove, etc (vis). I can't find a way to use this in the vue scope. Is there a way to bind these or an alternate route?

The main visjs has been end of life'd in favor of individual repositories for the individual features.

Here's the post about it.
almende/vis#4259

Looks like the network and timeline have been broken out into their own modules.
https://github.com/visjs-community

Considering the main visjs repository is no longer being updated. It would be great to update vue2vis to use these new modules as they become available. I'd be willing to work on the timeline component. But I'd like to know if @alexcode is open to moving forward with this before I start working on it.

Thanks

The core vis package is EOL and no longer maintained.

https://www.npmjs.com/package/vis

Please consider using the following package instead so we can benefit from recent feature/enhancements:

https://github.com/visjs/vis-timeline

I implemented the vis.js timeline in my vue.js project, but I have a problem with the drop. First of all I think the drop does not works in that library, second how can i get the start and the end time and date when I drag one item and then drop it?

Because the drop event is not working I'm trying to do it with

@items-update="itemsUpdate()"

and I'm getting the data back with.

let properties = this.$refs.timeline.getEventProperties(event)

But I'm getting the time where the mouse pointer stops.

So is there any way to get the start time and end time after drop I mean after I stop dragging the item?

Because I need to save start time and the end time into my database for that dragged item.

Thanks.

I'd love to be able to pass in a vue component as an items content. Has anyone figured out a way to do so?

I was able to use the template option to render vue components for each item, however vis calls the template method often when interacting with a timeline causing new vue instances to be generated each time.

template: function(item, element, data) {

    // create a class from the component that was passed in with the item
    let ComponentClass = Vue.extend(item.component);

    // create a new vue instance from that component and pass the item in as a prop
    let instance = new ComponentClass({
        propsData: { data: item },
        parent: vm
    });

    // mount it
    instance.$mount();

    // return the mounted element
    return instance.$el;
}

If I return only the rendered html from the component and destroy it then I get something that is reactive (the html rerenders whenever the item is modified) but I lose any ability to interact with the component itself (since its just html and not a vue instance).

template: function(item, element, data) {

    // create a class from the component that was passed in with the item
    let ComponentClass = Vue.extend(item.component);

    // create a new vue instance from that component and pass the item in as a prop
    let instance = new ComponentClass({
        propsData: { data: item },
        parent: vm
    });

    // mount it
    instance.$mount();

    // grab the html
    const html = instance.$el.outerHTML;

    // destroy it so we don't end up with a bunch of unnecessary vue instances
    instance.$destroy();

    // return rendered html
    return html;
}

Anyone have any experience or thoughts on this?

Hi @alexcode,

great work with the adapter, thank you!

I am having trouble figuring out how to get the Node ID when clicking on it.

I assume the event @select-node="????" but how do I get the ID of the selected node?

I would really appreciate if you could lead me in the right direction.

Thanks!

I wonder when does new release comes out. It would be great if there's new version of vue2vis with bug-fixed version. Thanks!

We love this Vuejs extension, however there's no hints in the docs on how to access the Timeline methods seen here: http://visjs.org/docs/timeline/#Methods such as redraw().

How can Vuejs script get access to the Timeline objects' and its methods?

Currently, when I click on an item the delete button is showing.
I would like to replace this delete button with options button and after click on it mini menu pops up near the item.

Any advice on how to do this?

Hi Guys!

First of all thanks for your great work everything works fine! The only thing what I missing is the wind feature from physics option. This one:
wind

Is there a chance you will add that to the component?

I'm trying to create a timeline and use the techniques from the Visjs example merged with your adapter and I'm having difficulty get events to fire at all.

http://visjs.org/examples/timeline/other/drag&drop.html

Could you provide an example for binding a simple event?

How can i update visjs version used in vue2vis?

Hi,
Doubleclick on timeline is not triggering the method.

<timeline ref="refTimeline" :items="tlItems" :groups="groups" :options="options" @doubleClick="addtoTimeline">

the addtoTimeline method is not invoked when double clicked. It was working on previous releases.

Could you fix it.

Thank you,
Kind regards.

I have a weird issue, when I want to render a time line without any items, time line itself is invisible, i can see it in html code in dev-tools, but in browsers window It appears as invisible

Hi. Can I use kilometers in vue2vis instead a date ?

report '.' is not internal or external command

Hi,
I would like to generate streaming data graph as in the official samples: http://visjs.org/examples/graph2d/15_streaming_data.html (Static selected)

How can I create such a graph with vue2vis graph2d component. In the official sample, it uses a renderStep function where it invokes a getWindow function to proceed. But vue2vis graph2d component does not involve a getWindow method.

Could you provide help to build a streaming data example?

Thank you.

Best regards,
Erhan Saydam

Hello everyone,

I coded a graph2d component, but I noticed that graph2d got stuck when dragging sideways on the Xaxis and the zoom didn't change the date and time on the Xaxis either.

link to demo: https://codesandbox.io/s/serverless-http-19der?file=/src/App.vue

Hello,
When I try to use the library, at compile time, webpack throws these errors:

ERROR  Failed to compile with 13 errors                                                                                                                                   

These relative modules were not found:

* ./img/network/addNodeIcon.png in ./node_modules/css-loader?{"sourceMap":false}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-55649324","scoped":false,"hasI
nlineConfig":false}!./node_modules/stylus-loader?{"sourceMap":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=1!./src/components/xxx.vue

What could be wrong?

Thanks in advance, have a good day.

Hi,
Can we use timeline without groups parameter like in the example at http://visjs.org/examples/timeline/editing/customSnappingOfItems.html

It does not render when groups parameter not given as in the example. I would not prefer showing a Group name at the left part of timeline.

<template>
     <timeline ref="timeline_ref"
         :items="items"
         :options="options"> </timeline>
</template>
<script>
 //...
    data() {
      return {
        items: [
          {id: 1, content: 'A', start: '2018-11-09T00:00:00'},
          {id: 2, content: 'B', start: '2018-11-10T00:00:00'},
          {id: 3, content: 'B', start: '2018-11-12T00:00:00'},
        ],
        options: {
          editable: true
        }
}
 //...
</script>

Best Regards,

Some of your(vis) events are camelcased like doubleClick and currentTimeTick, this doesn't work when using your component in a html template environment because of html case-insensitivity.

https://vuejs.org/v2/guide/components-custom-events.html#Event-Names

Hi guys,

I have a simple Timeline component with few items..
one of them has to keep refreshing to maintain the end, right on the "currentTime" red line.

To do that I need the event currentTimeTick.
Everything works perfectly with version 0.0.13 but if I update to the latest 0.0.16 it stop working.
Doesn't look like much changed across the versions.. am I doing something wrong?

My component:

            <timeline ref="timeline" class="timeline"
                      :groups="groups"
                      :items="items"
                      :options="options"
                      @items-mounted="getDataSet"
                      @currentTimeTick="currentTimeTick">
            </timeline>

Methods:

            getDataSet(dataSet) {
                this.dataSet = dataSet
            },
            currentTimeTick() {
                console.log("currentTimeTick");

                var lastItem = this.items[this.items.length - 1]
                
                if (lastItem != null) {
                     lastItem.end = moment().toDate();
                     this.dataSet.update(lastItem)
                }
            },

Edit: version 0.0.14 doesn't work. as soon as I switch back to 0.0.13 everything is fine.

Hi,
I could not use lifecycle methods of timeline . I tried to understand the document but could not understand. For example when timeline is mounted, I would like to focus an item ( i.e invoke focus method of timeline). I tried code below but could not succeed.

<template>
     <timeline ref="timeline_ref"
         :items="items"  :groups="groups"  :options="options"
@items-mounted="focusTimeline"> </timeline>
</template>

<script>
 //...
    methods:{
      focusTimeline(){
        this.$refs.timeline_ref.focus(3);
      }
    }
 //...
</script>

Best regards.

I want to add a loding-bar when vis network is loading, so I add this

network:
        @start-stabilizing="startStabilizing"
        @stabilization-iterations-done="stablelizingDone"
method:
     startStabilizing() {
        console.log('startStabilizing');
        this.topoloading = true;
      }, // to control loading status hidden or appear
     stablelizingDone(progress) {
        console.log('done');
        // this.topoloading = false;
      },

if I remove this method:this.topoloading = true; it will print both "startStabilizing" & "done" .
If I add this this.topoloading = true; it will only print "startStabilizing" but no "done" ... It is wired.

I take all the steps, according to the manual:

$ npm link
$ cd examples
$ npm install
$ npm link vue2vis
$ npm run dev
but I had an error. Am I doing smth wrong?

Hi,
i can't get timeline to display items
i can found them in the timeline object with console but there are not displayed at all
i'm searching for this for hours, but i cant get it work
here is my code https://esadhar.net/gogs/bachir/offline-timeline/src/vue2vis/src/App.vue
thanks

If we place an array of groups that is originally empty on mount/create, and then update the groups prop with a list of groups, the timeline is not updated to display those groups.

<template>
  <div class="timeline">
    <Timeline
      ref="timeline"
      :items="items"
      :groups="groups"
    ></Timeline>
 <button @click="addGroups()">Add Groups</button>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import { Timeline } from 'vue2vis';
import 'vue2vis/dist/vue2vis.css';
import getTimelineOptions from './timeline-options';
import { DataItem, DataGroup } from 'vis';

@Component({
  components: {
    Timeline
  }
})
export default class ScheduleTimeline extends Vue {
  items: DataItem[] = [];
  groups: DataGroup[] = [];

  addGroups() {
    this.groups = [
      { id: 1, content: 'Group 1' },
      { id: 2, content: 'Group 2' }
    ]
  }
}
</script>

The current workaround is to just add an Unassigned or empty group.

...
export default class ScheduleTimeline extends Vue {
  items: DataItem[] = [];
  groups: DataGroup[] = [ { id: 0, content: 'unassigned' } ];
}