• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    9.   <style>
    10.     html,
    11.     body,
    12.     #myChart {
    13.       height: 100%;
    14.       width: 100%;
    15.     }
    16.   </style>
    17. </head>
    18.  
    19. <body>
    20.   <div id='myChart'></div>
    21.   <script>
    22.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    23.     var myConfig = {
    24.       "type": "null",
    25.       "shapes": [{
    26.           "type": "rectangle",
    27.           "background-color": "#5297b6",
    28.           "height": 300,
    29.           "width": 150,
    30.           "x": 10,
    31.           "y": 40,
    32.           "label": {
    33.             "text": "Phase 1",
    34.             "background-color": "#5297b6",
    35.             "color": "white",
    36.             "offset-y": "140px"
    37.           }
    38.         },
    39.         {
    40.           "type": "rectangle",
    41.           "background-color": "#89ab57",
    42.           "height": 300,
    43.           "width": 150,
    44.           "x": 160,
    45.           "y": 40,
    46.           "label": {
    47.             "text": "Phase 2",
    48.             "background-color": "#89ab57",
    49.             "color": "white",
    50.             "offset-y": "140px"
    51.           }
    52.         },
    53.         {
    54.           "type": "rectangle",
    55.           "background-color": "#bbbbbb",
    56.           "height": 300,
    57.           "width": 150,
    58.           "x": 310,
    59.           "y": 40,
    60.           "label": {
    61.             "text": "Phase 3",
    62.             "background-color": "#bbbbbb",
    63.             "color": "white",
    64.             "offset-y": "140px"
    65.           }
    66.         }
    67.       ],
    68.       "arrows": [{
    69.           "from": {
    70.             "x": "20%",
    71.             "y": "20%"
    72.           },
    73.           "to": {
    74.             "x": "32%",
    75.             "y": "20%"
    76.           },
    77.           "background-color": "white",
    78.           "z-index": 100,
    79.           "size": 5
    80.         },
    81.         {
    82.           "from": {
    83.             "x": "45%",
    84.             "y": "20%"
    85.           },
    86.           "to": {
    87.             "x": "57%",
    88.             "y": "20%"
    89.           },
    90.           "background-color": "white",
    91.           "z-index": 100,
    92.           "size": 5
    93.         }
    94.       ]
    95.     };
    96.  
    97.     zingchart.render({
    98.       id: 'myChart',
    99.       data: myConfig,
    100.       height: "100%",
    101.       width: "100%"
    102.     });
    103.   </script>
    104. </body>
    105.  
    106. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    9. </head>
    10.  
    11. <body>
    12.   <div id='myChart'></div>
    13. </body>
    14.  
    15. </html>
    1. html,
    2. body,
    3. #myChart {
    4.   height: 100%;
    5.   width: 100%;
    6. }
    1. var myConfig = {
    2.   "type": "null",
    3.   "shapes": [{
    4.       "type": "rectangle",
    5.       "background-color": "#5297b6",
    6.       "height": 300,
    7.       "width": 150,
    8.       "x": 10,
    9.       "y": 40,
    10.       "label": {
    11.         "text": "Phase 1",
    12.         "background-color": "#5297b6",
    13.         "color": "white",
    14.         "offset-y": "140px"
    15.       }
    16.     },
    17.     {
    18.       "type": "rectangle",
    19.       "background-color": "#89ab57",
    20.       "height": 300,
    21.       "width": 150,
    22.       "x": 160,
    23.       "y": 40,
    24.       "label": {
    25.         "text": "Phase 2",
    26.         "background-color": "#89ab57",
    27.         "color": "white",
    28.         "offset-y": "140px"
    29.       }
    30.     },
    31.     {
    32.       "type": "rectangle",
    33.       "background-color": "#bbbbbb",
    34.       "height": 300,
    35.       "width": 150,
    36.       "x": 310,
    37.       "y": 40,
    38.       "label": {
    39.         "text": "Phase 3",
    40.         "background-color": "#bbbbbb",
    41.         "color": "white",
    42.         "offset-y": "140px"
    43.       }
    44.     }
    45.   ],
    46.   "arrows": [{
    47.       "from": {
    48.         "x": "20%",
    49.         "y": "20%"
    50.       },
    51.       "to": {
    52.         "x": "32%",
    53.         "y": "20%"
    54.       },
    55.       "background-color": "white",
    56.       "z-index": 100,
    57.       "size": 5
    58.     },
    59.     {
    60.       "from": {
    61.         "x": "45%",
    62.         "y": "20%"
    63.       },
    64.       "to": {
    65.         "x": "57%",
    66.         "y": "20%"
    67.       },
    68.       "background-color": "white",
    69.       "z-index": 100,
    70.       "size": 5
    71.     }
    72.   ]
    73. };
    74.  
    75. zingchart.render({
    76.   id: 'myChart',
    77.   data: myConfig,
    78.   height: "100%",
    79.   width: "100%"
    80. });