• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.  
    9.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    10.   <style></style>
    11. </head>
    12.  
    13. <body>
    14.   <div id='myChart'></div>
    15.   <script>
    16.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    17.     zingchart.THEME = "classic";
    18.  
    19.     var myConfig = {
    20.       "globals": {
    21.         "font-family": "PT Sans",
    22.         "shadow": false
    23.       },
    24.       "type": "radar",
    25.       "background-color": "#FFF",
    26.       "plot": {
    27.         "aspect": "rose",
    28.         "animation": {
    29.           "effect": "ANIMATION_EXPAND_TOP",
    30.           "sequence": "ANIMATION_BY_PLOT_AND_NODE",
    31.           "speed": 10
    32.         }
    33.       },
    34.       "title": {
    35.         "text": "Total Albums Released",
    36.         "background-color": "#333",
    37.       },
    38.       "subtitle": {
    39.         "text": "Hover a node to see the band and click for url"
    40.       },
    41.       "scale-k": {
    42.         "aspect": "circle",
    43.         "visible": false
    44.       },
    45.       "scale-v": {
    46.         "values": "0:25:5",
    47.         "guide": {
    48.           "line-width": 1,
    49.           "line-style": "solid",
    50.           "line-color": "#333"
    51.         },
    52.         "item": {
    53.           "color": "#333"
    54.         },
    55.         "line-color": "#FFF"
    56.       },
    57.       "tooltip": {
    58.         "text": "%v studio albums made by %data-band",
    59.         "background-color": "#CFF",
    60.         "color": "#333",
    61.         "font-size": "14px"
    62.       },
    63.       "series": [{
    64.         "values": [15, 21, 16, 14, 18, 21, 9],
    65.         "data-band": ["Genesis", "Rush", "Pink Floyd", "King Crimson", "The Moody Blues", "Yes", "Emerson, Lake and Palmer"],
    66.         "url": "http://www.google.com/#q=%data-band",
    67.         "target": "_blank",
    68.         "background-color": "#0CF"
    69.       }]
    70.     };
    71.  
    72.     zingchart.render({
    73.       id: 'myChart',
    74.       data: myConfig,
    75.       height: 400,
    76.       width: '100%'
    77.     });
    78.   </script>
    79. </body>
    80.  
    81. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.  
    9.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    10. </head>
    11.  
    12. <body>
    13.   <div id='myChart'></div>
    14. </body>
    15.  
    16. </html>
    1.  
    1. zingchart.THEME = "classic";
    2.  
    3. var myConfig = {
    4.   "globals": {
    5.     "font-family": "PT Sans",
    6.     "shadow": false
    7.   },
    8.   "type": "radar",
    9.   "background-color": "#FFF",
    10.   "plot": {
    11.     "aspect": "rose",
    12.     "animation": {
    13.       "effect": "ANIMATION_EXPAND_TOP",
    14.       "sequence": "ANIMATION_BY_PLOT_AND_NODE",
    15.       "speed": 10
    16.     }
    17.   },
    18.   "title": {
    19.     "text": "Total Albums Released",
    20.     "background-color": "#333",
    21.   },
    22.   "subtitle": {
    23.     "text": "Hover a node to see the band and click for url"
    24.   },
    25.   "scale-k": {
    26.     "aspect": "circle",
    27.     "visible": false
    28.   },
    29.   "scale-v": {
    30.     "values": "0:25:5",
    31.     "guide": {
    32.       "line-width": 1,
    33.       "line-style": "solid",
    34.       "line-color": "#333"
    35.     },
    36.     "item": {
    37.       "color": "#333"
    38.     },
    39.     "line-color": "#FFF"
    40.   },
    41.   "tooltip": {
    42.     "text": "%v studio albums made by %data-band",
    43.     "background-color": "#CFF",
    44.     "color": "#333",
    45.     "font-size": "14px"
    46.   },
    47.   "series": [{
    48.     "values": [15, 21, 16, 14, 18, 21, 9],
    49.     "data-band": ["Genesis", "Rush", "Pink Floyd", "King Crimson", "The Moody Blues", "Yes", "Emerson, Lake and Palmer"],
    50.     "url": "http://www.google.com/#q=%data-band",
    51.     "target": "_blank",
    52.     "background-color": "#0CF"
    53.   }]
    54. };
    55.  
    56. zingchart.render({
    57.   id: 'myChart',
    58.   data: myConfig,
    59.   height: 400,
    60.   width: '100%'
    61. });