• 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-top": "100"
    55.       },
    56.       "stacked": true,
    57.       "scaleX": {},
    58.       "scaleY": {},
    59.       "legend": {
    60.         "toggle-action": "remove",
    61.         "margin": "50 auto auto auto",
    62.         "layout": "float",
    63.         "border-width": 0,
    64.         "marker": {
    65.           "type": "default",
    66.           "width": 16,
    67.           "height": 16,
    68.           "border-width": 0,
    69.           "border-radius": 2,
    70.           "background-image": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAItJREFUeNpi/P//PwM5gImBTEAXjSpAnArngfxIBBYE4vP/ISAOJEaMjQJAvAeIDYD4IxDfR7aRCYirgNgQi01noTa9B2JTmBxMQSFU8jUQ6xDShKxRCYivQhW9AmIPID6JSxOyRhAWB+Ir/1EBVk3oGmGarxLShE0jCEsA8RYgtsAXRYx0T6sAAQYA/tZI643AdiwAAAAASUVORK5CYII=",
    71.           "background-position": "50% 50%",
    72.           "background-repeat": false
    73.         },
    74.         "marker-off": {
    75.           "background-image": "none",
    76.           "background-color": "#bbb"
    77.         }
    78.       },
    79.       "plot": {},
    80.       "series": [{
    81.           "values": [69, 68, 54, 48, 70, 74],
    82.           "text": "Apple"
    83.         },
    84.         {
    85.           "values": [51, 53, 47, 60, 48, 52],
    86.           "text": "Microsoft"
    87.         },
    88.         {
    89.           "values": [42, 43, 30, 40, 31, 48],
    90.           "text": "Oracle"
    91.         },
    92.         {
    93.           "values": [25, 15, 26, 21, 24, 26],
    94.           "text": "Dell"
    95.         }
    96.       ]
    97.     };
    98.  
    99.     zingchart.render({
    100.       id: 'myChart',
    101.       data: myConfig,
    102.       height: '500',
    103.       width: '500'
    104.     });
    105.   </script>
    106. </body>
    107.  
    108. </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-top": "100"
    21.   },
    22.   "stacked": true,
    23.   "scaleX": {},
    24.   "scaleY": {},
    25.   "legend": {
    26.     "toggle-action": "remove",
    27.     "margin": "50 auto auto auto",
    28.     "layout": "float",
    29.     "border-width": 0,
    30.     "marker": {
    31.       "type": "default",
    32.       "width": 16,
    33.       "height": 16,
    34.       "border-width": 0,
    35.       "border-radius": 2,
    36.       "background-image": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAItJREFUeNpi/P//PwM5gImBTEAXjSpAnArngfxIBBYE4vP/ISAOJEaMjQJAvAeIDYD4IxDfR7aRCYirgNgQi01noTa9B2JTmBxMQSFU8jUQ6xDShKxRCYivQhW9AmIPID6JSxOyRhAWB+Ir/1EBVk3oGmGarxLShE0jCEsA8RYgtsAXRYx0T6sAAQYA/tZI643AdiwAAAAASUVORK5CYII=",
    37.       "background-position": "50% 50%",
    38.       "background-repeat": false
    39.     },
    40.     "marker-off": {
    41.       "background-image": "none",
    42.       "background-color": "#bbb"
    43.     }
    44.   },
    45.   "plot": {},
    46.   "series": [{
    47.       "values": [69, 68, 54, 48, 70, 74],
    48.       "text": "Apple"
    49.     },
    50.     {
    51.       "values": [51, 53, 47, 60, 48, 52],
    52.       "text": "Microsoft"
    53.     },
    54.     {
    55.       "values": [42, 43, 30, 40, 31, 48],
    56.       "text": "Oracle"
    57.     },
    58.     {
    59.       "values": [25, 15, 26, 21, 24, 26],
    60.       "text": "Dell"
    61.     }
    62.   ]
    63. };
    64.  
    65. zingchart.render({
    66.   id: 'myChart',
    67.   data: myConfig,
    68.   height: '500',
    69.   width: '500'
    70. });