• 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.       height: 100%;
    13.       width: 100%;
    14.       margin: 0;
    15.       padding: 0;
    16.     }
    17.  
    18.     #myChart {
    19.       height: 100%;
    20.       width: 100%;
    21.       min-height: 150px;
    22.     }
    23.   </style>
    24. </head>
    25.  
    26. <body>
    27.   <div id="myChart"></div>
    28.   <script>
    29.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    30.     var myConfig = {
    31.       type: 'radar',
    32.       globals: {
    33.         fontSize: 15
    34.       },
    35.       scaleV: { //this goes around the chart
    36.         tooltip: {
    37.           backgroundColor: '#f06292',
    38.           fontColor: 'white',
    39.         },
    40.         guide: {
    41.           lineColor: "black",
    42.           items: [{
    43.               backgroundColor: "red",
    44.               alpha: 0.3
    45.             },
    46.             {
    47.               backgroundColor: "blue",
    48.               alpha: 0.3
    49.             }
    50.           ]
    51.         }
    52.       },
    53.       scaleK: { //this does the sections
    54.         labels: ["Sport", "Book", "Thing 3", "Thing 4", "Thing 5", "Thing 6", "Thing 7", "thing 8"],
    55.         tooltip: {
    56.           backgroundColor: '#f06292',
    57.           fontColor: 'white',
    58.         },
    59.         guide: {
    60.           lineColor: "yellow",
    61.           items: [{
    62.               backgroundColor: "white"
    63.             },
    64.             {
    65.               backgroundColor: "gray"
    66.             }
    67.           ]
    68.         }
    69.       },
    70.       series: [{
    71.         values: [35, 42, 67, 89, 25, 34, 67, 85]
    72.       }]
    73.     };
    74.  
    75.     zingchart.render({
    76.       id: 'myChart',
    77.       data: myConfig,
    78.       height: '100%',
    79.       width: '100%'
    80.     });
    81.   </script>
    82. </body>
    83.  
    84. </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.   height: 100%;
    4.   width: 100%;
    5.   margin: 0;
    6.   padding: 0;
    7. }
    8.  
    9. #myChart {
    10.   height: 100%;
    11.   width: 100%;
    12.   min-height: 150px;
    13. }
    1. var myConfig = {
    2.   type: 'radar',
    3.   globals: {
    4.     fontSize: 15
    5.   },
    6.   scaleV: { //this goes around the chart
    7.     tooltip: {
    8.       backgroundColor: '#f06292',
    9.       fontColor: 'white',
    10.     },
    11.     guide: {
    12.       lineColor: "black",
    13.       items: [{
    14.           backgroundColor: "red",
    15.           alpha: 0.3
    16.         },
    17.         {
    18.           backgroundColor: "blue",
    19.           alpha: 0.3
    20.         }
    21.       ]
    22.     }
    23.   },
    24.   scaleK: { //this does the sections
    25.     labels: ["Sport", "Book", "Thing 3", "Thing 4", "Thing 5", "Thing 6", "Thing 7", "thing 8"],
    26.     tooltip: {
    27.       backgroundColor: '#f06292',
    28.       fontColor: 'white',
    29.     },
    30.     guide: {
    31.       lineColor: "yellow",
    32.       items: [{
    33.           backgroundColor: "white"
    34.         },
    35.         {
    36.           backgroundColor: "gray"
    37.         }
    38.       ]
    39.     }
    40.   },
    41.   series: [{
    42.     values: [35, 42, 67, 89, 25, 34, 67, 85]
    43.   }]
    44. };
    45.  
    46. zingchart.render({
    47.   id: 'myChart',
    48.   data: myConfig,
    49.   height: '100%',
    50.   width: '100%'
    51. });