• 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.  
    17.     .fillRed {
    18.       fill: red;
    19.     }
    20.  
    21.     .strokeRed {
    22.       stroke: red;
    23.     }
    24.  
    25.     .fillGreen {
    26.       fill: green;
    27.     }
    28.  
    29.     .strokeGreen {
    30.       stroke: green;
    31.     }
    32.  
    33.     .fillBlue {
    34.       fill: blue;
    35.     }
    36.  
    37.     .strokeBlue {
    38.       stroke: blue;
    39.     }
    40.  
    41.     .fillOrange {
    42.       fill: orange;
    43.     }
    44.  
    45.     .strokeOrange {
    46.       stroke: orange;
    47.     }
    48.   </style>
    49. </head>
    50.  
    51. <body>
    52.   <div id='myChart'></div>
    53.   <script>
    54.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    55.     var myConfig = {
    56.       type: 'grid',
    57.       plotarea: {
    58.         margin: '35 20 20 20'
    59.       },
    60.       options: {
    61.         headerRow: true,
    62.         dataClass: ['fillRed', 'fillGreen', 'fillBlue', 'fillOrange']
    63.       },
    64.       series: [{
    65.           values: ['Jon', 'Anderson', 'January 9, 1957', 'United Kingdom'],
    66.           dataClass: ['strokeRed', 'strokeGreen', 'strokeBlue', 'strokeOrange']
    67.         },
    68.         {
    69.           values: ['Steve', 'Hogarth', 'January 25, 1950', 'United Kingdom']
    70.         },
    71.         {
    72.           values: ['Jim', 'Carrey', 'June 12, 1972', 'United States']
    73.         },
    74.         {
    75.           values: ['Paul', 'Hogan', 'October 22, 1956', 'Australia']
    76.         },
    77.         {
    78.           values: ['Brenden', 'Morrow', 'January 16, 1979', 'Canada']
    79.         },
    80.         {
    81.           values: ['Kate', 'Moss', 'January 16, 1974', 'United Kingdom']
    82.         },
    83.         {
    84.           values: ['David', 'Chokachi', 'January 16, 1968', 'United States']
    85.         },
    86.         {
    87.           values: ['Josie', 'Davis', 'January 16, 1973', 'United Kingdom']
    88.         },
    89.         {
    90.           values: ['Alex', 'Morgan', 'July 2, 1989', 'United States']
    91.         },
    92.         {
    93.           values: ['Tom', 'Cruise', 'July 3, 1962', 'United States']
    94.         },
    95.         {
    96.           values: ['Tony', 'Bennett', 'August 3, 1926', 'United States']
    97.         },
    98.         {
    99.           values: ['Martha', 'Stewart', 'August 3, 1941', 'United States']
    100.         },
    101.         {
    102.           values: ['Tom', 'Brady', 'August 3, 1977', 'United States']
    103.         },
    104.         {
    105.           values: ['Julie', 'Bowen', 'March 3, 1970', 'United States']
    106.         },
    107.         {
    108.           values: ['Barack', 'Obama', 'August 4, 1961', 'United States']
    109.         }
    110.       ]
    111.     };
    112.  
    113.     zingchart.render({
    114.       id: 'myChart',
    115.       data: myConfig,
    116.       height: '100%',
    117.       width: '100%'
    118.     });
    119.   </script>
    120. </body>
    121.  
    122. </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. }
    7.  
    8. .fillRed {
    9.   fill: red;
    10. }
    11.  
    12. .strokeRed {
    13.   stroke: red;
    14. }
    15.  
    16. .fillGreen {
    17.   fill: green;
    18. }
    19.  
    20. .strokeGreen {
    21.   stroke: green;
    22. }
    23.  
    24. .fillBlue {
    25.   fill: blue;
    26. }
    27.  
    28. .strokeBlue {
    29.   stroke: blue;
    30. }
    31.  
    32. .fillOrange {
    33.   fill: orange;
    34. }
    35.  
    36. .strokeOrange {
    37.   stroke: orange;
    38. }
    1. var myConfig = {
    2.   type: 'grid',
    3.   plotarea: {
    4.     margin: '35 20 20 20'
    5.   },
    6.   options: {
    7.     headerRow: true,
    8.     dataClass: ['fillRed', 'fillGreen', 'fillBlue', 'fillOrange']
    9.   },
    10.   series: [{
    11.       values: ['Jon', 'Anderson', 'January 9, 1957', 'United Kingdom'],
    12.       dataClass: ['strokeRed', 'strokeGreen', 'strokeBlue', 'strokeOrange']
    13.     },
    14.     {
    15.       values: ['Steve', 'Hogarth', 'January 25, 1950', 'United Kingdom']
    16.     },
    17.     {
    18.       values: ['Jim', 'Carrey', 'June 12, 1972', 'United States']
    19.     },
    20.     {
    21.       values: ['Paul', 'Hogan', 'October 22, 1956', 'Australia']
    22.     },
    23.     {
    24.       values: ['Brenden', 'Morrow', 'January 16, 1979', 'Canada']
    25.     },
    26.     {
    27.       values: ['Kate', 'Moss', 'January 16, 1974', 'United Kingdom']
    28.     },
    29.     {
    30.       values: ['David', 'Chokachi', 'January 16, 1968', 'United States']
    31.     },
    32.     {
    33.       values: ['Josie', 'Davis', 'January 16, 1973', 'United Kingdom']
    34.     },
    35.     {
    36.       values: ['Alex', 'Morgan', 'July 2, 1989', 'United States']
    37.     },
    38.     {
    39.       values: ['Tom', 'Cruise', 'July 3, 1962', 'United States']
    40.     },
    41.     {
    42.       values: ['Tony', 'Bennett', 'August 3, 1926', 'United States']
    43.     },
    44.     {
    45.       values: ['Martha', 'Stewart', 'August 3, 1941', 'United States']
    46.     },
    47.     {
    48.       values: ['Tom', 'Brady', 'August 3, 1977', 'United States']
    49.     },
    50.     {
    51.       values: ['Julie', 'Bowen', 'March 3, 1970', 'United States']
    52.     },
    53.     {
    54.       values: ['Barack', 'Obama', 'August 4, 1961', 'United States']
    55.     }
    56.   ]
    57. };
    58.  
    59. zingchart.render({
    60.   id: 'myChart',
    61.   data: myConfig,
    62.   height: '100%',
    63.   width: '100%'
    64. });