• 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": "area",
    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.         "margin-bottom": "70"
    55.       },
    56.       "stacked": true,
    57.       "scaleX": {},
    58.       "scaleY": {},
    59.       "legend": {
    60.         "border-width": 0,
    61.         "toggle-action": "remove",
    62.         "margin": "auto auto 10 auto",
    63.         "layout": "float",
    64.         "marker": {
    65.           "visible": false
    66.         },
    67.         "item": {
    68.           "width": 80,
    69.           "offset-x": -10,
    70.           "border-width": 0,
    71.           "border-radius": 9,
    72.           "background-image": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAN5JREFUeNqckEEOAUEQRXuwsiAZJLMhcQPBGYQNR7AxDuAALjD3siNhNbYkNjYSsZGh/WI6amp6ROYnb/NTv7r6O1rrglLqqXIod9CEpeqgaPFdUPoVHoIQ+MLvgx1YJlz82VADV/1RBGax3wUH/dXCZHi4ArZs6AYCsGceLR/bwkQLrLVdFzDi8zJMeCAUwTsYyFlb2w1QFh617KUmxbYeOGacTSX6WWe74MSGz2AOVmKJbwtX2au8nCbYsPA0q7BO3PZE+O34gsTZzntDupzIUiT5D6rJGLbw33oJMABus6yuV/7GiAAAAABJRU5ErkJggg==",
    73.           "background-position": "90% 50%",
    74.           "background-repeat": false,
    75.           "padding": "6 24 6 6"
    76.         },
    77.         "item-off": {
    78.           "background-color": "#bbb"
    79.         }
    80.       },
    81.       "plot": {},
    82.       "series": [{
    83.           "values": [69, 68, 54, 48, 70, 74],
    84.           "text": "Apple",
    85.           "legend-item": {
    86.             "background-color": "#29A2CC"
    87.           }
    88.         },
    89.         {
    90.           "values": [51, 53, 47, 60, 48, 52],
    91.           "text": "Microsoft",
    92.           "legend-item": {
    93.             "background-color": "#D31E1E"
    94.           }
    95.         },
    96.         {
    97.           "values": [42, 43, 30, 40, 31, 48],
    98.           "text": "Oracle",
    99.           "legend-item": {
    100.             "background-color": "#7CA82B"
    101.           }
    102.         },
    103.         {
    104.           "values": [25, 15, 26, 21, 24, 26],
    105.           "text": "Dell",
    106.           "legend-item": {
    107.             "background-color": "#EF8535"
    108.           }
    109.         }
    110.       ]
    111.     };
    112.  
    113.     zingchart.render({
    114.       id: 'myChart',
    115.       data: myConfig,
    116.       height: '500',
    117.       width: '500'
    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.   <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": "area",
    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.     "margin-bottom": "70"
    21.   },
    22.   "stacked": true,
    23.   "scaleX": {},
    24.   "scaleY": {},
    25.   "legend": {
    26.     "border-width": 0,
    27.     "toggle-action": "remove",
    28.     "margin": "auto auto 10 auto",
    29.     "layout": "float",
    30.     "marker": {
    31.       "visible": false
    32.     },
    33.     "item": {
    34.       "width": 80,
    35.       "offset-x": -10,
    36.       "border-width": 0,
    37.       "border-radius": 9,
    38.       "background-image": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAN5JREFUeNqckEEOAUEQRXuwsiAZJLMhcQPBGYQNR7AxDuAALjD3siNhNbYkNjYSsZGh/WI6amp6ROYnb/NTv7r6O1rrglLqqXIod9CEpeqgaPFdUPoVHoIQ+MLvgx1YJlz82VADV/1RBGax3wUH/dXCZHi4ArZs6AYCsGceLR/bwkQLrLVdFzDi8zJMeCAUwTsYyFlb2w1QFh617KUmxbYeOGacTSX6WWe74MSGz2AOVmKJbwtX2au8nCbYsPA0q7BO3PZE+O34gsTZzntDupzIUiT5D6rJGLbw33oJMABus6yuV/7GiAAAAABJRU5ErkJggg==",
    39.       "background-position": "90% 50%",
    40.       "background-repeat": false,
    41.       "padding": "6 24 6 6"
    42.     },
    43.     "item-off": {
    44.       "background-color": "#bbb"
    45.     }
    46.   },
    47.   "plot": {},
    48.   "series": [{
    49.       "values": [69, 68, 54, 48, 70, 74],
    50.       "text": "Apple",
    51.       "legend-item": {
    52.         "background-color": "#29A2CC"
    53.       }
    54.     },
    55.     {
    56.       "values": [51, 53, 47, 60, 48, 52],
    57.       "text": "Microsoft",
    58.       "legend-item": {
    59.         "background-color": "#D31E1E"
    60.       }
    61.     },
    62.     {
    63.       "values": [42, 43, 30, 40, 31, 48],
    64.       "text": "Oracle",
    65.       "legend-item": {
    66.         "background-color": "#7CA82B"
    67.       }
    68.     },
    69.     {
    70.       "values": [25, 15, 26, 21, 24, 26],
    71.       "text": "Dell",
    72.       "legend-item": {
    73.         "background-color": "#EF8535"
    74.       }
    75.     }
    76.   ]
    77. };
    78.  
    79. zingchart.render({
    80.   id: 'myChart',
    81.   data: myConfig,
    82.   height: '500',
    83.   width: '500'
    84. });