• 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.       height: 100%;
    14.       width: 100%;
    15.     }
    16.   </style>
    17. </head>
    18.  
    19. <body>
    20.   <div id='myChart'></div>
    21.   <script>
    22.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    23.     var myConfig = {
    24.       "type": "line",
    25.       "title": {
    26.         "text": "Downloads",
    27.         "background-color": "#666666"
    28.       },
    29.       "scale-x": {
    30.         "values": "0:100:20"
    31.       },
    32.       "scale-y": {
    33.         "values": "0:3:1",
    34.         "labels": ["&nbsp;", "First<br/>time", "Repeat", "&nbsp;"]
    35.       },
    36.       "series": [{
    37.         "values": []
    38.       }],
    39.       "shapes": [{
    40.           "type": "pie",
    41.           "background-color": "#5297b6",
    42.           "size": 24,
    43.           "x": 150,
    44.           "y": 150,
    45.           "alpha": "0.9",
    46.           "angle-start": 90,
    47.           "angle-end": 89
    48.         },
    49.         {
    50.           "type": "pie",
    51.           "background-color": "#5297b6",
    52.           "size": 24,
    53.           "x": 250,
    54.           "y": 150,
    55.           "alpha": "0.9",
    56.           "angle-start": 90,
    57.           "angle-end": 89
    58.         },
    59.         {
    60.           "type": "pie",
    61.           "background-color": "#5297b6",
    62.           "size": 24,
    63.           "x": 350,
    64.           "y": 150,
    65.           "alpha": "0.9",
    66.           "angle-start": 90,
    67.           "angle-end": 0
    68.         },
    69.         {
    70.           "type": "diamond",
    71.           "background-color": "#89ab57",
    72.           "size": 24,
    73.           "x": 150,
    74.           "y": 242,
    75.           "alpha": "0.9"
    76.         },
    77.         {
    78.           "type": "diamond",
    79.           "background-color": "#89ab57",
    80.           "size": 24,
    81.           "x": 250,
    82.           "y": 242,
    83.           "alpha": "0.9"
    84.         },
    85.         {
    86.           "type": "diamond",
    87.           "background-color": "#89ab57",
    88.           "size": 24,
    89.           "x": 350,
    90.           "y": 242,
    91.           "alpha": "0.9"
    92.         },
    93.         {
    94.           "type": "poly",
    95.           "background-color": "#89ab57",
    96.           "alpha": "0.9",
    97.           "points": [
    98.             [420, 242],
    99.             [450, 212],
    100.             [480, 242],
    101.             [450, 242],
    102.             [450, 272]
    103.           ]
    104.         }
    105.       ]
    106.     };
    107.  
    108.     zingchart.render({
    109.       id: 'myChart',
    110.       data: myConfig,
    111.       height: "100%",
    112.       width: "100%"
    113.     });
    114.   </script>
    115. </body>
    116.  
    117. </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.   height: 100%;
    5.   width: 100%;
    6. }
    1. var myConfig = {
    2.   "type": "line",
    3.   "title": {
    4.     "text": "Downloads",
    5.     "background-color": "#666666"
    6.   },
    7.   "scale-x": {
    8.     "values": "0:100:20"
    9.   },
    10.   "scale-y": {
    11.     "values": "0:3:1",
    12.     "labels": ["&nbsp;", "First<br/>time", "Repeat", "&nbsp;"]
    13.   },
    14.   "series": [{
    15.     "values": []
    16.   }],
    17.   "shapes": [{
    18.       "type": "pie",
    19.       "background-color": "#5297b6",
    20.       "size": 24,
    21.       "x": 150,
    22.       "y": 150,
    23.       "alpha": "0.9",
    24.       "angle-start": 90,
    25.       "angle-end": 89
    26.     },
    27.     {
    28.       "type": "pie",
    29.       "background-color": "#5297b6",
    30.       "size": 24,
    31.       "x": 250,
    32.       "y": 150,
    33.       "alpha": "0.9",
    34.       "angle-start": 90,
    35.       "angle-end": 89
    36.     },
    37.     {
    38.       "type": "pie",
    39.       "background-color": "#5297b6",
    40.       "size": 24,
    41.       "x": 350,
    42.       "y": 150,
    43.       "alpha": "0.9",
    44.       "angle-start": 90,
    45.       "angle-end": 0
    46.     },
    47.     {
    48.       "type": "diamond",
    49.       "background-color": "#89ab57",
    50.       "size": 24,
    51.       "x": 150,
    52.       "y": 242,
    53.       "alpha": "0.9"
    54.     },
    55.     {
    56.       "type": "diamond",
    57.       "background-color": "#89ab57",
    58.       "size": 24,
    59.       "x": 250,
    60.       "y": 242,
    61.       "alpha": "0.9"
    62.     },
    63.     {
    64.       "type": "diamond",
    65.       "background-color": "#89ab57",
    66.       "size": 24,
    67.       "x": 350,
    68.       "y": 242,
    69.       "alpha": "0.9"
    70.     },
    71.     {
    72.       "type": "poly",
    73.       "background-color": "#89ab57",
    74.       "alpha": "0.9",
    75.       "points": [
    76.         [420, 242],
    77.         [450, 212],
    78.         [480, 242],
    79.         [450, 242],
    80.         [450, 272]
    81.       ]
    82.     }
    83.   ]
    84. };
    85.  
    86. zingchart.render({
    87.   id: 'myChart',
    88.   data: myConfig,
    89.   height: "100%",
    90.   width: "100%"
    91. });