0

I need some help in creating a network graph using visjs in angularjs. I am working on this plunker to achieve something like this

I followed the steps mentioned in AngularJS - visjs but was unable to make it work so I created a plunker (given above) to get help from community.

Controller code.

var app = angular.module('app', ['ngVis']);

app.controller('MainCtrl', ['$scope', 'VisDataSet',

  function($scope, VisDataSet) {
      $scope.data = VisDataSet({
          "1": {
              "id": 1,
              "content": "<i class=\"fi-flag\"></i> item 1",
              "start": "2014-09-01T17:59:13.706Z",
              "className": "magenta",
              "type": "box"
          },
          "2": {
              "id": 2,
              "content": "<a href=\"http://visjs.org\" target=\"_blank\">visjs.org</a>",
              "start": "2014-09-02T17:59:13.706Z",
              "type": "box"
          },
          "3": {
              "id": 3,
              "content": "item 3",
              "start": "2014-08-29T17:59:13.706Z",
              "type": "box"
          },
          "4": {
              "id": 4,
              "content": "item 4",
              "start": "2014-09-01T17:59:13.706Z",
              "end": "2014-09-03T17:59:13.706Z",
              "type": "range"
          },
          "5": {
              "id": 5,
              "content": "item 5",
              "start": "2014-08-30T17:59:13.706Z",
              "type": "point"
          },
          "6": {
              "id": 6,
              "content": "item 6",
              "start": "2014-09-04T17:59:13.706Z",
              "type": "point"
          },
          "7": {
              "id": 7,
              "content": "<i class=\"fi-anchor\"></i> item 7",
              "start": "2014-08-28T17:59:13.706Z",
              "end": "2014-08-29T17:59:13.706Z",
              "type": "range",
              "className": "orange"
          }
      });
      $scope.options = {
          "align": "center",
          "autoResize": true,
          "editable": true,
          "selectable": true,
          "orientation": "bottom",
          "showCurrentTime": true,
          "showCustomTime": true,
          "showMajorLabels": true,
          "showMinorLabels": true
      };
  }
]);

Please help me in figuring out the problem in this plunker

rene
  • 41,474
  • 78
  • 114
  • 152
  • is there any console error? – Pankaj Parkar Jun 23 '15 at 14:23
  • @pankajparkar: I am not getting any error in console. I have posted a continued [question here](https://stackoverflow.com/questions/31019327/need-help-in-creating-network-graph-using-visjs-in-angularjs). Please take a look. –  Jun 24 '15 at 06:42

1 Answers1

1

I saw a few issues. First, you were including your css files as scripts instead of as stylesheets. So use this:

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.3.0/vis.css">
<link rel="stylesheet" type="text/css" href="style.css">

Second if you take a look at angular-vis.js, you'll see that the directive should actually be vis-timeline. So I just changed it to this in the html:

<vis-timeline data="data" options="options"></vis-timeline>

I removed the events attribute because that wasn't defined on your scope, but I assume you can look at the visjs documentation to see what should go there.

See the revised plunker for the whole fix.

efeder
  • 552
  • 5
  • 16
  • Thanks plunker works now, will change it to network view for my actual problem. Also, how are you saying that angular-vis.js has `vis-timeline` directive. I see the directive name is `visTimeline`. Please help me understand, I think I am missing something as i am new to angularjs –  Jun 24 '15 at 05:49
  • it's an angular.js naming convention. See this question : http://stackoverflow.com/questions/19503121/name-conventions-in-angualrjs-directives – efeder Jun 25 '15 at 18:42
  • Need your help in having a zoom in zoom out buttons for visjs in angularjs. I have asked a [question here](https://stackoverflow.com/questions/31078184/how-to-add-zoom-in-zoom-out-buttons-in-visjs-using-angularjs). Please take a look. Thanks –  Jun 30 '15 at 10:15
  • Need your help with this question please : https://stackoverflow.com/questions/44421653/content-items-wont-display-angular-vis-js – Nikhil Jun 09 '17 at 05:07