• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html class="zc-html">
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8.   <!-- 
    9. 			Point ZingChart to modules folder so ZingChart
    10. 			can automatically grab the CSV module 
    11. 		-->
    12.   <script nonce="undefined">
    13.     zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
    14.   </script>
    15.   <!-- load image data -->
    16.   <script nonce="undefined" src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/people.js'></script>
    17.   <style>
    18.     .zc-html,
    19.     .zc-body {
    20.       margin: 0;
    21.       padding: 0;
    22.       width: 100%;
    23.       height: 100%;
    24.     }
    25.  
    26.     .chart--container {
    27.       height: 100%;
    28.       width: 100%;
    29.       min-height: 530px;
    30.     }
    31.  
    32.     .zc-ref {
    33.       display: none;
    34.     }
    35.   </style>
    36. </head>
    37.  
    38. <body class="zc-body">
    39.   <!-- CHART CONTAINER -->
    40.   <div id="myChart" class="chart--container">
    41.     <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
    42.   </div>
    43.   <script>
    44.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // window:load event for Javascript to run after HTML
    45.     // because this Javascript is injected into the document head
    46.     let chartConfig = {
    47.       type: 'tree',
    48.       options: {
    49.         weightedNodes: false,
    50.         aspect: 'graph',
    51.         maxIterations: 20,
    52.         springLength: 275,
    53.         attractionConstant: 0.8,
    54.         repulsionConstant: 4000,
    55.         repulsionDistanceFactor: 1,
    56.         node: {
    57.           size: 12,
    58.           backgroundColor: '#45D6A4',
    59.           label: {
    60.             color: 'black',
    61.             fontWeight: '500',
    62.             offsetY: 0
    63.           },
    64.           tooltip: {
    65.             text: '%data-full-name',
    66.             visible: true
    67.           }
    68.         },
    69.         link: {
    70.           lineWidth: 3,
    71.           lineColor: '#cccccc'
    72.         },
    73.       },
    74.       series: [{
    75.           type: 'node',
    76.           id: 'Implemented',
    77.           text: 'Implemented',
    78.           dataFullName: 'Implemented'
    79.         },
    80.         {
    81.           type: 'node',
    82.           id: 'PartiallyImplemented',
    83.           text: 'Partially Implemented',
    84.           dataFullName: 'Partially Implemented'
    85.         },
    86.         {
    87.           type: 'node',
    88.           id: 'Planned',
    89.           text: 'Planned',
    90.           dataFullName: 'Planned'
    91.         },
    92.         {
    93.           type: 'node',
    94.           id: 'Assigned',
    95.           text: 'Assigned',
    96.           dataFullName: 'Assigned'
    97.         },
    98.         {
    99.           type: 'node',
    100.           id: 'ImplementedReview',
    101.           text: 'Implemented Review',
    102.           dataFullName: 'Implemented Review'
    103.         },
    104.         {
    105.           type: 'node',
    106.           id: 'NA',
    107.           text: 'NA',
    108.           dataFullName: 'NA'
    109.         },
    110.         {
    111.           type: 'node',
    112.           id: 'RBDHigh',
    113.           text: 'RBD_High',
    114.           dataFullName: 'RBD_High'
    115.         },
    116.         {
    117.           type: 'node',
    118.           id: 'RBDMedium',
    119.           text: 'RBD_Medium',
    120.           dataFullName: 'RBD_Medium'
    121.         },
    122.         {
    123.           type: 'node',
    124.           id: 'RBDLow',
    125.           text: 'RBD_Low',
    126.           dataFullName: 'RBD_Low'
    127.         },
    128.         {
    129.           type: 'node',
    130.           id: 'ImplementedQA',
    131.           text: 'Implemented-QA',
    132.           dataFullName: 'Implemented-QA'
    133.         },
    134.         {
    135.           type: 'node',
    136.           id: 'AlternativeImplementation',
    137.           text: 'Alternative Implementation',
    138.           dataFullName: 'Alternative Implementation'
    139.         },
    140.         {
    141.           type: 'node',
    142.           id: 'Cancelled',
    143.           text: 'Cancelled',
    144.           dataFullName: 'Cancelled'
    145.         },
    146.         {
    147.           type: 'node',
    148.           id: 'PartiallyImplemented',
    149.           text: 'Partially Implemented',
    150.           dataFullName: 'Partially Implemented'
    151.         },
    152.         {
    153.           type: 'node',
    154.           id: 'TestState',
    155.           text: ' Test State',
    156.           dataFullName: ' Test State'
    157.         },
    158.         {
    159.           type: 'link',
    160.           'source': 'ImplementedQA',
    161.           'target': 'Cancelled'
    162.         },
    163.         {
    164.           type: 'link',
    165.           'source': 'AlternativeImplementation',
    166.           'target': 'RBDMedium'
    167.         },
    168.         {
    169.           type: 'link',
    170.           'source': 'PartiallyImplemented',
    171.           'target': 'RBDLow'
    172.         },
    173.         {
    174.           type: 'link',
    175.           'source': 'ImplementedReview',
    176.           'target': 'Implemented'
    177.         },
    178.         {
    179.           type: 'link',
    180.           'source': 'Assigned',
    181.           'target': 'PartiallyImplemented'
    182.         },
    183.         {
    184.           type: 'link',
    185.           'source': 'NA',
    186.           'target': 'AlternativeImplementation'
    187.         },
    188.         {
    189.           type: 'link',
    190.           'source': 'RBDLow',
    191.           'target': 'RBDHigh'
    192.         },
    193.         {
    194.           type: 'link',
    195.           'source': 'Planned',
    196.           'target': 'RBDLow'
    197.         },
    198.         {
    199.           type: 'link',
    200.           'source': 'Implemented',
    201.           'target': 'RBDHigh'
    202.         },
    203.         {
    204.           type: 'link',
    205.           'source': 'AlternativeImplementation',
    206.           'target': 'NA'
    207.         },
    208.         {
    209.           type: 'link',
    210.           'source': 'PartiallyImplemented',
    211.           'target': 'RBDHigh'
    212.         },
    213.         {
    214.           type: 'link',
    215.           'source': 'ImplementedQA',
    216.           'target': 'Assigned'
    217.         },
    218.         {
    219.           type: 'link',
    220.           'source': 'Implemented',
    221.           'target': 'PartiallyImplemented'
    222.         },
    223.         {
    224.           type: 'link',
    225.           'source': 'RBDLow',
    226.           'target': 'Cancelled'
    227.         },
    228.         {
    229.           type: 'link',
    230.           'source': 'Assigned',
    231.           'target': 'Cancelled'
    232.         },
    233.         {
    234.           type: 'link',
    235.           'source': 'RBDLow',
    236.           'target': 'ImplementedReview'
    237.         },
    238.         {
    239.           type: 'link',
    240.           'source': 'Planned',
    241.           'target': 'RBDHigh'
    242.         },
    243.         {
    244.           type: 'link',
    245.           'source': 'Implemented',
    246.           'target': 'ImplementedReview'
    247.         },
    248.         {
    249.           type: 'link',
    250.           'source': 'RBDMedium',
    251.           'target': 'Cancelled'
    252.         },
    253.         {
    254.           type: 'link',
    255.           'source': 'AlternativeImplementation',
    256.           'target': 'Planned'
    257.         },
    258.         {
    259.           type: 'link',
    260.           'source': 'PartiallyImplemented',
    261.           'target': 'ImplementedReview'
    262.         },
    263.         {
    264.           type: 'link',
    265.           'source': 'PartiallyImplemented',
    266.           'target': 'Cancelled'
    267.         },
    268.         {
    269.           type: 'link',
    270.           'source': 'RBDLow',
    271.           'target': 'Planned'
    272.         },
    273.         {
    274.           type: 'link',
    275.           'source': 'Planned',
    276.           'target': 'ImplementedReview'
    277.         },
    278.         {
    279.           type: 'link',
    280.           'source': 'Cancelled',
    281.           'target': 'ImplementedQA'
    282.         },
    283.         {
    284.           type: 'link',
    285.           'source': 'Implemented',
    286.           'target': 'Planned'
    287.         },
    288.         {
    289.           type: 'link',
    290.           'source': 'RBDHigh',
    291.           'target': 'Cancelled'
    292.         },
    293.         {
    294.           type: 'link',
    295.           'source': 'RBDMedium',
    296.           'target': 'ImplementedQA'
    297.         },
    298.         {
    299.           type: 'link',
    300.           'source': 'PartiallyImplemented',
    301.           'target': 'Planned'
    302.         },
    303.         {
    304.           type: 'link',
    305.           'source': 'NA',
    306.           'target': 'Cancelled'
    307.         },
    308.         {
    309.           type: 'link',
    310.           'source': 'RBDLow',
    311.           'target': 'Implemented'
    312.         },
    313.         {
    314.           type: 'link',
    315.           'source': 'Planned',
    316.           'target': 'PartiallyImplemented'
    317.         },
    318.         {
    319.           type: 'link',
    320.           'source': 'Cancelled',
    321.           'target': 'RBDMedium'
    322.         },
    323.         {
    324.           type: 'link',
    325.           'source': 'ImplementedQA',
    326.           'target': 'RBDMedium'
    327.         },
    328.         {
    329.           type: 'link',
    330.           'source': 'RBDHigh',
    331.           'target': 'ImplementedQA'
    332.         },
    333.         {
    334.           type: 'link',
    335.           'source': 'RBDMedium',
    336.           'target': 'RBDHigh'
    337.         },
    338.         {
    339.           type: 'link',
    340.           'source': 'NA',
    341.           'target': 'RBDLow'
    342.         },
    343.         {
    344.           type: 'link',
    345.           'source': 'ImplementedReview',
    346.           'target': 'RBDLow'
    347.         },
    348.         {
    349.           type: 'link',
    350.           'source': 'Assigned',
    351.           'target': 'ImplementedQA'
    352.         },
    353.         {
    354.           type: 'link',
    355.           'source': 'Cancelled',
    356.           'target': 'NA'
    357.         },
    358.         {
    359.           type: 'link',
    360.           'source': 'ImplementedQA',
    361.           'target': 'NA'
    362.         },
    363.         {
    364.           type: 'link',
    365.           'source': 'RBDHigh',
    366.           'target': 'RBDMedium'
    367.         },
    368.         {
    369.           type: 'link',
    370.           'source': 'RBDMedium',
    371.           'target': 'ImplementedReview'
    372.         },
    373.         {
    374.           type: 'link',
    375.           'source': 'NA',
    376.           'target': 'RBDHigh'
    377.         },
    378.         {
    379.           type: 'link',
    380.           'source': 'ImplementedReview',
    381.           'target': 'RBDHigh'
    382.         },
    383.         {
    384.           type: 'link',
    385.           'source': 'Assigned',
    386.           'target': 'RBDMedium'
    387.         },
    388.         {
    389.           type: 'link',
    390.           'source': 'Cancelled',
    391.           'target': 'Assigned'
    392.         },
    393.         {
    394.           type: 'link',
    395.           'source': 'Planned',
    396.           'target': 'AlternativeImplementation'
    397.         },
    398.         {
    399.           type: 'link',
    400.           'source': 'ImplementedQA',
    401.           'target': 'Assigned'
    402.         },
    403.         {
    404.           type: 'link',
    405.           'source': 'RBDHigh',
    406.           'target': 'ImplementedReview'
    407.         },
    408.         {
    409.           type: 'link',
    410.           'source': 'RBDMedium',
    411.           'target': 'Planned'
    412.         },
    413.         {
    414.           type: 'link',
    415.           'source': 'NA',
    416.           'target': 'Assigned'
    417.         },
    418.         {
    419.           type: 'link',
    420.           'source': 'ImplementedReview',
    421.           'target': 'Assigned'
    422.         },
    423.         {
    424.           type: 'link',
    425.           'source': 'Assigned',
    426.           'target': 'NA'
    427.         },
    428.         {
    429.           type: 'link',
    430.           'source': 'Cancelled',
    431.           'target': 'PartiallyImplemented'
    432.         },
    433.         {
    434.           type: 'link',
    435.           'source': 'Assigned',
    436.           'target': 'AlternativeImplementation'
    437.         },
    438.         {
    439.           type: 'link',
    440.           'source': 'ImplementedQA',
    441.           'target': 'PartiallyImplemented'
    442.         },
    443.         {
    444.           type: 'link',
    445.           'source': 'RBDHigh',
    446.           'target': 'Planned'
    447.         },
    448.         {
    449.           type: 'link',
    450.           'source': 'RBDMedium',
    451.           'target': 'Implemented'
    452.         },
    453.         {
    454.           type: 'link',
    455.           'source': 'NA',
    456.           'target': 'PartiallyImplemented'
    457.         },
    458.         {
    459.           type: 'link',
    460.           'source': 'PartiallyImplemented',
    461.           'target': 'Implemented'
    462.         },
    463.         {
    464.           type: 'link',
    465.           'source': 'AlternativeImplementation',
    466.           'target': 'Cancelled'
    467.         },
    468.         {
    469.           type: 'link',
    470.           'source': 'AlternativeImplementation',
    471.           'target': 'RBDLow'
    472.         },
    473.         {
    474.           type: 'link',
    475.           'source': 'PartiallyImplemented',
    476.           'target': 'ImplementedQA'
    477.         },
    478.         {
    479.           type: 'link',
    480.           'source': 'ImplementedReview',
    481.           'target': 'PartiallyImplemented'
    482.         },
    483.         {
    484.           type: 'link',
    485.           'source': 'Assigned',
    486.           'target': 'Planned'
    487.         },
    488.         {
    489.           type: 'link',
    490.           'source': 'RBDHigh',
    491.           'target': 'Implemented'
    492.         },
    493.         {
    494.           type: 'link',
    495.           'source': 'RBDLow',
    496.           'target': 'RBDMedium'
    497.         },
    498.         {
    499.           type: 'link',
    500.           'source': 'Planned',
    501.           'target': 'ImplementedQA'
    502.         },
    503.         {
    504.           type: 'link',
    505.           'source': 'Implemented',
    506.           'target': 'RBDMedium'
    507.         },
    508.         {
    509.           type: 'link',
    510.           'source': 'ImplementedQA',
    511.           'target': 'AlternativeImplementation'
    512.         },
    513.         {
    514.           type: 'link',
    515.           'source': 'AlternativeImplementation',
    516.           'target': 'RBDHigh'
    517.         },
    518.         {
    519.           type: 'link',
    520.           'source': 'PartiallyImplemented',
    521.           'target': 'RBDMedium'
    522.         },
    523.         {
    524.           type: 'link',
    525.           'source': 'Implemented',
    526.           'target': 'ImplementedQA'
    527.         },
    528.         {
    529.           type: 'link',
    530.           'source': 'Assigned',
    531.           'target': 'Implemented'
    532.         },
    533.         {
    534.           type: 'link',
    535.           'source': 'ImplementedReview',
    536.           'target': 'Cancelled'
    537.         },
    538.         {
    539.           type: 'link',
    540.           'source': 'RBDLow',
    541.           'target': 'NA'
    542.         },
    543.         {
    544.           type: 'link',
    545.           'source': 'Planned',
    546.           'target': 'RBDMedium'
    547.         },
    548.         {
    549.           type: 'link',
    550.           'source': 'Implemented',
    551.           'target': 'NA'
    552.         },
    553.         {
    554.           type: 'link',
    555.           'source': 'AlternativeImplementation',
    556.           'target': 'Assigned'
    557.         },
    558.         {
    559.           type: 'link',
    560.           'source': 'PartiallyImplemented',
    561.           'target': 'NA'
    562.         },
    563.         {
    564.           type: 'link',
    565.           'source': 'RBDLow',
    566.           'target': 'AlternativeImplementation'
    567.         },
    568.         {
    569.           type: 'link',
    570.           'source': 'Planned',
    571.           'target': 'Cancelled'
    572.         },
    573.         {
    574.           type: 'link',
    575.           'source': 'RBDLow',
    576.           'target': 'Assigned'
    577.         },
    578.         {
    579.           type: 'link',
    580.           'source': 'Planned',
    581.           'target': 'NA'
    582.         },
    583.         {
    584.           type: 'link',
    585.           'source': 'Cancelled',
    586.           'target': 'AlternativeImplementation'
    587.         },
    588.         {
    589.           type: 'link',
    590.           'source': 'Implemented',
    591.           'target': 'Assigned'
    592.         },
    593.         {
    594.           type: 'link',
    595.           'source': 'RBDMedium',
    596.           'target': 'AlternativeImplementation'
    597.         },
    598.         {
    599.           type: 'link',
    600.           'source': 'AlternativeImplementation',
    601.           'target': 'Implemented'
    602.         },
    603.         {
    604.           type: 'link',
    605.           'source': 'PartiallyImplemented',
    606.           'target': 'Assigned'
    607.         },
    608.         {
    609.           type: 'link',
    610.           'source': 'RBDLow',
    611.           'target': 'PartiallyImplemented'
    612.         },
    613.         {
    614.           type: 'link',
    615.           'source': 'Planned',
    616.           'target': 'Assigned'
    617.         },
    618.         {
    619.           type: 'link',
    620.           'source': 'Cancelled',
    621.           'target': 'RBDLow'
    622.         },
    623.         {
    624.           type: 'link',
    625.           'source': 'ImplementedQA',
    626.           'target': 'RBDLow'
    627.         },
    628.         {
    629.           type: 'link',
    630.           'source': 'RBDHigh',
    631.           'target': 'AlternativeImplementation'
    632.         },
    633.         {
    634.           type: 'link',
    635.           'source': 'RBDMedium',
    636.           'target': 'RBDLow'
    637.         },
    638.         {
    639.           type: 'link',
    640.           'source': 'NA',
    641.           'target': 'ImplementedQA'
    642.         },
    643.         {
    644.           type: 'link',
    645.           'source': 'Implemented',
    646.           'target': 'Cancelled'
    647.         },
    648.         {
    649.           type: 'link',
    650.           'source': 'ImplementedReview',
    651.           'target': 'ImplementedQA'
    652.         },
    653.         {
    654.           type: 'link',
    655.           'source': 'Planned',
    656.           'target': 'Implemented'
    657.         },
    658.         {
    659.           type: 'link',
    660.           'source': 'Cancelled',
    661.           'target': 'RBDHigh'
    662.         },
    663.         {
    664.           type: 'link',
    665.           'source': 'ImplementedQA',
    666.           'target': 'RBDHigh'
    667.         },
    668.         {
    669.           type: 'link',
    670.           'source': 'RBDHigh',
    671.           'target': 'RBDLow'
    672.         },
    673.         {
    674.           type: 'link',
    675.           'source': 'RBDMedium',
    676.           'target': 'NA'
    677.         },
    678.         {
    679.           type: 'link',
    680.           'source': 'NA',
    681.           'target': 'RBDMedium'
    682.         },
    683.         {
    684.           type: 'link',
    685.           'source': 'ImplementedReview',
    686.           'target': 'RBDMedium'
    687.         },
    688.         {
    689.           type: 'link',
    690.           'source': 'Assigned',
    691.           'target': 'RBDLow'
    692.         },
    693.         {
    694.           type: 'link',
    695.           'source': 'Cancelled',
    696.           'target': 'ImplementedReview'
    697.         },
    698.         {
    699.           type: 'link',
    700.           'source': 'ImplementedQA',
    701.           'target': 'ImplementedReview'
    702.         },
    703.         {
    704.           type: 'link',
    705.           'source': 'RBDHigh',
    706.           'target': 'NA'
    707.         },
    708.         {
    709.           type: 'link',
    710.           'source': 'RBDMedium',
    711.           'target': 'Assigned'
    712.         },
    713.         {
    714.           type: 'link',
    715.           'source': 'NA',
    716.           'target': 'ImplementedReview'
    717.         },
    718.         {
    719.           type: 'link',
    720.           'source': 'ImplementedReview',
    721.           'target': 'NA'
    722.         },
    723.         {
    724.           type: 'link',
    725.           'source': 'Assigned',
    726.           'target': 'RBDHigh'
    727.         },
    728.         {
    729.           type: 'link',
    730.           'source': 'Cancelled',
    731.           'target': 'Planned'
    732.         },
    733.         {
    734.           type: 'link',
    735.           'source': 'Implemented',
    736.           'target': 'AlternativeImplementation'
    737.         },
    738.         {
    739.           type: 'link',
    740.           'source': 'ImplementedQA',
    741.           'target': 'Planned'
    742.         },
    743.         {
    744.           type: 'link',
    745.           'source': 'RBDHigh',
    746.           'target': 'Assigned'
    747.         },
    748.         {
    749.           type: 'link',
    750.           'source': 'RBDMedium',
    751.           'target': 'PartiallyImplemented'
    752.         },
    753.         {
    754.           type: 'link',
    755.           'source': 'NA',
    756.           'target': 'Planned'
    757.         },
    758.         {
    759.           type: 'link',
    760.           'source': 'ImplementedReview',
    761.           'target': 'Planned'
    762.         },
    763.         {
    764.           type: 'link',
    765.           'source': 'Assigned',
    766.           'target': 'ImplementedReview'
    767.         },
    768.         {
    769.           type: 'link',
    770.           'source': 'Cancelled',
    771.           'target': 'Implemented'
    772.         },
    773.         {
    774.           type: 'link',
    775.           'source': 'AlternativeImplementation',
    776.           'target': 'ImplementedQA'
    777.         },
    778.         {
    779.           type: 'link',
    780.           'source': 'ImplementedQA',
    781.           'target': 'Implemented'
    782.         },
    783.         {
    784.           type: 'link',
    785.           'source': 'RBDHigh',
    786.           'target': 'PartiallyImplemented'
    787.         },
    788.         {
    789.           type: 'link',
    790.           'source': 'RBDLow',
    791.           'target': 'ImplementedQA'
    792.         },
    793.         {
    794.           type: 'link',
    795.           'source': 'NA',
    796.           'target': 'Implemented'
    797.         },
    798.         {
    799.           type: 'link',
    800.           'source': 'Implemented',
    801.           'target': 'RBDLow'
    802.         }
    803.       ]
    804.     };
    805.  
    806.     zingchart.render({
    807.       id: 'myChart',
    808.       data: chartConfig,
    809.       height: '650px',
    810.       output: 'canvas'
    811.     });
    812.  
    813.     let lastNodeId = '';
    814.     zingchart.bind('myChart', 'mousemove', function(p) {
    815.       if (p.target === 'shape') {
    816.         if (p.targetid.indexOf('-gshape-area') !== -1 && p.targetid.indexOf('-shape-node_') !== -1) {
    817.           let nodeId = p.targetid.replace(p.graphid + '-shape-node_', '').replace('-gshape-area', '');
    818.           if (nodeId !== lastNodeId) {
    819.             lastNodeId = nodeId;
    820.             let ids = zingchart.exec(p.id, 'getobjectsbyclass', {
    821.               graphid: 0,
    822.               type: 'shape',
    823.               cls: 'zctreeshape'
    824.             });
    825.             let data = [];
    826.             for (let i = 0; i < ids.length; i++) {
    827.               let tokens = ids[i].split('_');
    828.               if (tokens[0] === 'link' && (tokens[1] === lastNodeId || tokens[2] === lastNodeId)) {
    829.                 data.push({
    830.                   id: ids[i],
    831.                   lineColor: '#ff0000'
    832.                 });
    833.               }
    834.             }
    835.             zingchart.exec(p.id, 'updateobject', {
    836.               type: 'shape',
    837.               data: data
    838.             });
    839.           }
    840.         }
    841.       } else {
    842.         if (lastNodeId !== '') {
    843.           lastNodeId = '';
    844.           let ids = zingchart.exec(p.id, 'getobjectsbyclass', {
    845.             graphid: 0,
    846.             type: 'shape',
    847.             cls: 'zctreeshape'
    848.           });
    849.           let data = [];
    850.           for (let i = 0; i < ids.length; i++) {
    851.             let tokens = ids[i].split('_');
    852.             if (tokens[0] === 'link') {
    853.               data.push({
    854.                 id: ids[i],
    855.                 lineColor: '#cccccc'
    856.               });
    857.             }
    858.           }
    859.           zingchart.exec(p.id, 'updateobject', {
    860.             type: 'shape',
    861.             data: data
    862.           });
    863.         }
    864.       }
    865.     });
    866.   </script>
    867. </body>
    868.  
    869. </html>
    1. <!DOCTYPE html>
    2. <html class="zc-html">
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8.   <!-- 
    9. 			Point ZingChart to modules folder so ZingChart
    10. 			can automatically grab the CSV module 
    11. 		-->
    12.   <script>
    13.     zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
    14.   </script>
    15.   <!-- load image data -->
    16.   <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/people.js'></script>
    17. </head>
    18.  
    19. <body class="zc-body">
    20.   <!-- CHART CONTAINER -->
    21.   <div id="myChart" class="chart--container">
    22.     <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
    23.   </div>
    24. </body>
    25.  
    26. </html>
    1. .zc-html,
    2. .zc-body {
    3.   margin: 0;
    4.   padding: 0;
    5.   width: 100%;
    6.   height: 100%;
    7. }
    8.  
    9. .chart--container {
    10.   height: 100%;
    11.   width: 100%;
    12.   min-height: 530px;
    13. }
    14.  
    15. .zc-ref {
    16.   display: none;
    17. }
    1. // window:load event for Javascript to run after HTML
    2. // because this Javascript is injected into the document head
    3. let chartConfig = {
    4.   type: 'tree',
    5.   options: {
    6.     weightedNodes: false,
    7.     aspect: 'graph',
    8.     maxIterations: 20,
    9.     springLength: 275,
    10.     attractionConstant: 0.8,
    11.     repulsionConstant: 4000,
    12.     repulsionDistanceFactor: 1,
    13.     node: {
    14.       size: 12,
    15.       backgroundColor: '#45D6A4',
    16.       label: {
    17.         color: 'black',
    18.         fontWeight: '500',
    19.         offsetY: 0
    20.       },
    21.       tooltip: {
    22.         text: '%data-full-name',
    23.         visible: true
    24.       }
    25.     },
    26.     link: {
    27.       lineWidth: 3,
    28.       lineColor: '#cccccc'
    29.     },
    30.   },
    31.   series: [{
    32.       type: 'node',
    33.       id: 'Implemented',
    34.       text: 'Implemented',
    35.       dataFullName: 'Implemented'
    36.     },
    37.     {
    38.       type: 'node',
    39.       id: 'PartiallyImplemented',
    40.       text: 'Partially Implemented',
    41.       dataFullName: 'Partially Implemented'
    42.     },
    43.     {
    44.       type: 'node',
    45.       id: 'Planned',
    46.       text: 'Planned',
    47.       dataFullName: 'Planned'
    48.     },
    49.     {
    50.       type: 'node',
    51.       id: 'Assigned',
    52.       text: 'Assigned',
    53.       dataFullName: 'Assigned'
    54.     },
    55.     {
    56.       type: 'node',
    57.       id: 'ImplementedReview',
    58.       text: 'Implemented Review',
    59.       dataFullName: 'Implemented Review'
    60.     },
    61.     {
    62.       type: 'node',
    63.       id: 'NA',
    64.       text: 'NA',
    65.       dataFullName: 'NA'
    66.     },
    67.     {
    68.       type: 'node',
    69.       id: 'RBDHigh',
    70.       text: 'RBD_High',
    71.       dataFullName: 'RBD_High'
    72.     },
    73.     {
    74.       type: 'node',
    75.       id: 'RBDMedium',
    76.       text: 'RBD_Medium',
    77.       dataFullName: 'RBD_Medium'
    78.     },
    79.     {
    80.       type: 'node',
    81.       id: 'RBDLow',
    82.       text: 'RBD_Low',
    83.       dataFullName: 'RBD_Low'
    84.     },
    85.     {
    86.       type: 'node',
    87.       id: 'ImplementedQA',
    88.       text: 'Implemented-QA',
    89.       dataFullName: 'Implemented-QA'
    90.     },
    91.     {
    92.       type: 'node',
    93.       id: 'AlternativeImplementation',
    94.       text: 'Alternative Implementation',
    95.       dataFullName: 'Alternative Implementation'
    96.     },
    97.     {
    98.       type: 'node',
    99.       id: 'Cancelled',
    100.       text: 'Cancelled',
    101.       dataFullName: 'Cancelled'
    102.     },
    103.     {
    104.       type: 'node',
    105.       id: 'PartiallyImplemented',
    106.       text: 'Partially Implemented',
    107.       dataFullName: 'Partially Implemented'
    108.     },
    109.     {
    110.       type: 'node',
    111.       id: 'TestState',
    112.       text: ' Test State',
    113.       dataFullName: ' Test State'
    114.     },
    115.     {
    116.       type: 'link',
    117.       'source': 'ImplementedQA',
    118.       'target': 'Cancelled'
    119.     },
    120.     {
    121.       type: 'link',
    122.       'source': 'AlternativeImplementation',
    123.       'target': 'RBDMedium'
    124.     },
    125.     {
    126.       type: 'link',
    127.       'source': 'PartiallyImplemented',
    128.       'target': 'RBDLow'
    129.     },
    130.     {
    131.       type: 'link',
    132.       'source': 'ImplementedReview',
    133.       'target': 'Implemented'
    134.     },
    135.     {
    136.       type: 'link',
    137.       'source': 'Assigned',
    138.       'target': 'PartiallyImplemented'
    139.     },
    140.     {
    141.       type: 'link',
    142.       'source': 'NA',
    143.       'target': 'AlternativeImplementation'
    144.     },
    145.     {
    146.       type: 'link',
    147.       'source': 'RBDLow',
    148.       'target': 'RBDHigh'
    149.     },
    150.     {
    151.       type: 'link',
    152.       'source': 'Planned',
    153.       'target': 'RBDLow'
    154.     },
    155.     {
    156.       type: 'link',
    157.       'source': 'Implemented',
    158.       'target': 'RBDHigh'
    159.     },
    160.     {
    161.       type: 'link',
    162.       'source': 'AlternativeImplementation',
    163.       'target': 'NA'
    164.     },
    165.     {
    166.       type: 'link',
    167.       'source': 'PartiallyImplemented',
    168.       'target': 'RBDHigh'
    169.     },
    170.     {
    171.       type: 'link',
    172.       'source': 'ImplementedQA',
    173.       'target': 'Assigned'
    174.     },
    175.     {
    176.       type: 'link',
    177.       'source': 'Implemented',
    178.       'target': 'PartiallyImplemented'
    179.     },
    180.     {
    181.       type: 'link',
    182.       'source': 'RBDLow',
    183.       'target': 'Cancelled'
    184.     },
    185.     {
    186.       type: 'link',
    187.       'source': 'Assigned',
    188.       'target': 'Cancelled'
    189.     },
    190.     {
    191.       type: 'link',
    192.       'source': 'RBDLow',
    193.       'target': 'ImplementedReview'
    194.     },
    195.     {
    196.       type: 'link',
    197.       'source': 'Planned',
    198.       'target': 'RBDHigh'
    199.     },
    200.     {
    201.       type: 'link',
    202.       'source': 'Implemented',
    203.       'target': 'ImplementedReview'
    204.     },
    205.     {
    206.       type: 'link',
    207.       'source': 'RBDMedium',
    208.       'target': 'Cancelled'
    209.     },
    210.     {
    211.       type: 'link',
    212.       'source': 'AlternativeImplementation',
    213.       'target': 'Planned'
    214.     },
    215.     {
    216.       type: 'link',
    217.       'source': 'PartiallyImplemented',
    218.       'target': 'ImplementedReview'
    219.     },
    220.     {
    221.       type: 'link',
    222.       'source': 'PartiallyImplemented',
    223.       'target': 'Cancelled'
    224.     },
    225.     {
    226.       type: 'link',
    227.       'source': 'RBDLow',
    228.       'target': 'Planned'
    229.     },
    230.     {
    231.       type: 'link',
    232.       'source': 'Planned',
    233.       'target': 'ImplementedReview'
    234.     },
    235.     {
    236.       type: 'link',
    237.       'source': 'Cancelled',
    238.       'target': 'ImplementedQA'
    239.     },
    240.     {
    241.       type: 'link',
    242.       'source': 'Implemented',
    243.       'target': 'Planned'
    244.     },
    245.     {
    246.       type: 'link',
    247.       'source': 'RBDHigh',
    248.       'target': 'Cancelled'
    249.     },
    250.     {
    251.       type: 'link',
    252.       'source': 'RBDMedium',
    253.       'target': 'ImplementedQA'
    254.     },
    255.     {
    256.       type: 'link',
    257.       'source': 'PartiallyImplemented',
    258.       'target': 'Planned'
    259.     },
    260.     {
    261.       type: 'link',
    262.       'source': 'NA',
    263.       'target': 'Cancelled'
    264.     },
    265.     {
    266.       type: 'link',
    267.       'source': 'RBDLow',
    268.       'target': 'Implemented'
    269.     },
    270.     {
    271.       type: 'link',
    272.       'source': 'Planned',
    273.       'target': 'PartiallyImplemented'
    274.     },
    275.     {
    276.       type: 'link',
    277.       'source': 'Cancelled',
    278.       'target': 'RBDMedium'
    279.     },
    280.     {
    281.       type: 'link',
    282.       'source': 'ImplementedQA',
    283.       'target': 'RBDMedium'
    284.     },
    285.     {
    286.       type: 'link',
    287.       'source': 'RBDHigh',
    288.       'target': 'ImplementedQA'
    289.     },
    290.     {
    291.       type: 'link',
    292.       'source': 'RBDMedium',
    293.       'target': 'RBDHigh'
    294.     },
    295.     {
    296.       type: 'link',
    297.       'source': 'NA',
    298.       'target': 'RBDLow'
    299.     },
    300.     {
    301.       type: 'link',
    302.       'source': 'ImplementedReview',
    303.       'target': 'RBDLow'
    304.     },
    305.     {
    306.       type: 'link',
    307.       'source': 'Assigned',
    308.       'target': 'ImplementedQA'
    309.     },
    310.     {
    311.       type: 'link',
    312.       'source': 'Cancelled',
    313.       'target': 'NA'
    314.     },
    315.     {
    316.       type: 'link',
    317.       'source': 'ImplementedQA',
    318.       'target': 'NA'
    319.     },
    320.     {
    321.       type: 'link',
    322.       'source': 'RBDHigh',
    323.       'target': 'RBDMedium'
    324.     },
    325.     {
    326.       type: 'link',
    327.       'source': 'RBDMedium',
    328.       'target': 'ImplementedReview'
    329.     },
    330.     {
    331.       type: 'link',
    332.       'source': 'NA',
    333.       'target': 'RBDHigh'
    334.     },
    335.     {
    336.       type: 'link',
    337.       'source': 'ImplementedReview',
    338.       'target': 'RBDHigh'
    339.     },
    340.     {
    341.       type: 'link',
    342.       'source': 'Assigned',
    343.       'target': 'RBDMedium'
    344.     },
    345.     {
    346.       type: 'link',
    347.       'source': 'Cancelled',
    348.       'target': 'Assigned'
    349.     },
    350.     {
    351.       type: 'link',
    352.       'source': 'Planned',
    353.       'target': 'AlternativeImplementation'
    354.     },
    355.     {
    356.       type: 'link',
    357.       'source': 'ImplementedQA',
    358.       'target': 'Assigned'
    359.     },
    360.     {
    361.       type: 'link',
    362.       'source': 'RBDHigh',
    363.       'target': 'ImplementedReview'
    364.     },
    365.     {
    366.       type: 'link',
    367.       'source': 'RBDMedium',
    368.       'target': 'Planned'
    369.     },
    370.     {
    371.       type: 'link',
    372.       'source': 'NA',
    373.       'target': 'Assigned'
    374.     },
    375.     {
    376.       type: 'link',
    377.       'source': 'ImplementedReview',
    378.       'target': 'Assigned'
    379.     },
    380.     {
    381.       type: 'link',
    382.       'source': 'Assigned',
    383.       'target': 'NA'
    384.     },
    385.     {
    386.       type: 'link',
    387.       'source': 'Cancelled',
    388.       'target': 'PartiallyImplemented'
    389.     },
    390.     {
    391.       type: 'link',
    392.       'source': 'Assigned',
    393.       'target': 'AlternativeImplementation'
    394.     },
    395.     {
    396.       type: 'link',
    397.       'source': 'ImplementedQA',
    398.       'target': 'PartiallyImplemented'
    399.     },
    400.     {
    401.       type: 'link',
    402.       'source': 'RBDHigh',
    403.       'target': 'Planned'
    404.     },
    405.     {
    406.       type: 'link',
    407.       'source': 'RBDMedium',
    408.       'target': 'Implemented'
    409.     },
    410.     {
    411.       type: 'link',
    412.       'source': 'NA',
    413.       'target': 'PartiallyImplemented'
    414.     },
    415.     {
    416.       type: 'link',
    417.       'source': 'PartiallyImplemented',
    418.       'target': 'Implemented'
    419.     },
    420.     {
    421.       type: 'link',
    422.       'source': 'AlternativeImplementation',
    423.       'target': 'Cancelled'
    424.     },
    425.     {
    426.       type: 'link',
    427.       'source': 'AlternativeImplementation',
    428.       'target': 'RBDLow'
    429.     },
    430.     {
    431.       type: 'link',
    432.       'source': 'PartiallyImplemented',
    433.       'target': 'ImplementedQA'
    434.     },
    435.     {
    436.       type: 'link',
    437.       'source': 'ImplementedReview',
    438.       'target': 'PartiallyImplemented'
    439.     },
    440.     {
    441.       type: 'link',
    442.       'source': 'Assigned',
    443.       'target': 'Planned'
    444.     },
    445.     {
    446.       type: 'link',
    447.       'source': 'RBDHigh',
    448.       'target': 'Implemented'
    449.     },
    450.     {
    451.       type: 'link',
    452.       'source': 'RBDLow',
    453.       'target': 'RBDMedium'
    454.     },
    455.     {
    456.       type: 'link',
    457.       'source': 'Planned',
    458.       'target': 'ImplementedQA'
    459.     },
    460.     {
    461.       type: 'link',
    462.       'source': 'Implemented',
    463.       'target': 'RBDMedium'
    464.     },
    465.     {
    466.       type: 'link',
    467.       'source': 'ImplementedQA',
    468.       'target': 'AlternativeImplementation'
    469.     },
    470.     {
    471.       type: 'link',
    472.       'source': 'AlternativeImplementation',
    473.       'target': 'RBDHigh'
    474.     },
    475.     {
    476.       type: 'link',
    477.       'source': 'PartiallyImplemented',
    478.       'target': 'RBDMedium'
    479.     },
    480.     {
    481.       type: 'link',
    482.       'source': 'Implemented',
    483.       'target': 'ImplementedQA'
    484.     },
    485.     {
    486.       type: 'link',
    487.       'source': 'Assigned',
    488.       'target': 'Implemented'
    489.     },
    490.     {
    491.       type: 'link',
    492.       'source': 'ImplementedReview',
    493.       'target': 'Cancelled'
    494.     },
    495.     {
    496.       type: 'link',
    497.       'source': 'RBDLow',
    498.       'target': 'NA'
    499.     },
    500.     {
    501.       type: 'link',
    502.       'source': 'Planned',
    503.       'target': 'RBDMedium'
    504.     },
    505.     {
    506.       type: 'link',
    507.       'source': 'Implemented',
    508.       'target': 'NA'
    509.     },
    510.     {
    511.       type: 'link',
    512.       'source': 'AlternativeImplementation',
    513.       'target': 'Assigned'
    514.     },
    515.     {
    516.       type: 'link',
    517.       'source': 'PartiallyImplemented',
    518.       'target': 'NA'
    519.     },
    520.     {
    521.       type: 'link',
    522.       'source': 'RBDLow',
    523.       'target': 'AlternativeImplementation'
    524.     },
    525.     {
    526.       type: 'link',
    527.       'source': 'Planned',
    528.       'target': 'Cancelled'
    529.     },
    530.     {
    531.       type: 'link',
    532.       'source': 'RBDLow',
    533.       'target': 'Assigned'
    534.     },
    535.     {
    536.       type: 'link',
    537.       'source': 'Planned',
    538.       'target': 'NA'
    539.     },
    540.     {
    541.       type: 'link',
    542.       'source': 'Cancelled',
    543.       'target': 'AlternativeImplementation'
    544.     },
    545.     {
    546.       type: 'link',
    547.       'source': 'Implemented',
    548.       'target': 'Assigned'
    549.     },
    550.     {
    551.       type: 'link',
    552.       'source': 'RBDMedium',
    553.       'target': 'AlternativeImplementation'
    554.     },
    555.     {
    556.       type: 'link',
    557.       'source': 'AlternativeImplementation',
    558.       'target': 'Implemented'
    559.     },
    560.     {
    561.       type: 'link',
    562.       'source': 'PartiallyImplemented',
    563.       'target': 'Assigned'
    564.     },
    565.     {
    566.       type: 'link',
    567.       'source': 'RBDLow',
    568.       'target': 'PartiallyImplemented'
    569.     },
    570.     {
    571.       type: 'link',
    572.       'source': 'Planned',
    573.       'target': 'Assigned'
    574.     },
    575.     {
    576.       type: 'link',
    577.       'source': 'Cancelled',
    578.       'target': 'RBDLow'
    579.     },
    580.     {
    581.       type: 'link',
    582.       'source': 'ImplementedQA',
    583.       'target': 'RBDLow'
    584.     },
    585.     {
    586.       type: 'link',
    587.       'source': 'RBDHigh',
    588.       'target': 'AlternativeImplementation'
    589.     },
    590.     {
    591.       type: 'link',
    592.       'source': 'RBDMedium',
    593.       'target': 'RBDLow'
    594.     },
    595.     {
    596.       type: 'link',
    597.       'source': 'NA',
    598.       'target': 'ImplementedQA'
    599.     },
    600.     {
    601.       type: 'link',
    602.       'source': 'Implemented',
    603.       'target': 'Cancelled'
    604.     },
    605.     {
    606.       type: 'link',
    607.       'source': 'ImplementedReview',
    608.       'target': 'ImplementedQA'
    609.     },
    610.     {
    611.       type: 'link',
    612.       'source': 'Planned',
    613.       'target': 'Implemented'
    614.     },
    615.     {
    616.       type: 'link',
    617.       'source': 'Cancelled',
    618.       'target': 'RBDHigh'
    619.     },
    620.     {
    621.       type: 'link',
    622.       'source': 'ImplementedQA',
    623.       'target': 'RBDHigh'
    624.     },
    625.     {
    626.       type: 'link',
    627.       'source': 'RBDHigh',
    628.       'target': 'RBDLow'
    629.     },
    630.     {
    631.       type: 'link',
    632.       'source': 'RBDMedium',
    633.       'target': 'NA'
    634.     },
    635.     {
    636.       type: 'link',
    637.       'source': 'NA',
    638.       'target': 'RBDMedium'
    639.     },
    640.     {
    641.       type: 'link',
    642.       'source': 'ImplementedReview',
    643.       'target': 'RBDMedium'
    644.     },
    645.     {
    646.       type: 'link',
    647.       'source': 'Assigned',
    648.       'target': 'RBDLow'
    649.     },
    650.     {
    651.       type: 'link',
    652.       'source': 'Cancelled',
    653.       'target': 'ImplementedReview'
    654.     },
    655.     {
    656.       type: 'link',
    657.       'source': 'ImplementedQA',
    658.       'target': 'ImplementedReview'
    659.     },
    660.     {
    661.       type: 'link',
    662.       'source': 'RBDHigh',
    663.       'target': 'NA'
    664.     },
    665.     {
    666.       type: 'link',
    667.       'source': 'RBDMedium',
    668.       'target': 'Assigned'
    669.     },
    670.     {
    671.       type: 'link',
    672.       'source': 'NA',
    673.       'target': 'ImplementedReview'
    674.     },
    675.     {
    676.       type: 'link',
    677.       'source': 'ImplementedReview',
    678.       'target': 'NA'
    679.     },
    680.     {
    681.       type: 'link',
    682.       'source': 'Assigned',
    683.       'target': 'RBDHigh'
    684.     },
    685.     {
    686.       type: 'link',
    687.       'source': 'Cancelled',
    688.       'target': 'Planned'
    689.     },
    690.     {
    691.       type: 'link',
    692.       'source': 'Implemented',
    693.       'target': 'AlternativeImplementation'
    694.     },
    695.     {
    696.       type: 'link',
    697.       'source': 'ImplementedQA',
    698.       'target': 'Planned'
    699.     },
    700.     {
    701.       type: 'link',
    702.       'source': 'RBDHigh',
    703.       'target': 'Assigned'
    704.     },
    705.     {
    706.       type: 'link',
    707.       'source': 'RBDMedium',
    708.       'target': 'PartiallyImplemented'
    709.     },
    710.     {
    711.       type: 'link',
    712.       'source': 'NA',
    713.       'target': 'Planned'
    714.     },
    715.     {
    716.       type: 'link',
    717.       'source': 'ImplementedReview',
    718.       'target': 'Planned'
    719.     },
    720.     {
    721.       type: 'link',
    722.       'source': 'Assigned',
    723.       'target': 'ImplementedReview'
    724.     },
    725.     {
    726.       type: 'link',
    727.       'source': 'Cancelled',
    728.       'target': 'Implemented'
    729.     },
    730.     {
    731.       type: 'link',
    732.       'source': 'AlternativeImplementation',
    733.       'target': 'ImplementedQA'
    734.     },
    735.     {
    736.       type: 'link',
    737.       'source': 'ImplementedQA',
    738.       'target': 'Implemented'
    739.     },
    740.     {
    741.       type: 'link',
    742.       'source': 'RBDHigh',
    743.       'target': 'PartiallyImplemented'
    744.     },
    745.     {
    746.       type: 'link',
    747.       'source': 'RBDLow',
    748.       'target': 'ImplementedQA'
    749.     },
    750.     {
    751.       type: 'link',
    752.       'source': 'NA',
    753.       'target': 'Implemented'
    754.     },
    755.     {
    756.       type: 'link',
    757.       'source': 'Implemented',
    758.       'target': 'RBDLow'
    759.     }
    760.   ]
    761. };
    762.  
    763. zingchart.render({
    764.   id: 'myChart',
    765.   data: chartConfig,
    766.   height: '650px',
    767.   output: 'canvas'
    768. });
    769.  
    770. let lastNodeId = '';
    771. zingchart.bind('myChart', 'mousemove', function(p) {
    772.   if (p.target === 'shape') {
    773.     if (p.targetid.indexOf('-gshape-area') !== -1 && p.targetid.indexOf('-shape-node_') !== -1) {
    774.       let nodeId = p.targetid.replace(p.graphid + '-shape-node_', '').replace('-gshape-area', '');
    775.       if (nodeId !== lastNodeId) {
    776.         lastNodeId = nodeId;
    777.         let ids = zingchart.exec(p.id, 'getobjectsbyclass', {
    778.           graphid: 0,
    779.           type: 'shape',
    780.           cls: 'zctreeshape'
    781.         });
    782.         let data = [];
    783.         for (let i = 0; i < ids.length; i++) {
    784.           let tokens = ids[i].split('_');
    785.           if (tokens[0] === 'link' && (tokens[1] === lastNodeId || tokens[2] === lastNodeId)) {
    786.             data.push({
    787.               id: ids[i],
    788.               lineColor: '#ff0000'
    789.             });
    790.           }
    791.         }
    792.         zingchart.exec(p.id, 'updateobject', {
    793.           type: 'shape',
    794.           data: data
    795.         });
    796.       }
    797.     }
    798.   } else {
    799.     if (lastNodeId !== '') {
    800.       lastNodeId = '';
    801.       let ids = zingchart.exec(p.id, 'getobjectsbyclass', {
    802.         graphid: 0,
    803.         type: 'shape',
    804.         cls: 'zctreeshape'
    805.       });
    806.       let data = [];
    807.       for (let i = 0; i < ids.length; i++) {
    808.         let tokens = ids[i].split('_');
    809.         if (tokens[0] === 'link') {
    810.           data.push({
    811.             id: ids[i],
    812.             lineColor: '#cccccc'
    813.           });
    814.         }
    815.       }
    816.       zingchart.exec(p.id, 'updateobject', {
    817.         type: 'shape',
    818.         data: data
    819.       });
    820.     }
    821.   }
    822. });