• 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.   <div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
    32.   <script>
    33.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    34.     window.feed = function(oCallback, oGraphInfo) {
    35.       //console.log(oGraphInfo);
    36.       var oData = {};
    37.       oData.plot0 = Math.floor(1 + Math.random() * 9);
    38.       oData.plot1 = Math.floor(1 + Math.random() * 14);
    39.       oCallback(JSON.stringify(oData));
    40.     };
    41.  
    42.     var myConfig = {
    43.       "globals": {
    44.         "font-family": "Lucida Sans Unicode"
    45.       },
    46.       "graph": {
    47.         "refresh": {
    48.           "type": "feed",
    49.           "transport": "js",
    50.           "url": "feed()",
    51.           "interval": 2000,
    52.           "adjust-scale": true,
    53.           "reset-timeout": 200
    54.         }
    55.       },
    56.       "graphset": [{
    57.           "type": "line",
    58.           "plotarea": {
    59.             "margin": "dynamic"
    60.           },
    61.           "series": [{
    62.               "values": []
    63.             },
    64.             {
    65.               "values": []
    66.             }
    67.           ]
    68.         },
    69.         {
    70.           "type": "area",
    71.           "plotarea": {
    72.             "margin": "dynamic"
    73.           },
    74.           "series": [{
    75.               "values": []
    76.             },
    77.             {
    78.               "values": []
    79.             }
    80.           ]
    81.         },
    82.         {
    83.           "type": "vbar",
    84.           "plotarea": {
    85.             "margin": "dynamic"
    86.           },
    87.           "series": [{
    88.               "values": []
    89.             },
    90.             {
    91.               "values": []
    92.             }
    93.           ]
    94.         },
    95.         {
    96.           "type": "line",
    97.           "stacked": true,
    98.           "plotarea": {
    99.             "margin": "dynamic"
    100.           },
    101.           "series": [{
    102.               "values": []
    103.             },
    104.             {
    105.               "values": []
    106.             }
    107.           ]
    108.         },
    109.         {
    110.           "type": "area",
    111.           "stacked": true,
    112.           "plotarea": {
    113.             "margin": "dynamic"
    114.           },
    115.           "series": [{
    116.               "values": []
    117.             },
    118.             {
    119.               "values": []
    120.             }
    121.           ]
    122.         },
    123.         {
    124.           "type": "vbar",
    125.           "stacked": true,
    126.           "plotarea": {
    127.             "margin": "dynamic"
    128.           },
    129.           "series": [{
    130.               "values": []
    131.             },
    132.             {
    133.               "values": []
    134.             }
    135.           ]
    136.         }
    137.       ]
    138.     };
    139.  
    140.     zingchart.render({
    141.       id: 'myChart',
    142.       data: myConfig,
    143.       height: 400,
    144.       width: 800
    145.     });
    146.   </script>
    147. </body>
    148.  
    149. </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"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
    13. </body>
    14.  
    15. </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. window.feed = function(oCallback, oGraphInfo) {
    2.   //console.log(oGraphInfo);
    3.   var oData = {};
    4.   oData.plot0 = Math.floor(1 + Math.random() * 9);
    5.   oData.plot1 = Math.floor(1 + Math.random() * 14);
    6.   oCallback(JSON.stringify(oData));
    7. };
    8.  
    9. var myConfig = {
    10.   "globals": {
    11.     "font-family": "Lucida Sans Unicode"
    12.   },
    13.   "graph": {
    14.     "refresh": {
    15.       "type": "feed",
    16.       "transport": "js",
    17.       "url": "feed()",
    18.       "interval": 2000,
    19.       "adjust-scale": true,
    20.       "reset-timeout": 200
    21.     }
    22.   },
    23.   "graphset": [{
    24.       "type": "line",
    25.       "plotarea": {
    26.         "margin": "dynamic"
    27.       },
    28.       "series": [{
    29.           "values": []
    30.         },
    31.         {
    32.           "values": []
    33.         }
    34.       ]
    35.     },
    36.     {
    37.       "type": "area",
    38.       "plotarea": {
    39.         "margin": "dynamic"
    40.       },
    41.       "series": [{
    42.           "values": []
    43.         },
    44.         {
    45.           "values": []
    46.         }
    47.       ]
    48.     },
    49.     {
    50.       "type": "vbar",
    51.       "plotarea": {
    52.         "margin": "dynamic"
    53.       },
    54.       "series": [{
    55.           "values": []
    56.         },
    57.         {
    58.           "values": []
    59.         }
    60.       ]
    61.     },
    62.     {
    63.       "type": "line",
    64.       "stacked": true,
    65.       "plotarea": {
    66.         "margin": "dynamic"
    67.       },
    68.       "series": [{
    69.           "values": []
    70.         },
    71.         {
    72.           "values": []
    73.         }
    74.       ]
    75.     },
    76.     {
    77.       "type": "area",
    78.       "stacked": true,
    79.       "plotarea": {
    80.         "margin": "dynamic"
    81.       },
    82.       "series": [{
    83.           "values": []
    84.         },
    85.         {
    86.           "values": []
    87.         }
    88.       ]
    89.     },
    90.     {
    91.       "type": "vbar",
    92.       "stacked": true,
    93.       "plotarea": {
    94.         "margin": "dynamic"
    95.       },
    96.       "series": [{
    97.           "values": []
    98.         },
    99.         {
    100.           "values": []
    101.         }
    102.       ]
    103.     }
    104.   ]
    105. };
    106.  
    107. zingchart.render({
    108.   id: 'myChart',
    109.   data: myConfig,
    110.   height: 400,
    111.   width: 800
    112. });