• 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></style>
    10. </head>
    11.  
    12. <body>
    13.   <div id='myChart'></div>
    14.   <script>
    15.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    16.     var myConfig = {
    17.       "type": "scatter",
    18.       "plot": {
    19.         "tooltip": {
    20.           "text": "%v<br>+%node-error-plus/-%node-error-minus",
    21.           "font-color": "#003300",
    22.           "font-family": "Georgia",
    23.           "background-color": "white",
    24.           "border-color": "#003300",
    25.           "border-width": 1,
    26.           "border-radius": "5px",
    27.           "alpha": 0.5,
    28.           "padding": "5%",
    29.           "callout": true
    30.         },
    31.         "errors": [
    32.           [1.3, 0.9],
    33.           [1.4, 0.7],
    34.           [1.6, 0.5],
    35.           [1.8, 0.3],
    36.           [1.5, 0.5],
    37.           [2.2, 0.3],
    38.           [1.5, 0.5],
    39.           [1.1, 0.2],
    40.           [0.7, 1.1],
    41.           [1.7, 0.4],
    42.           [0.4, 0.2],
    43.           [0.5, 0.5],
    44.           [0.6, 0.5],
    45.           [0.7, 0.5],
    46.           [0.8, 0.5],
    47.           [0.9, 0.5],
    48.           [1.4, 1.1],
    49.           [1.7, 1.2],
    50.           [1.5, 1.3],
    51.           [1.3, 1.2],
    52.           [1.1, 1.1],
    53.           [0.6, 2.6],
    54.           [0.4, 2.4],
    55.           [0.3, 3]
    56.         ],
    57.         "error": {
    58.           "size": "10px",
    59.           "line-color": "#003300",
    60.           "line-width": 1,
    61.           "line-style": "dotted"
    62.         },
    63.         "marker": {
    64.           "size": 3,
    65.           "background-color": "#009900",
    66.           "border-width": 1,
    67.           "border-color": "#ff33cc"
    68.         },
    69.         "hover-marker": {
    70.           "visible": false
    71.         }
    72.       },
    73.       "scale-x": {
    74.         "guide": {
    75.           "visible": false
    76.         }
    77.       },
    78.       "scale-y": {
    79.         "guide": {
    80.           "line-style": "solid",
    81.  
    82.         }
    83.       },
    84.       "series": [{
    85.         "values": [
    86.           [1.3, 1.3],
    87.           [1.4, 1.4],
    88.           [1.6, 1.7],
    89.           [1.7, 1.5],
    90.           [1.8, 1.9],
    91.           [1.9, 1.5],
    92.           [2, 0.9],
    93.           [2.1, 0.5],
    94.           [2.2, 1.1],
    95.           [2.3, 0.4],
    96.           [2.4, 0.3],
    97.           [2.5, 0.7],
    98.           [2.6, 2.1],
    99.           [2.7, 2.5],
    100.           [2.8, 2.6],
    101.           [2.9, 2],
    102.           [3, 1.9],
    103.           [3.1, 1.5],
    104.           [3.2, 2],
    105.           [3.3, 1.4],
    106.           [3.4, 1.9],
    107.           [3.5, 3],
    108.           [3.6, 3.4],
    109.           [3.7, 3.3]
    110.         ]
    111.       }]
    112.     };
    113.  
    114.     zingchart.render({
    115.       id: 'myChart',
    116.       data: myConfig,
    117.       height: 400,
    118.       width: "100%"
    119.     });
    120.   </script>
    121. </body>
    122.  
    123. </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'></div>
    13. </body>
    14.  
    15. </html>
    1.  
    1. var myConfig = {
    2.   "type": "scatter",
    3.   "plot": {
    4.     "tooltip": {
    5.       "text": "%v<br>+%node-error-plus/-%node-error-minus",
    6.       "font-color": "#003300",
    7.       "font-family": "Georgia",
    8.       "background-color": "white",
    9.       "border-color": "#003300",
    10.       "border-width": 1,
    11.       "border-radius": "5px",
    12.       "alpha": 0.5,
    13.       "padding": "5%",
    14.       "callout": true
    15.     },
    16.     "errors": [
    17.       [1.3, 0.9],
    18.       [1.4, 0.7],
    19.       [1.6, 0.5],
    20.       [1.8, 0.3],
    21.       [1.5, 0.5],
    22.       [2.2, 0.3],
    23.       [1.5, 0.5],
    24.       [1.1, 0.2],
    25.       [0.7, 1.1],
    26.       [1.7, 0.4],
    27.       [0.4, 0.2],
    28.       [0.5, 0.5],
    29.       [0.6, 0.5],
    30.       [0.7, 0.5],
    31.       [0.8, 0.5],
    32.       [0.9, 0.5],
    33.       [1.4, 1.1],
    34.       [1.7, 1.2],
    35.       [1.5, 1.3],
    36.       [1.3, 1.2],
    37.       [1.1, 1.1],
    38.       [0.6, 2.6],
    39.       [0.4, 2.4],
    40.       [0.3, 3]
    41.     ],
    42.     "error": {
    43.       "size": "10px",
    44.       "line-color": "#003300",
    45.       "line-width": 1,
    46.       "line-style": "dotted"
    47.     },
    48.     "marker": {
    49.       "size": 3,
    50.       "background-color": "#009900",
    51.       "border-width": 1,
    52.       "border-color": "#ff33cc"
    53.     },
    54.     "hover-marker": {
    55.       "visible": false
    56.     }
    57.   },
    58.   "scale-x": {
    59.     "guide": {
    60.       "visible": false
    61.     }
    62.   },
    63.   "scale-y": {
    64.     "guide": {
    65.       "line-style": "solid",
    66.  
    67.     }
    68.   },
    69.   "series": [{
    70.     "values": [
    71.       [1.3, 1.3],
    72.       [1.4, 1.4],
    73.       [1.6, 1.7],
    74.       [1.7, 1.5],
    75.       [1.8, 1.9],
    76.       [1.9, 1.5],
    77.       [2, 0.9],
    78.       [2.1, 0.5],
    79.       [2.2, 1.1],
    80.       [2.3, 0.4],
    81.       [2.4, 0.3],
    82.       [2.5, 0.7],
    83.       [2.6, 2.1],
    84.       [2.7, 2.5],
    85.       [2.8, 2.6],
    86.       [2.9, 2],
    87.       [3, 1.9],
    88.       [3.1, 1.5],
    89.       [3.2, 2],
    90.       [3.3, 1.4],
    91.       [3.4, 1.9],
    92.       [3.5, 3],
    93.       [3.6, 3.4],
    94.       [3.7, 3.3]
    95.     ]
    96.   }]
    97. };
    98.  
    99. zingchart.render({
    100.   id: 'myChart',
    101.   data: myConfig,
    102.   height: 400,
    103.   width: "100%"
    104. });