GANTT Chart Sample

by sberube

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular.min.js"></script>
<div ng-controller="MainCtrl" class="container">
  <table class="table">
    <thead>
      <tr>
        <th></th>
        <th colspan="3">Initializing</th>
        <th colspan="3">Reserving</th>
        <th colspan="3">Deploying</th>
      </tr>
      <tr>
        <th></th>
        <th>Before</th>
        <th>During</th>
        <th>After</th>
        <th>Before</th>
        <th>During</th>
        <th>After</th>
        <th>Before</th>
        <th>During</th>
        <th>After</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="item in chart" ng-class="item.artifactType">
        <th class="displayName">{{item.artifact.orderIndex}} &nbsp;{{item.artifact.displayName}}</th>

      </tr>
    </tbody>
  </table>
</div>

CSS

table tr.resourceOffering th.displayName {
  padding-left: 30px;
  background-color: aliceblue;
}

table tr.serviceComponent th.displayName {
  background-color: lightblue;
}

JavaScript

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


mymodal.controller('MainCtrl', function($scope, $filter) {

  $scope.json = {
    "@self": "/csa/api/designs/graph/11d26bb166d749ecb60eb3a0b71346df",
    "nodes": [{
      "id": "7e833b62285b4c4196863c1da2bed081",
      "name": "SERVER_GROUP__Fri Mar 22 14:24:12 IST 2013",
      "displayName": "Server Group",
      "description": "This is the default template for the selected component type, it contains the same settings as the base component type definition.",
      "icon": "/csa/images/categories/component_type/server_group.png",
      "orderIndex": 1,
      "typeId": "90d96588360da0c701360da0f20a00ac",
      "tags": ["CONSUMER_VISIBLE"],
      "x": 48,
      "y": 420,
      "statusMessages": [{
        "type": "validation.component.resourceoffering.noprovider",
        "message": "The following resource offerings are not associated to any enabled resource providers: vCenter Compute NOOP, vCenter Compute Modify Server Group Resources, vCenter Compute Flex server",
        "applicableItems": ["vCenter Compute NOOP", "vCenter Compute Modify Server Group Resources", "vCenter Compute Flex server"],
        "params": [],
        "level": "WARNING",
        "priority": 2
      }],
      "lifecycle": {
        "members": [{
          "@self": "/csa/api/action/9f98edc49e814237a89551797c319d2c",
          "name": "Clone_Pattern_March 22, 2013 11:04:37 AM UTC",
          "displayName": "Clone Pattern",
          "description": "Clones a pattern to create new servers",
          "artifactId": "7e833b62285b4c4196863c1da2bed081",
          "state": {
            "name": "INITIALIZING",
            "displayName": "Initializing",
            "description": "Initializing",
            "icon": "/csa/images/categories/lifecycle_state/initializing.png"
          },
          "substate": {
            "name": "TRANSITION",
            "displayName": "Transition",
            "description": "Transition",
            "icon":...