• 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.       width: 100%;
    14.       height: 100%;
    15.     }
    16.   </style>
    17. </head>
    18.  
    19. <body>
    20.   <div id='myChart'></div>
    21.   <script>
    22.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    23.     let chartConfig = {
    24.       type: 'grid',
    25.       plotarea: {
    26.         margin: '35 20 20 20'
    27.       },
    28.       options: {
    29.         headerCol: true,
    30.         headerRow: false
    31.       },
    32.       series: [{
    33.           values: ['Jon', 'Anderson', 'January 9, 1957', 'United Kingdom']
    34.         },
    35.         {
    36.           values: ['Steve', 'Hogarth', 'January 25, 1950', 'United Kingdom']
    37.         },
    38.         {
    39.           values: ['Jim', 'Carrey', 'June 12, 1972', 'United States']
    40.         },
    41.         {
    42.           values: ['Paul', 'Hogan', 'October 22, 1956', 'Australia']
    43.         },
    44.         {
    45.           values: ['Brenden', 'Morrow', 'January 16, 1979', 'Canada']
    46.         },
    47.         {
    48.           values: ['Kate', 'Moss', 'January 16, 1974', 'United Kingdom']
    49.         },
    50.         {
    51.           values: ['David', 'Chokachi', 'January 16, 1968', 'United States']
    52.         },
    53.         {
    54.           values: ['Josie', 'Davis', 'January 16, 1973', 'United Kingdom']
    55.         },
    56.         {
    57.           values: ['Alex', 'Morgan', 'July 2, 1989', 'United States']
    58.         },
    59.         {
    60.           values: ['Tom', 'Cruise', 'July 3, 1962', 'United States']
    61.         },
    62.         {
    63.           values: ['Tony', 'Bennett', 'August 3, 1926', 'United States']
    64.         },
    65.         {
    66.           values: ['Martha', 'Stewart', 'August 3, 1941', 'United States']
    67.         },
    68.         {
    69.           values: ['Tom', 'Brady', 'August 3, 1977', 'United States']
    70.         },
    71.         {
    72.           values: ['Julie', 'Bowen', 'March 3, 1970', 'United States']
    73.         },
    74.         {
    75.           values: ['Barack', 'Obama', 'August 4, 1961', 'United States']
    76.         }
    77.       ]
    78.     };
    79.  
    80.     zingchart.render({
    81.       id: 'myChart',
    82.       data: chartConfig,
    83.       height: '100%',
    84.       width: '100%'
    85.     });
    86.   </script>
    87. </body>
    88.  
    89. </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.   width: 100%;
    5.   height: 100%;
    6. }
    1. let chartConfig = {
    2.   type: 'grid',
    3.   plotarea: {
    4.     margin: '35 20 20 20'
    5.   },
    6.   options: {
    7.     headerCol: true,
    8.     headerRow: false
    9.   },
    10.   series: [{
    11.       values: ['Jon', 'Anderson', 'January 9, 1957', 'United Kingdom']
    12.     },
    13.     {
    14.       values: ['Steve', 'Hogarth', 'January 25, 1950', 'United Kingdom']
    15.     },
    16.     {
    17.       values: ['Jim', 'Carrey', 'June 12, 1972', 'United States']
    18.     },
    19.     {
    20.       values: ['Paul', 'Hogan', 'October 22, 1956', 'Australia']
    21.     },
    22.     {
    23.       values: ['Brenden', 'Morrow', 'January 16, 1979', 'Canada']
    24.     },
    25.     {
    26.       values: ['Kate', 'Moss', 'January 16, 1974', 'United Kingdom']
    27.     },
    28.     {
    29.       values: ['David', 'Chokachi', 'January 16, 1968', 'United States']
    30.     },
    31.     {
    32.       values: ['Josie', 'Davis', 'January 16, 1973', 'United Kingdom']
    33.     },
    34.     {
    35.       values: ['Alex', 'Morgan', 'July 2, 1989', 'United States']
    36.     },
    37.     {
    38.       values: ['Tom', 'Cruise', 'July 3, 1962', 'United States']
    39.     },
    40.     {
    41.       values: ['Tony', 'Bennett', 'August 3, 1926', 'United States']
    42.     },
    43.     {
    44.       values: ['Martha', 'Stewart', 'August 3, 1941', 'United States']
    45.     },
    46.     {
    47.       values: ['Tom', 'Brady', 'August 3, 1977', 'United States']
    48.     },
    49.     {
    50.       values: ['Julie', 'Bowen', 'March 3, 1970', 'United States']
    51.     },
    52.     {
    53.       values: ['Barack', 'Obama', 'August 4, 1961', 'United States']
    54.     }
    55.   ]
    56. };
    57.  
    58. zingchart.render({
    59.   id: 'myChart',
    60.   data: chartConfig,
    61.   height: '100%',
    62.   width: '100%'
    63. });