• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script nonce="undefined" src="https://cdn.zingchart.com/hotfix/2.6.2-hf1/zingchart.min.js"></script>
    8.  
    9.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    10.   <style>
    11.     html,
    12.     body {
    13.       height: 100%;
    14.       width: 100%;
    15.       margin: 0;
    16.       padding: 0;
    17.     }
    18.  
    19.     #myChart {
    20.       height: 100%;
    21.       width: 100%;
    22.       min-height: 150px;
    23.     }
    24.  
    25.     .zc-ref {
    26.       display: none;
    27.     }
    28.   </style>
    29. </head>
    30.  
    31. <body>
    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.       "type": "line",
    37.       "globals": {
    38.         "font-family": "Lucida Sans Unicode"
    39.       },
    40.       "plotarea": {
    41.         "margin": "dynamic"
    42.       },
    43.       "scaleX": {},
    44.       "scaleY": {
    45.         "guide": {
    46.           "line-width": 0,
    47.           "line-style": "solid"
    48.         },
    49.         "ref-line": {
    50.           "line-width": 2,
    51.           "line-color": "#f00"
    52.         },
    53.         "sync-zero": true
    54.       },
    55.       "scaleY2": {
    56.         "guide": {
    57.           "line-width": 0,
    58.           "line-style": "solid"
    59.         },
    60.         "ref-line": {
    61.           "line-width": 1,
    62.           "line-color": "#0f0"
    63.         },
    64.         "ref-zero": true
    65.       },
    66.       "scaleY3": {
    67.         "guide": {
    68.           "line-width": 0,
    69.           "line-style": "solid"
    70.         },
    71.         "ref-line": {
    72.           "line-width": 1,
    73.           "line-color": "#00f"
    74.         },
    75.         "sync-zero": true
    76.       },
    77.       "plot": {},
    78.       "legend": {
    79.         "margin": "auto 10 auto auto",
    80.         "toggle-action": "remove",
    81.         "adjust-layout": true
    82.       },
    83.       "series": [{
    84.           "values": [69, 68, -54, 48, 70, -74, 98, 70, -72, 68, 49, 69],
    85.           "text": "Apple 1",
    86.           "scales": "scale-x,scale-y"
    87.         },
    88.         {
    89.           "values": [39, 28, -24, 28, 40, -24, 18, 30, -32, 28, 19, 29],
    90.           "text": "Apple 2",
    91.           "scales": "scale-x,scale-y"
    92.         },
    93.         {
    94.           "values": [151, -53, 147, 160, 148, 152, 175, -52, -55, 147, 160, 148],
    95.           "text": "Microsoft",
    96.           "scales": "scale-x,scale-y-2"
    97.         },
    98.         {
    99.           "values": [251, -153, 247, 60, 248, -152, 75, -22, -455, 47, 20, -48],
    100.           "text": "Dell",
    101.           "scales": "scale-x,scale-y-3"
    102.         }
    103.       ]
    104.     };
    105.  
    106.     zingchart.render({
    107.       id: 'myChart',
    108.       data: myConfig,
    109.       height: 500,
    110.       width: '100%'
    111.     });
    112.   </script>
    113. </body>
    114.  
    115. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script src="https://cdn.zingchart.com/hotfix/2.6.2-hf1/zingchart.min.js"></script>
    8.  
    9.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    10. </head>
    11.  
    12. <body>
    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.   "type": "line",
    3.   "globals": {
    4.     "font-family": "Lucida Sans Unicode"
    5.   },
    6.   "plotarea": {
    7.     "margin": "dynamic"
    8.   },
    9.   "scaleX": {},
    10.   "scaleY": {
    11.     "guide": {
    12.       "line-width": 0,
    13.       "line-style": "solid"
    14.     },
    15.     "ref-line": {
    16.       "line-width": 2,
    17.       "line-color": "#f00"
    18.     },
    19.     "sync-zero": true
    20.   },
    21.   "scaleY2": {
    22.     "guide": {
    23.       "line-width": 0,
    24.       "line-style": "solid"
    25.     },
    26.     "ref-line": {
    27.       "line-width": 1,
    28.       "line-color": "#0f0"
    29.     },
    30.     "ref-zero": true
    31.   },
    32.   "scaleY3": {
    33.     "guide": {
    34.       "line-width": 0,
    35.       "line-style": "solid"
    36.     },
    37.     "ref-line": {
    38.       "line-width": 1,
    39.       "line-color": "#00f"
    40.     },
    41.     "sync-zero": true
    42.   },
    43.   "plot": {},
    44.   "legend": {
    45.     "margin": "auto 10 auto auto",
    46.     "toggle-action": "remove",
    47.     "adjust-layout": true
    48.   },
    49.   "series": [{
    50.       "values": [69, 68, -54, 48, 70, -74, 98, 70, -72, 68, 49, 69],
    51.       "text": "Apple 1",
    52.       "scales": "scale-x,scale-y"
    53.     },
    54.     {
    55.       "values": [39, 28, -24, 28, 40, -24, 18, 30, -32, 28, 19, 29],
    56.       "text": "Apple 2",
    57.       "scales": "scale-x,scale-y"
    58.     },
    59.     {
    60.       "values": [151, -53, 147, 160, 148, 152, 175, -52, -55, 147, 160, 148],
    61.       "text": "Microsoft",
    62.       "scales": "scale-x,scale-y-2"
    63.     },
    64.     {
    65.       "values": [251, -153, 247, 60, 248, -152, 75, -22, -455, 47, 20, -48],
    66.       "text": "Dell",
    67.       "scales": "scale-x,scale-y-3"
    68.     }
    69.   ]
    70. };
    71.  
    72. zingchart.render({
    73.   id: 'myChart',
    74.   data: myConfig,
    75.   height: 500,
    76.   width: '100%'
    77. });