• Edit
  • Download
  • <!DOCTYPE html>
    <html class="zc-html">
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
      <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
      <!-- 
    			Point ZingChart to modules folder so ZingChart
    			can automatically grab the CSV module 
    		-->
      <script nonce="undefined">
        zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
      </script>
      <!-- load image data -->
      <script nonce="undefined" src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/people.js'></script>
      <style>
        .zc-html,
        .zc-body {
          margin: 0;
          padding: 0;
          width: 100%;
          height: 100%;
        }
    
        .chart--container {
          height: 100%;
          width: 100%;
          min-height: 530px;
        }
    
        .zc-ref {
          display: none;
        }
      </style>
    </head>
    
    <body class="zc-body">
      <!-- CHART CONTAINER -->
      <div id="myChart" class="chart--container">
        <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
      </div>
      <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // window:load event for Javascript to run after HTML
        // because this Javascript is injected into the document head
        let chartConfig = {
          type: 'tree',
          options: {
            aspect: 'graph',
            maxIterations: 20,
            springLength: 275,
            attractionConstant: 0.8,
            repulsionConstant: 4000,
            repulsionDistanceFactor: 1,
            node: {
              size: 12,
              backgroundColor: '#45D6A4',
              label: {
                color: 'black',
                fontWeight: '500',
                offsetY: 0
              },
              tooltip: {
                text: '%data-full-name',
                visible: true
              }
            },
            link: {
              lineWidth: 3,
              lineColor: '#cccccc'
            },
          },
          series: [{
              type: 'node',
              id: 'Implemented',
              text: 'Implemented',
              dataFullName: 'Implemented'
            },
            {
              type: 'node',
              id: 'PartiallyImplemented',
              text: 'Partially Implemented',
              dataFullName: 'Partially Implemented'
            },
            {
              type: 'node',
              id: 'Planned',
              text: 'Planned',
              dataFullName: 'Planned'
            },
            {
              type: 'node',
              id: 'Assigned',
              text: 'Assigned',
              dataFullName: 'Assigned'
            },
            {
              type: 'node',
              id: 'ImplementedReview',
              text: 'Implemented Review',
              dataFullName: 'Implemented Review'
            },
            {
              type: 'node',
              id: 'NA',
              text: 'NA',
              dataFullName: 'NA'
            },
            {
              type: 'node',
              id: 'RBDHigh',
              text: 'RBD_High',
              dataFullName: 'RBD_High'
            },
            {
              type: 'node',
              id: 'RBDMedium',
              text: 'RBD_Medium',
              dataFullName: 'RBD_Medium'
            },
            {
              type: 'node',
              id: 'RBDLow',
              text: 'RBD_Low',
              dataFullName: 'RBD_Low'
            },
            {
              type: 'node',
              id: 'ImplementedQA',
              text: 'Implemented-QA',
              dataFullName: 'Implemented-QA'
            },
            {
              type: 'node',
              id: 'AlternativeImplementation',
              text: 'Alternative Implementation',
              dataFullName: 'Alternative Implementation'
            },
            {
              type: 'node',
              id: 'Cancelled',
              text: 'Cancelled',
              dataFullName: 'Cancelled'
            },
            {
              type: 'node',
              id: 'PartiallyImplemented',
              text: 'Partially Implemented',
              dataFullName: 'Partially Implemented'
            },
            {
              type: 'node',
              id: 'TestState',
              text: ' Test State',
              dataFullName: ' Test State'
            },
            {
              type: 'link',
              'source': 'ImplementedQA',
              'target': 'Cancelled'
            },
            {
              type: 'link',
              'source': 'AlternativeImplementation',
              'target': 'RBDMedium'
            },
            {
              type: 'link',
              'source': 'PartiallyImplemented',
              'target': 'RBDLow'
            },
            {
              type: 'link',
              'source': 'ImplementedReview',
              'target': 'Implemented'
            },
            {
              type: 'link',
              'source': 'Assigned',
              'target': 'PartiallyImplemented'
            },
            {
              type: 'link',
              'source': 'NA',
              'target': 'AlternativeImplementation'
            },
            {
              type: 'link',
              'source': 'RBDLow',
              'target': 'RBDHigh'
            },
            {
              type: 'link',
              'source': 'Planned',
              'target': 'RBDLow'
            },
            {
              type: 'link',
              'source': 'Implemented',
              'target': 'RBDHigh'
            },
            {
              type: 'link',
              'source': 'AlternativeImplementation',
              'target': 'NA'
            },
            {
              type: 'link',
              'source': 'PartiallyImplemented',
              'target': 'RBDHigh'
            },
            {
              type: 'link',
              'source': 'ImplementedQA',
              'target': 'Assigned'
            },
            {
              type: 'link',
              'source': 'Implemented',
              'target': 'PartiallyImplemented'
            },
            {
              type: 'link',
              'source': 'RBDLow',
              'target': 'Cancelled'
            },
            {
              type: 'link',
              'source': 'Assigned',
              'target': 'Cancelled'
            },
            {
              type: 'link',
              'source': 'RBDLow',
              'target': 'ImplementedReview'
            },
            {
              type: 'link',
              'source': 'Planned',
              'target': 'RBDHigh'
            },
            {
              type: 'link',
              'source': 'Implemented',
              'target': 'ImplementedReview'
            },
            {
              type: 'link',
              'source': 'RBDMedium',
              'target': 'Cancelled'
            },
            {
              type: 'link',
              'source': 'AlternativeImplementation',
              'target': 'Planned'
            },
            {
              type: 'link',
              'source': 'PartiallyImplemented',
              'target': 'ImplementedReview'
            },
            {
              type: 'link',
              'source': 'PartiallyImplemented',
              'target': 'Cancelled'
            },
            {
              type: 'link',
              'source': 'RBDLow',
              'target': 'Planned'
            },
            {
              type: 'link',
              'source': 'Planned',
              'target': 'ImplementedReview'
            },
            {
              type: 'link',
              'source': 'Cancelled',
              'target': 'ImplementedQA'
            },
            {
              type: 'link',
              'source': 'Implemented',
              'target': 'Planned'
            },
            {
              type: 'link',
              'source': 'RBDHigh',
              'target': 'Cancelled'
            },
            {
              type: 'link',
              'source': 'RBDMedium',
              'target': 'ImplementedQA'
            },
            {
              type: 'link',
              'source': 'PartiallyImplemented',
              'target': 'Planned'
            },
            {
              type: 'link',
              'source': 'NA',
              'target': 'Cancelled'
            },
            {
              type: 'link',
              'source': 'RBDLow',
              'target': 'Implemented'
            },
            {
              type: 'link',
              'source': 'Planned',
              'target': 'PartiallyImplemented'
            },
            {
              type: 'link',
              'source': 'Cancelled',
              'target': 'RBDMedium'
            },
            {
              type: 'link',
              'source': 'ImplementedQA',
              'target': 'RBDMedium'
            },
            {
              type: 'link',
              'source': 'RBDHigh',
              'target': 'ImplementedQA'
            },
            {
              type: 'link',
              'source': 'RBDMedium',
              'target': 'RBDHigh'
            },
            {
              type: 'link',
              'source': 'NA',
              'target': 'RBDLow'
            },
            {
              type: 'link',
              'source': 'ImplementedReview',
              'target': 'RBDLow'
            },
            {
              type: 'link',
              'source': 'Assigned',
              'target': 'ImplementedQA'
            },
            {
              type: 'link',
              'source': 'Cancelled',
              'target': 'NA'
            },
            {
              type: 'link',
              'source': 'ImplementedQA',
              'target': 'NA'
            },
            {
              type: 'link',
              'source': 'RBDHigh',
              'target': 'RBDMedium'
            },
            {
              type: 'link',
              'source': 'RBDMedium',
              'target': 'ImplementedReview'
            },
            {
              type: 'link',
              'source': 'NA',
              'target': 'RBDHigh'
            },
            {
              type: 'link',
              'source': 'ImplementedReview',
              'target': 'RBDHigh'
            },
            {
              type: 'link',
              'source': 'Assigned',
              'target': 'RBDMedium'
            },
            {
              type: 'link',
              'source': 'Cancelled',
              'target': 'Assigned'
            },
            {
              type: 'link',
              'source': 'Planned',
              'target': 'AlternativeImplementation'
            },
            {
              type: 'link',
              'source': 'ImplementedQA',
              'target': 'Assigned'
            },
            {
              type: 'link',
              'source': 'RBDHigh',
              'target': 'ImplementedReview'
            },
            {
              type: 'link',
              'source': 'RBDMedium',
              'target': 'Planned'
            },
            {
              type: 'link',
              'source': 'NA',
              'target': 'Assigned'
            },
            {
              type: 'link',
              'source': 'ImplementedReview',
              'target': 'Assigned'
            },
            {
              type: 'link',
              'source': 'Assigned',
              'target': 'NA'
            },
            {
              type: 'link',
              'source': 'Cancelled',
              'target': 'PartiallyImplemented'
            },
            {
              type: 'link',
              'source': 'Assigned',
              'target': 'AlternativeImplementation'
            },
            {
              type: 'link',
              'source': 'ImplementedQA',
              'target': 'PartiallyImplemented'
            },
            {
              type: 'link',
              'source': 'RBDHigh',
              'target': 'Planned'
            },
            {
              type: 'link',
              'source': 'RBDMedium',
              'target': 'Implemented'
            },
            {
              type: 'link',
              'source': 'NA',
              'target': 'PartiallyImplemented'
            },
            {
              type: 'link',
              'source': 'PartiallyImplemented',
              'target': 'Implemented'
            },
            {
              type: 'link',
              'source': 'AlternativeImplementation',
              'target': 'Cancelled'
            },
            {
              type: 'link',
              'source': 'AlternativeImplementation',
              'target': 'RBDLow'
            },
            {
              type: 'link',
              'source': 'PartiallyImplemented',
              'target': 'ImplementedQA'
            },
            {
              type: 'link',
              'source': 'ImplementedReview',
              'target': 'PartiallyImplemented'
            },
            {
              type: 'link',
              'source': 'Assigned',
              'target': 'Planned'
            },
            {
              type: 'link',
              'source': 'RBDHigh',
              'target': 'Implemented'
            },
            {
              type: 'link',
              'source': 'RBDLow',
              'target': 'RBDMedium'
            },
            {
              type: 'link',
              'source': 'Planned',
              'target': 'ImplementedQA'
            },
            {
              type: 'link',
              'source': 'Implemented',
              'target': 'RBDMedium'
            },
            {
              type: 'link',
              'source': 'ImplementedQA',
              'target': 'AlternativeImplementation'
            },
            {
              type: 'link',
              'source': 'AlternativeImplementation',
              'target': 'RBDHigh'
            },
            {
              type: 'link',
              'source': 'PartiallyImplemented',
              'target': 'RBDMedium'
            },
            {
              type: 'link',
              'source': 'Implemented',
              'target': 'ImplementedQA'
            },
            {
              type: 'link',
              'source': 'Assigned',
              'target': 'Implemented'
            },
            {
              type: 'link',
              'source': 'ImplementedReview',
              'target': 'Cancelled'
            },
            {
              type: 'link',
              'source': 'RBDLow',
              'target': 'NA'
            },
            {
              type: 'link',
              'source': 'Planned',
              'target': 'RBDMedium'
            },
            {
              type: 'link',
              'source': 'Implemented',
              'target': 'NA'
            },
            {
              type: 'link',
              'source': 'AlternativeImplementation',
              'target': 'Assigned'
            },
            {
              type: 'link',
              'source': 'PartiallyImplemented',
              'target': 'NA'
            },
            {
              type: 'link',
              'source': 'RBDLow',
              'target': 'AlternativeImplementation'
            },
            {
              type: 'link',
              'source': 'Planned',
              'target': 'Cancelled'
            },
            {
              type: 'link',
              'source': 'RBDLow',
              'target': 'Assigned'
            },
            {
              type: 'link',
              'source': 'Planned',
              'target': 'NA'
            },
            {
              type: 'link',
              'source': 'Cancelled',
              'target': 'AlternativeImplementation'
            },
            {
              type: 'link',
              'source': 'Implemented',
              'target': 'Assigned'
            },
            {
              type: 'link',
              'source': 'RBDMedium',
              'target': 'AlternativeImplementation'
            },
            {
              type: 'link',
              'source': 'AlternativeImplementation',
              'target': 'Implemented'
            },
            {
              type: 'link',
              'source': 'PartiallyImplemented',
              'target': 'Assigned'
            },
            {
              type: 'link',
              'source': 'RBDLow',
              'target': 'PartiallyImplemented'
            },
            {
              type: 'link',
              'source': 'Planned',
              'target': 'Assigned'
            },
            {
              type: 'link',
              'source': 'Cancelled',
              'target': 'RBDLow'
            },
            {
              type: 'link',
              'source': 'ImplementedQA',
              'target': 'RBDLow'
            },
            {
              type: 'link',
              'source': 'RBDHigh',
              'target': 'AlternativeImplementation'
            },
            {
              type: 'link',
              'source': 'RBDMedium',
              'target': 'RBDLow'
            },
            {
              type: 'link',
              'source': 'NA',
              'target': 'ImplementedQA'
            },
            {
              type: 'link',
              'source': 'Implemented',
              'target': 'Cancelled'
            },
            {
              type: 'link',
              'source': 'ImplementedReview',
              'target': 'ImplementedQA'
            },
            {
              type: 'link',
              'source': 'Planned',
              'target': 'Implemented'
            },
            {
              type: 'link',
              'source': 'Cancelled',
              'target': 'RBDHigh'
            },
            {
              type: 'link',
              'source': 'ImplementedQA',
              'target': 'RBDHigh'
            },
            {
              type: 'link',
              'source': 'RBDHigh',
              'target': 'RBDLow'
            },
            {
              type: 'link',
              'source': 'RBDMedium',
              'target': 'NA'
            },
            {
              type: 'link',
              'source': 'NA',
              'target': 'RBDMedium'
            },
            {
              type: 'link',
              'source': 'ImplementedReview',
              'target': 'RBDMedium'
            },
            {
              type: 'link',
              'source': 'Assigned',
              'target': 'RBDLow'
            },
            {
              type: 'link',
              'source': 'Cancelled',
              'target': 'ImplementedReview'
            },
            {
              type: 'link',
              'source': 'ImplementedQA',
              'target': 'ImplementedReview'
            },
            {
              type: 'link',
              'source': 'RBDHigh',
              'target': 'NA'
            },
            {
              type: 'link',
              'source': 'RBDMedium',
              'target': 'Assigned'
            },
            {
              type: 'link',
              'source': 'NA',
              'target': 'ImplementedReview'
            },
            {
              type: 'link',
              'source': 'ImplementedReview',
              'target': 'NA'
            },
            {
              type: 'link',
              'source': 'Assigned',
              'target': 'RBDHigh'
            },
            {
              type: 'link',
              'source': 'Cancelled',
              'target': 'Planned'
            },
            {
              type: 'link',
              'source': 'Implemented',
              'target': 'AlternativeImplementation'
            },
            {
              type: 'link',
              'source': 'ImplementedQA',
              'target': 'Planned'
            },
            {
              type: 'link',
              'source': 'RBDHigh',
              'target': 'Assigned'
            },
            {
              type: 'link',
              'source': 'RBDMedium',
              'target': 'PartiallyImplemented'
            },
            {
              type: 'link',
              'source': 'NA',
              'target': 'Planned'
            },
            {
              type: 'link',
              'source': 'ImplementedReview',
              'target': 'Planned'
            },
            {
              type: 'link',
              'source': 'Assigned',
              'target': 'ImplementedReview'
            },
            {
              type: 'link',
              'source': 'Cancelled',
              'target': 'Implemented'
            },
            {
              type: 'link',
              'source': 'AlternativeImplementation',
              'target': 'ImplementedQA'
            },
            {
              type: 'link',
              'source': 'ImplementedQA',
              'target': 'Implemented'
            },
            {
              type: 'link',
              'source': 'RBDHigh',
              'target': 'PartiallyImplemented'
            },
            {
              type: 'link',
              'source': 'RBDLow',
              'target': 'ImplementedQA'
            },
            {
              type: 'link',
              'source': 'NA',
              'target': 'Implemented'
            },
            {
              type: 'link',
              'source': 'Implemented',
              'target': 'RBDLow'
            }
          ]
        };
    
        zingchart.render({
          id: 'myChart',
          data: chartConfig,
          height: '650px',
          output: 'canvas'
        });
    
        let lastNodeId = '';
        zingchart.bind('myChart', 'mousemove', function(p) {
          if (p.target === 'shape') {
            if (p.targetid.indexOf('-gshape-area') !== -1 && p.targetid.indexOf('-shape-node_') !== -1) {
              let nodeId = p.targetid.replace(p.graphid + '-shape-node_', '').replace('-gshape-area', '');
              if (nodeId !== lastNodeId) {
                lastNodeId = nodeId;
                let ids = zingchart.exec(p.id, 'getobjectsbyclass', {
                  graphid: 0,
                  type: 'shape',
                  cls: 'zctreeshape'
                });
                let data = [];
                for (let i = 0; i < ids.length; i++) {
                  let tokens = ids[i].split('_');
                  if (tokens[0] === 'link' && (tokens[1] === lastNodeId || tokens[2] === lastNodeId)) {
                    data.push({
                      id: ids[i],
                      lineColor: '#ff0000'
                    });
                  }
                }
                zingchart.exec(p.id, 'updateobject', {
                  type: 'shape',
                  data: data
                });
              }
            }
          } else {
            if (lastNodeId !== '') {
              lastNodeId = '';
              let ids = zingchart.exec(p.id, 'getobjectsbyclass', {
                graphid: 0,
                type: 'shape',
                cls: 'zctreeshape'
              });
              let data = [];
              for (let i = 0; i < ids.length; i++) {
                let tokens = ids[i].split('_');
                if (tokens[0] === 'link') {
                  data.push({
                    id: ids[i],
                    lineColor: '#cccccc'
                  });
                }
              }
              zingchart.exec(p.id, 'updateobject', {
                type: 'shape',
                data: data
              });
            }
          }
        });
      </script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html class="zc-html">
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
      <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
      <!-- 
    			Point ZingChart to modules folder so ZingChart
    			can automatically grab the CSV module 
    		-->
      <script>
        zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
      </script>
      <!-- load image data -->
      <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/people.js'></script>
    </head>
    
    <body class="zc-body">
      <!-- CHART CONTAINER -->
      <div id="myChart" class="chart--container">
        <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
      </div>
    </body>
    
    </html>
    .zc-html,
    .zc-body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }
    
    .chart--container {
      height: 100%;
      width: 100%;
      min-height: 530px;
    }
    
    .zc-ref {
      display: none;
    }
    // window:load event for Javascript to run after HTML
    // because this Javascript is injected into the document head
    let chartConfig = {
      type: 'tree',
      options: {
        aspect: 'graph',
        maxIterations: 20,
        springLength: 275,
        attractionConstant: 0.8,
        repulsionConstant: 4000,
        repulsionDistanceFactor: 1,
        node: {
          size: 12,
          backgroundColor: '#45D6A4',
          label: {
            color: 'black',
            fontWeight: '500',
            offsetY: 0
          },
          tooltip: {
            text: '%data-full-name',
            visible: true
          }
        },
        link: {
          lineWidth: 3,
          lineColor: '#cccccc'
        },
      },
      series: [{
          type: 'node',
          id: 'Implemented',
          text: 'Implemented',
          dataFullName: 'Implemented'
        },
        {
          type: 'node',
          id: 'PartiallyImplemented',
          text: 'Partially Implemented',
          dataFullName: 'Partially Implemented'
        },
        {
          type: 'node',
          id: 'Planned',
          text: 'Planned',
          dataFullName: 'Planned'
        },
        {
          type: 'node',
          id: 'Assigned',
          text: 'Assigned',
          dataFullName: 'Assigned'
        },
        {
          type: 'node',
          id: 'ImplementedReview',
          text: 'Implemented Review',
          dataFullName: 'Implemented Review'
        },
        {
          type: 'node',
          id: 'NA',
          text: 'NA',
          dataFullName: 'NA'
        },
        {
          type: 'node',
          id: 'RBDHigh',
          text: 'RBD_High',
          dataFullName: 'RBD_High'
        },
        {
          type: 'node',
          id: 'RBDMedium',
          text: 'RBD_Medium',
          dataFullName: 'RBD_Medium'
        },
        {
          type: 'node',
          id: 'RBDLow',
          text: 'RBD_Low',
          dataFullName: 'RBD_Low'
        },
        {
          type: 'node',
          id: 'ImplementedQA',
          text: 'Implemented-QA',
          dataFullName: 'Implemented-QA'
        },
        {
          type: 'node',
          id: 'AlternativeImplementation',
          text: 'Alternative Implementation',
          dataFullName: 'Alternative Implementation'
        },
        {
          type: 'node',
          id: 'Cancelled',
          text: 'Cancelled',
          dataFullName: 'Cancelled'
        },
        {
          type: 'node',
          id: 'PartiallyImplemented',
          text: 'Partially Implemented',
          dataFullName: 'Partially Implemented'
        },
        {
          type: 'node',
          id: 'TestState',
          text: ' Test State',
          dataFullName: ' Test State'
        },
        {
          type: 'link',
          'source': 'ImplementedQA',
          'target': 'Cancelled'
        },
        {
          type: 'link',
          'source': 'AlternativeImplementation',
          'target': 'RBDMedium'
        },
        {
          type: 'link',
          'source': 'PartiallyImplemented',
          'target': 'RBDLow'
        },
        {
          type: 'link',
          'source': 'ImplementedReview',
          'target': 'Implemented'
        },
        {
          type: 'link',
          'source': 'Assigned',
          'target': 'PartiallyImplemented'
        },
        {
          type: 'link',
          'source': 'NA',
          'target': 'AlternativeImplementation'
        },
        {
          type: 'link',
          'source': 'RBDLow',
          'target': 'RBDHigh'
        },
        {
          type: 'link',
          'source': 'Planned',
          'target': 'RBDLow'
        },
        {
          type: 'link',
          'source': 'Implemented',
          'target': 'RBDHigh'
        },
        {
          type: 'link',
          'source': 'AlternativeImplementation',
          'target': 'NA'
        },
        {
          type: 'link',
          'source': 'PartiallyImplemented',
          'target': 'RBDHigh'
        },
        {
          type: 'link',
          'source': 'ImplementedQA',
          'target': 'Assigned'
        },
        {
          type: 'link',
          'source': 'Implemented',
          'target': 'PartiallyImplemented'
        },
        {
          type: 'link',
          'source': 'RBDLow',
          'target': 'Cancelled'
        },
        {
          type: 'link',
          'source': 'Assigned',
          'target': 'Cancelled'
        },
        {
          type: 'link',
          'source': 'RBDLow',
          'target': 'ImplementedReview'
        },
        {
          type: 'link',
          'source': 'Planned',
          'target': 'RBDHigh'
        },
        {
          type: 'link',
          'source': 'Implemented',
          'target': 'ImplementedReview'
        },
        {
          type: 'link',
          'source': 'RBDMedium',
          'target': 'Cancelled'
        },
        {
          type: 'link',
          'source': 'AlternativeImplementation',
          'target': 'Planned'
        },
        {
          type: 'link',
          'source': 'PartiallyImplemented',
          'target': 'ImplementedReview'
        },
        {
          type: 'link',
          'source': 'PartiallyImplemented',
          'target': 'Cancelled'
        },
        {
          type: 'link',
          'source': 'RBDLow',
          'target': 'Planned'
        },
        {
          type: 'link',
          'source': 'Planned',
          'target': 'ImplementedReview'
        },
        {
          type: 'link',
          'source': 'Cancelled',
          'target': 'ImplementedQA'
        },
        {
          type: 'link',
          'source': 'Implemented',
          'target': 'Planned'
        },
        {
          type: 'link',
          'source': 'RBDHigh',
          'target': 'Cancelled'
        },
        {
          type: 'link',
          'source': 'RBDMedium',
          'target': 'ImplementedQA'
        },
        {
          type: 'link',
          'source': 'PartiallyImplemented',
          'target': 'Planned'
        },
        {
          type: 'link',
          'source': 'NA',
          'target': 'Cancelled'
        },
        {
          type: 'link',
          'source': 'RBDLow',
          'target': 'Implemented'
        },
        {
          type: 'link',
          'source': 'Planned',
          'target': 'PartiallyImplemented'
        },
        {
          type: 'link',
          'source': 'Cancelled',
          'target': 'RBDMedium'
        },
        {
          type: 'link',
          'source': 'ImplementedQA',
          'target': 'RBDMedium'
        },
        {
          type: 'link',
          'source': 'RBDHigh',
          'target': 'ImplementedQA'
        },
        {
          type: 'link',
          'source': 'RBDMedium',
          'target': 'RBDHigh'
        },
        {
          type: 'link',
          'source': 'NA',
          'target': 'RBDLow'
        },
        {
          type: 'link',
          'source': 'ImplementedReview',
          'target': 'RBDLow'
        },
        {
          type: 'link',
          'source': 'Assigned',
          'target': 'ImplementedQA'
        },
        {
          type: 'link',
          'source': 'Cancelled',
          'target': 'NA'
        },
        {
          type: 'link',
          'source': 'ImplementedQA',
          'target': 'NA'
        },
        {
          type: 'link',
          'source': 'RBDHigh',
          'target': 'RBDMedium'
        },
        {
          type: 'link',
          'source': 'RBDMedium',
          'target': 'ImplementedReview'
        },
        {
          type: 'link',
          'source': 'NA',
          'target': 'RBDHigh'
        },
        {
          type: 'link',
          'source': 'ImplementedReview',
          'target': 'RBDHigh'
        },
        {
          type: 'link',
          'source': 'Assigned',
          'target': 'RBDMedium'
        },
        {
          type: 'link',
          'source': 'Cancelled',
          'target': 'Assigned'
        },
        {
          type: 'link',
          'source': 'Planned',
          'target': 'AlternativeImplementation'
        },
        {
          type: 'link',
          'source': 'ImplementedQA',
          'target': 'Assigned'
        },
        {
          type: 'link',
          'source': 'RBDHigh',
          'target': 'ImplementedReview'
        },
        {
          type: 'link',
          'source': 'RBDMedium',
          'target': 'Planned'
        },
        {
          type: 'link',
          'source': 'NA',
          'target': 'Assigned'
        },
        {
          type: 'link',
          'source': 'ImplementedReview',
          'target': 'Assigned'
        },
        {
          type: 'link',
          'source': 'Assigned',
          'target': 'NA'
        },
        {
          type: 'link',
          'source': 'Cancelled',
          'target': 'PartiallyImplemented'
        },
        {
          type: 'link',
          'source': 'Assigned',
          'target': 'AlternativeImplementation'
        },
        {
          type: 'link',
          'source': 'ImplementedQA',
          'target': 'PartiallyImplemented'
        },
        {
          type: 'link',
          'source': 'RBDHigh',
          'target': 'Planned'
        },
        {
          type: 'link',
          'source': 'RBDMedium',
          'target': 'Implemented'
        },
        {
          type: 'link',
          'source': 'NA',
          'target': 'PartiallyImplemented'
        },
        {
          type: 'link',
          'source': 'PartiallyImplemented',
          'target': 'Implemented'
        },
        {
          type: 'link',
          'source': 'AlternativeImplementation',
          'target': 'Cancelled'
        },
        {
          type: 'link',
          'source': 'AlternativeImplementation',
          'target': 'RBDLow'
        },
        {
          type: 'link',
          'source': 'PartiallyImplemented',
          'target': 'ImplementedQA'
        },
        {
          type: 'link',
          'source': 'ImplementedReview',
          'target': 'PartiallyImplemented'
        },
        {
          type: 'link',
          'source': 'Assigned',
          'target': 'Planned'
        },
        {
          type: 'link',
          'source': 'RBDHigh',
          'target': 'Implemented'
        },
        {
          type: 'link',
          'source': 'RBDLow',
          'target': 'RBDMedium'
        },
        {
          type: 'link',
          'source': 'Planned',
          'target': 'ImplementedQA'
        },
        {
          type: 'link',
          'source': 'Implemented',
          'target': 'RBDMedium'
        },
        {
          type: 'link',
          'source': 'ImplementedQA',
          'target': 'AlternativeImplementation'
        },
        {
          type: 'link',
          'source': 'AlternativeImplementation',
          'target': 'RBDHigh'
        },
        {
          type: 'link',
          'source': 'PartiallyImplemented',
          'target': 'RBDMedium'
        },
        {
          type: 'link',
          'source': 'Implemented',
          'target': 'ImplementedQA'
        },
        {
          type: 'link',
          'source': 'Assigned',
          'target': 'Implemented'
        },
        {
          type: 'link',
          'source': 'ImplementedReview',
          'target': 'Cancelled'
        },
        {
          type: 'link',
          'source': 'RBDLow',
          'target': 'NA'
        },
        {
          type: 'link',
          'source': 'Planned',
          'target': 'RBDMedium'
        },
        {
          type: 'link',
          'source': 'Implemented',
          'target': 'NA'
        },
        {
          type: 'link',
          'source': 'AlternativeImplementation',
          'target': 'Assigned'
        },
        {
          type: 'link',
          'source': 'PartiallyImplemented',
          'target': 'NA'
        },
        {
          type: 'link',
          'source': 'RBDLow',
          'target': 'AlternativeImplementation'
        },
        {
          type: 'link',
          'source': 'Planned',
          'target': 'Cancelled'
        },
        {
          type: 'link',
          'source': 'RBDLow',
          'target': 'Assigned'
        },
        {
          type: 'link',
          'source': 'Planned',
          'target': 'NA'
        },
        {
          type: 'link',
          'source': 'Cancelled',
          'target': 'AlternativeImplementation'
        },
        {
          type: 'link',
          'source': 'Implemented',
          'target': 'Assigned'
        },
        {
          type: 'link',
          'source': 'RBDMedium',
          'target': 'AlternativeImplementation'
        },
        {
          type: 'link',
          'source': 'AlternativeImplementation',
          'target': 'Implemented'
        },
        {
          type: 'link',
          'source': 'PartiallyImplemented',
          'target': 'Assigned'
        },
        {
          type: 'link',
          'source': 'RBDLow',
          'target': 'PartiallyImplemented'
        },
        {
          type: 'link',
          'source': 'Planned',
          'target': 'Assigned'
        },
        {
          type: 'link',
          'source': 'Cancelled',
          'target': 'RBDLow'
        },
        {
          type: 'link',
          'source': 'ImplementedQA',
          'target': 'RBDLow'
        },
        {
          type: 'link',
          'source': 'RBDHigh',
          'target': 'AlternativeImplementation'
        },
        {
          type: 'link',
          'source': 'RBDMedium',
          'target': 'RBDLow'
        },
        {
          type: 'link',
          'source': 'NA',
          'target': 'ImplementedQA'
        },
        {
          type: 'link',
          'source': 'Implemented',
          'target': 'Cancelled'
        },
        {
          type: 'link',
          'source': 'ImplementedReview',
          'target': 'ImplementedQA'
        },
        {
          type: 'link',
          'source': 'Planned',
          'target': 'Implemented'
        },
        {
          type: 'link',
          'source': 'Cancelled',
          'target': 'RBDHigh'
        },
        {
          type: 'link',
          'source': 'ImplementedQA',
          'target': 'RBDHigh'
        },
        {
          type: 'link',
          'source': 'RBDHigh',
          'target': 'RBDLow'
        },
        {
          type: 'link',
          'source': 'RBDMedium',
          'target': 'NA'
        },
        {
          type: 'link',
          'source': 'NA',
          'target': 'RBDMedium'
        },
        {
          type: 'link',
          'source': 'ImplementedReview',
          'target': 'RBDMedium'
        },
        {
          type: 'link',
          'source': 'Assigned',
          'target': 'RBDLow'
        },
        {
          type: 'link',
          'source': 'Cancelled',
          'target': 'ImplementedReview'
        },
        {
          type: 'link',
          'source': 'ImplementedQA',
          'target': 'ImplementedReview'
        },
        {
          type: 'link',
          'source': 'RBDHigh',
          'target': 'NA'
        },
        {
          type: 'link',
          'source': 'RBDMedium',
          'target': 'Assigned'
        },
        {
          type: 'link',
          'source': 'NA',
          'target': 'ImplementedReview'
        },
        {
          type: 'link',
          'source': 'ImplementedReview',
          'target': 'NA'
        },
        {
          type: 'link',
          'source': 'Assigned',
          'target': 'RBDHigh'
        },
        {
          type: 'link',
          'source': 'Cancelled',
          'target': 'Planned'
        },
        {
          type: 'link',
          'source': 'Implemented',
          'target': 'AlternativeImplementation'
        },
        {
          type: 'link',
          'source': 'ImplementedQA',
          'target': 'Planned'
        },
        {
          type: 'link',
          'source': 'RBDHigh',
          'target': 'Assigned'
        },
        {
          type: 'link',
          'source': 'RBDMedium',
          'target': 'PartiallyImplemented'
        },
        {
          type: 'link',
          'source': 'NA',
          'target': 'Planned'
        },
        {
          type: 'link',
          'source': 'ImplementedReview',
          'target': 'Planned'
        },
        {
          type: 'link',
          'source': 'Assigned',
          'target': 'ImplementedReview'
        },
        {
          type: 'link',
          'source': 'Cancelled',
          'target': 'Implemented'
        },
        {
          type: 'link',
          'source': 'AlternativeImplementation',
          'target': 'ImplementedQA'
        },
        {
          type: 'link',
          'source': 'ImplementedQA',
          'target': 'Implemented'
        },
        {
          type: 'link',
          'source': 'RBDHigh',
          'target': 'PartiallyImplemented'
        },
        {
          type: 'link',
          'source': 'RBDLow',
          'target': 'ImplementedQA'
        },
        {
          type: 'link',
          'source': 'NA',
          'target': 'Implemented'
        },
        {
          type: 'link',
          'source': 'Implemented',
          'target': 'RBDLow'
        }
      ]
    };
    
    zingchart.render({
      id: 'myChart',
      data: chartConfig,
      height: '650px',
      output: 'canvas'
    });
    
    let lastNodeId = '';
    zingchart.bind('myChart', 'mousemove', function(p) {
      if (p.target === 'shape') {
        if (p.targetid.indexOf('-gshape-area') !== -1 && p.targetid.indexOf('-shape-node_') !== -1) {
          let nodeId = p.targetid.replace(p.graphid + '-shape-node_', '').replace('-gshape-area', '');
          if (nodeId !== lastNodeId) {
            lastNodeId = nodeId;
            let ids = zingchart.exec(p.id, 'getobjectsbyclass', {
              graphid: 0,
              type: 'shape',
              cls: 'zctreeshape'
            });
            let data = [];
            for (let i = 0; i < ids.length; i++) {
              let tokens = ids[i].split('_');
              if (tokens[0] === 'link' && (tokens[1] === lastNodeId || tokens[2] === lastNodeId)) {
                data.push({
                  id: ids[i],
                  lineColor: '#ff0000'
                });
              }
            }
            zingchart.exec(p.id, 'updateobject', {
              type: 'shape',
              data: data
            });
          }
        }
      } else {
        if (lastNodeId !== '') {
          lastNodeId = '';
          let ids = zingchart.exec(p.id, 'getobjectsbyclass', {
            graphid: 0,
            type: 'shape',
            cls: 'zctreeshape'
          });
          let data = [];
          for (let i = 0; i < ids.length; i++) {
            let tokens = ids[i].split('_');
            if (tokens[0] === 'link') {
              data.push({
                id: ids[i],
                lineColor: '#cccccc'
              });
            }
          }
          zingchart.exec(p.id, 'updateobject', {
            type: 'shape',
            data: data
          });
        }
      }
    });