• 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.       "title": {
    25.         "text": "Our Corporation",
    26.         "background-color": "#666666"
    27.       },
    28.       "shapes": [{
    29.           "type": "rect",
    30.           "background-color": "#5297b6",
    31.           "height": 50,
    32.           "width": 150,
    33.           "x": 293,
    34.           "y": 75,
    35.           "border-radius": "20px",
    36.           "label": {
    37.             "text": "General Manager",
    38.             "color": "white"
    39.           }
    40.         },
    41.         {
    42.           "type": "rect",
    43.           "background-color": "#89ab57",
    44.           "height": 50,
    45.           "width": 150,
    46.           "x": 180,
    47.           "y": 195,
    48.           "border-radius": "20px",
    49.           "label": {
    50.             "text": "Finance",
    51.             "color": "white"
    52.           }
    53.         },
    54.         {
    55.           "type": "rect",
    56.           "background-color": "#89ab57",
    57.           "height": 50,
    58.           "width": 150,
    59.           "x": 410,
    60.           "y": 195,
    61.           "border-radius": "20px",
    62.           "label": {
    63.             "text": "Human Resources",
    64.             "color": "white"
    65.           }
    66.         },
    67.         {
    68.           "type": "rect",
    69.           "background-color": "#666666",
    70.           "height": 50,
    71.           "width": 140,
    72.           "x": 75,
    73.           "y": 330,
    74.           "border-radius": "20px",
    75.           "label": {
    76.             "text": "Research &<br/>Development",
    77.             "color": "white"
    78.           }
    79.         },
    80.         {
    81.           "type": "rect",
    82.           "background-color": "#666666",
    83.           "height": 50,
    84.           "width": 140,
    85.           "x": 285,
    86.           "y": 330,
    87.           "border-radius": "20px",
    88.           "label": {
    89.             "text": "Operations",
    90.             "color": "white"
    91.           }
    92.         },
    93.         {
    94.           "type": "rect",
    95.           "background-color": "#666666",
    96.           "height": 50,
    97.           "width": 140,
    98.           "x": 490,
    99.           "y": 330,
    100.           "border-radius": "20px",
    101.           "label": {
    102.             "text": "Product Marketing",
    103.             "color": "white"
    104.           }
    105.         },
    106.         {
    107.           "type": "line",
    108.           "line-width": "2",
    109.           "line-color": "#999",
    110.           "points": [
    111.             [300, 100],
    112.             [300, 300]
    113.           ]
    114.         },
    115.         {
    116.           "type": "line",
    117.           "line-width": "2",
    118.           "line-color": "#999",
    119.           "points": [
    120.             [250, 200],
    121.             [340, 200]
    122.           ]
    123.         },
    124.         {
    125.           "type": "line",
    126.           "line-width": "2",
    127.           "line-color": "#999",
    128.           "points": [
    129.             [75, 270],
    130.             [500, 270]
    131.           ]
    132.         },
    133.         {
    134.           "type": "line",
    135.           "line-width": "2",
    136.           "line-color": "#999",
    137.           "points": [
    138.             [75, 270],
    139.             [75, 300]
    140.           ]
    141.         },
    142.         {
    143.           "type": "line",
    144.           "line-width": "2",
    145.           "line-color": "#999",
    146.           "points": [
    147.             [500, 270],
    148.             [500, 300]
    149.           ]
    150.         }
    151.       ]
    152.     };
    153.  
    154.     zingchart.render({
    155.       id: 'myChart',
    156.       data: myConfig,
    157.       height: "100%",
    158.       width: "100%"
    159.     });
    160.   </script>
    161. </body>
    162.  
    163. </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.   "title": {
    3.     "text": "Our Corporation",
    4.     "background-color": "#666666"
    5.   },
    6.   "shapes": [{
    7.       "type": "rect",
    8.       "background-color": "#5297b6",
    9.       "height": 50,
    10.       "width": 150,
    11.       "x": 293,
    12.       "y": 75,
    13.       "border-radius": "20px",
    14.       "label": {
    15.         "text": "General Manager",
    16.         "color": "white"
    17.       }
    18.     },
    19.     {
    20.       "type": "rect",
    21.       "background-color": "#89ab57",
    22.       "height": 50,
    23.       "width": 150,
    24.       "x": 180,
    25.       "y": 195,
    26.       "border-radius": "20px",
    27.       "label": {
    28.         "text": "Finance",
    29.         "color": "white"
    30.       }
    31.     },
    32.     {
    33.       "type": "rect",
    34.       "background-color": "#89ab57",
    35.       "height": 50,
    36.       "width": 150,
    37.       "x": 410,
    38.       "y": 195,
    39.       "border-radius": "20px",
    40.       "label": {
    41.         "text": "Human Resources",
    42.         "color": "white"
    43.       }
    44.     },
    45.     {
    46.       "type": "rect",
    47.       "background-color": "#666666",
    48.       "height": 50,
    49.       "width": 140,
    50.       "x": 75,
    51.       "y": 330,
    52.       "border-radius": "20px",
    53.       "label": {
    54.         "text": "Research &<br/>Development",
    55.         "color": "white"
    56.       }
    57.     },
    58.     {
    59.       "type": "rect",
    60.       "background-color": "#666666",
    61.       "height": 50,
    62.       "width": 140,
    63.       "x": 285,
    64.       "y": 330,
    65.       "border-radius": "20px",
    66.       "label": {
    67.         "text": "Operations",
    68.         "color": "white"
    69.       }
    70.     },
    71.     {
    72.       "type": "rect",
    73.       "background-color": "#666666",
    74.       "height": 50,
    75.       "width": 140,
    76.       "x": 490,
    77.       "y": 330,
    78.       "border-radius": "20px",
    79.       "label": {
    80.         "text": "Product Marketing",
    81.         "color": "white"
    82.       }
    83.     },
    84.     {
    85.       "type": "line",
    86.       "line-width": "2",
    87.       "line-color": "#999",
    88.       "points": [
    89.         [300, 100],
    90.         [300, 300]
    91.       ]
    92.     },
    93.     {
    94.       "type": "line",
    95.       "line-width": "2",
    96.       "line-color": "#999",
    97.       "points": [
    98.         [250, 200],
    99.         [340, 200]
    100.       ]
    101.     },
    102.     {
    103.       "type": "line",
    104.       "line-width": "2",
    105.       "line-color": "#999",
    106.       "points": [
    107.         [75, 270],
    108.         [500, 270]
    109.       ]
    110.     },
    111.     {
    112.       "type": "line",
    113.       "line-width": "2",
    114.       "line-color": "#999",
    115.       "points": [
    116.         [75, 270],
    117.         [75, 300]
    118.       ]
    119.     },
    120.     {
    121.       "type": "line",
    122.       "line-width": "2",
    123.       "line-color": "#999",
    124.       "points": [
    125.         [500, 270],
    126.         [500, 300]
    127.       ]
    128.     }
    129.   ]
    130. };
    131.  
    132. zingchart.render({
    133.   id: 'myChart',
    134.   data: myConfig,
    135.   height: "100%",
    136.   width: "100%"
    137. });