• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html class="zc-html">
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8.   <style>
    9.     .zc-html,
    10.     .zc-body {
    11.       margin: 0;
    12.       padding: 0;
    13.       width: 100%;
    14.       height: 100%;
    15.     }
    16.  
    17.     .chart--container {
    18.       height: 100%;
    19.       width: 100%;
    20.       min-height: 530px;
    21.     }
    22.  
    23.     .zc-ref {
    24.       display: none;
    25.     }
    26.   </style>
    27. </head>
    28.  
    29. <body class="zc-body">
    30.   <!-- CHART CONTAINER -->
    31.   <div id="myChart" class="chart--container">
    32.     <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    33.   </div>
    34.   <script>
    35.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // window:load event for Javascript to run after HTML
    36.     // because this Javascript is injected into the document head
    37.     window.addEventListener('load', () => {
    38.       // Javascript code to execute after DOM content
    39.  
    40.       // full ZingChart schema can be found here:
    41.       // https://www.zingchart.com/docs/api/json-configuration/
    42.       let chartConfig = {
    43.         "graphset": [{
    44.           "type": "line",
    45.           "title": {
    46.             "text": "%node-error-plus"
    47.           },
    48.           "plot": {
    49.             "errors": [
    50.               [3.1, 3.4],
    51.               [3, 4],
    52.               [0.9, 2.9],
    53.               [6, 1.6],
    54.               [3.5, 5]
    55.             ],
    56.             "error": {
    57.               "size": 0.1
    58.             },
    59.             "tooltip": {
    60.               "visible": false
    61.             }
    62.           },
    63.           "crosshair-x": {
    64.             "plot-label": {
    65.               "text": "<strong>Pos Error: {{%v + %node-error-plus}}</strong>"
    66.             }
    67.           },
    68.           "series": [{
    69.             "values": [30, 34, 9, 16, 33]
    70.           }]
    71.         }]
    72.       };
    73.  
    74.       // render chart with width and height to
    75.       // fill the parent container CSS dimensions
    76.       zingchart.render({
    77.         id: 'myChart',
    78.         data: chartConfig,
    79.         height: '100%',
    80.         width: '100%'
    81.       });
    82.     });
    83.   </script>
    84. </body>
    85.  
    86. </html>
    1. <!DOCTYPE html>
    2. <html class="zc-html">
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8. </head>
    9.  
    10. <body class="zc-body">
    11.   <!-- CHART CONTAINER -->
    12.   <div id="myChart" class="chart--container">
    13.     <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    14.   </div>
    15. </body>
    16.  
    17. </html>
    1. .zc-html,
    2. .zc-body {
    3.   margin: 0;
    4.   padding: 0;
    5.   width: 100%;
    6.   height: 100%;
    7. }
    8.  
    9. .chart--container {
    10.   height: 100%;
    11.   width: 100%;
    12.   min-height: 530px;
    13. }
    14.  
    15. .zc-ref {
    16.   display: none;
    17. }
    1. // window:load event for Javascript to run after HTML
    2. // because this Javascript is injected into the document head
    3. window.addEventListener('load', () => {
    4.   // Javascript code to execute after DOM content
    5.  
    6.   // full ZingChart schema can be found here:
    7.   // https://www.zingchart.com/docs/api/json-configuration/
    8.   let chartConfig = {
    9.     "graphset": [{
    10.       "type": "line",
    11.       "title": {
    12.         "text": "%node-error-plus"
    13.       },
    14.       "plot": {
    15.         "errors": [
    16.           [3.1, 3.4],
    17.           [3, 4],
    18.           [0.9, 2.9],
    19.           [6, 1.6],
    20.           [3.5, 5]
    21.         ],
    22.         "error": {
    23.           "size": 0.1
    24.         },
    25.         "tooltip": {
    26.           "visible": false
    27.         }
    28.       },
    29.       "crosshair-x": {
    30.         "plot-label": {
    31.           "text": "<strong>Pos Error: {{%v + %node-error-plus}}</strong>"
    32.         }
    33.       },
    34.       "series": [{
    35.         "values": [30, 34, 9, 16, 33]
    36.       }]
    37.     }]
    38.   };
    39.  
    40.   // render chart with width and height to
    41.   // fill the parent container CSS dimensions
    42.   zingchart.render({
    43.     id: 'myChart',
    44.     data: chartConfig,
    45.     height: '100%',
    46.     width: '100%'
    47.   });
    48. });