• 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.  
    24.     .zc-ref {
    25.       display: none;
    26.     }
    27.   </style>
    28. </head>
    29.  
    30. <body>
    31.   <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    32.   <div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
    33.   <script>
    34.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    35.     var myConfig = {
    36.       "globals": {
    37.         "font-family": "Open Sans"
    38.       },
    39.       "type": "radar",
    40.       "title": {
    41.         "text": "Sales Per Company ($B)"
    42.       },
    43.       "tooltip": {
    44.         "font-size": 11,
    45.         "border-width": 0,
    46.         "padding": "6 10",
    47.         "background-color": "#444 #111",
    48.         "fill-angle": 270,
    49.         "color": "#fff",
    50.         "border-radius": 6,
    51.         "alpha": 0.85
    52.       },
    53.       "plotarea": {},
    54.       "legend": {
    55.         "margin": "40 10 auto auto",
    56.         "border-width": 0,
    57.         "marker": {
    58.           "type": "default",
    59.           "offset-x": -5,
    60.           "width": 30,
    61.           "height": 18,
    62.           "border-width": 0,
    63.           "border-radius": 5,
    64.           "background-color": "#bbb #eee",
    65.           "fill-angle": 270,
    66.           "shadow": true,
    67.           "shadow-distance": 1,
    68.           "shadow-alpha": 0.25,
    69.           "background-image": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAahJREFUeNpi/P//PwMlgImBQjDwBrCAiNnzFjO8efeWQU1VlcFQX4fh16/fGApZWVkZvn//zj97/uJlf//+uaCrpdWRnhL/mYUYW0Caf/z4wTNz7oJVl65cc2NjZfViYmL+BJTqhBsAFGAASjAwMjKiaWYBaeadPmf+mitXrruxMDMz6OvqLHSws1kMDwMmoODbd+9iLly+3P7v339mJiYmBlD0Qmz+CdF89bobMzMT0It6891dnZP5+fiewcPgytVreddv3uoHKmZi/M/IExkenAvS/O3rN94ZcxeANYMMNTQAanZxSv3379/f339+I2LByEj/hLSU5EmQoj0HDuasXLO+//OXL7wz5y1cdfnqNbBmI7Bm5xSgC/8CDYB7kRHk1KMnTjO8f/9BeN2mLRsePHxkw8rC8pefn//t+/fvxUCKITY7g22GaWZnZ2NwsreBuODnz59AAfa3QX4+gYryckf+/PnD/PHjR4hmfUzNWBMSUBPI1DcBfj4BCkBDQIaCbXbFrRkeiAhD/jJwAF3i5eEWc/HSlUArc9M5+DTDw2BA8wJAgAEA6E7ZgwiQeboAAAAASUVORK5CYII=",
    70.           "background-position": "80% 50%",
    71.           "background-repeat": false,
    72.           "top-state": {
    73.             "type": "default",
    74.             "background-image": "none",
    75.             "width": "-22",
    76.             "height": 18,
    77.             "border-width": 0,
    78.             "border-radius": "5 0 0 5"
    79.           }
    80.         },
    81.         "marker-off": {
    82.           "background-image": "none"
    83.         }
    84.       },
    85.       "plot": {
    86.         "marker": {
    87.           "visible": true
    88.         }
    89.       },
    90.       "scale-k": {
    91.         "values": ["2011", "2012", "2013", "2014", "2015", "2016"],
    92.         "item": {
    93.           "font-weight": 600
    94.         }
    95.       },
    96.       "series": [{
    97.           "values": [69, 68, 54, 48, 70, 74],
    98.           "text": "Apple",
    99.           "legend-marker": {
    100.             "top-state": {
    101.               "background-color": "#29A2CC"
    102.             }
    103.           }
    104.         },
    105.         {
    106.           "values": [51, 53, 47, 60, 48, 52],
    107.           "text": "Microsoft",
    108.           "legend-marker": {
    109.             "top-state": {
    110.               "background-color": "#D31E1E"
    111.             }
    112.           }
    113.         },
    114.         {
    115.           "values": [42, 43, 30, 40, 31, 48],
    116.           "text": "Oracle",
    117.           "legend-marker": {
    118.             "top-state": {
    119.               "background-color": "#7CA82B"
    120.             }
    121.           }
    122.         },
    123.         {
    124.           "values": [25, 15, 26, 21, 24, 26],
    125.           "text": "Dell",
    126.           "legend-marker": {
    127.             "top-state": {
    128.               "background-color": "#EF8535"
    129.             }
    130.           }
    131.         }
    132.       ]
    133.     };
    134.  
    135.     zingchart.render({
    136.       id: 'myChart',
    137.       data: myConfig,
    138.       height: 500,
    139.       width: 500
    140.     });
    141.   </script>
    142. </body>
    143.  
    144. </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.   <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    13.   <div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
    14. </body>
    15.  
    16. </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. }
    14.  
    15. .zc-ref {
    16.   display: none;
    17. }
    1. var myConfig = {
    2.   "globals": {
    3.     "font-family": "Open Sans"
    4.   },
    5.   "type": "radar",
    6.   "title": {
    7.     "text": "Sales Per Company ($B)"
    8.   },
    9.   "tooltip": {
    10.     "font-size": 11,
    11.     "border-width": 0,
    12.     "padding": "6 10",
    13.     "background-color": "#444 #111",
    14.     "fill-angle": 270,
    15.     "color": "#fff",
    16.     "border-radius": 6,
    17.     "alpha": 0.85
    18.   },
    19.   "plotarea": {},
    20.   "legend": {
    21.     "margin": "40 10 auto auto",
    22.     "border-width": 0,
    23.     "marker": {
    24.       "type": "default",
    25.       "offset-x": -5,
    26.       "width": 30,
    27.       "height": 18,
    28.       "border-width": 0,
    29.       "border-radius": 5,
    30.       "background-color": "#bbb #eee",
    31.       "fill-angle": 270,
    32.       "shadow": true,
    33.       "shadow-distance": 1,
    34.       "shadow-alpha": 0.25,
    35.       "background-image": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAahJREFUeNpi/P//PwMlgImBQjDwBrCAiNnzFjO8efeWQU1VlcFQX4fh16/fGApZWVkZvn//zj97/uJlf//+uaCrpdWRnhL/mYUYW0Caf/z4wTNz7oJVl65cc2NjZfViYmL+BJTqhBsAFGAASjAwMjKiaWYBaeadPmf+mitXrruxMDMz6OvqLHSws1kMDwMmoODbd+9iLly+3P7v339mJiYmBlD0Qmz+CdF89bobMzMT0It6891dnZP5+fiewcPgytVreddv3uoHKmZi/M/IExkenAvS/O3rN94ZcxeANYMMNTQAanZxSv3379/f339+I2LByEj/hLSU5EmQoj0HDuasXLO+//OXL7wz5y1cdfnqNbBmI7Bm5xSgC/8CDYB7kRHk1KMnTjO8f/9BeN2mLRsePHxkw8rC8pefn//t+/fvxUCKITY7g22GaWZnZ2NwsreBuODnz59AAfa3QX4+gYryckf+/PnD/PHjR4hmfUzNWBMSUBPI1DcBfj4BCkBDQIaCbXbFrRkeiAhD/jJwAF3i5eEWc/HSlUArc9M5+DTDw2BA8wJAgAEA6E7ZgwiQeboAAAAASUVORK5CYII=",
    36.       "background-position": "80% 50%",
    37.       "background-repeat": false,
    38.       "top-state": {
    39.         "type": "default",
    40.         "background-image": "none",
    41.         "width": "-22",
    42.         "height": 18,
    43.         "border-width": 0,
    44.         "border-radius": "5 0 0 5"
    45.       }
    46.     },
    47.     "marker-off": {
    48.       "background-image": "none"
    49.     }
    50.   },
    51.   "plot": {
    52.     "marker": {
    53.       "visible": true
    54.     }
    55.   },
    56.   "scale-k": {
    57.     "values": ["2011", "2012", "2013", "2014", "2015", "2016"],
    58.     "item": {
    59.       "font-weight": 600
    60.     }
    61.   },
    62.   "series": [{
    63.       "values": [69, 68, 54, 48, 70, 74],
    64.       "text": "Apple",
    65.       "legend-marker": {
    66.         "top-state": {
    67.           "background-color": "#29A2CC"
    68.         }
    69.       }
    70.     },
    71.     {
    72.       "values": [51, 53, 47, 60, 48, 52],
    73.       "text": "Microsoft",
    74.       "legend-marker": {
    75.         "top-state": {
    76.           "background-color": "#D31E1E"
    77.         }
    78.       }
    79.     },
    80.     {
    81.       "values": [42, 43, 30, 40, 31, 48],
    82.       "text": "Oracle",
    83.       "legend-marker": {
    84.         "top-state": {
    85.           "background-color": "#7CA82B"
    86.         }
    87.       }
    88.     },
    89.     {
    90.       "values": [25, 15, 26, 21, 24, 26],
    91.       "text": "Dell",
    92.       "legend-marker": {
    93.         "top-state": {
    94.           "background-color": "#EF8535"
    95.         }
    96.       }
    97.     }
    98.   ]
    99. };
    100.  
    101. zingchart.render({
    102.   id: 'myChart',
    103.   data: myConfig,
    104.   height: 500,
    105.   width: 500
    106. });