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