• 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.     #myChart {
    13.       height: 100%;
    14.       width: 100%;
    15.     }
    16.   </style>
    17. </head>
    18.  
    19. <body>
    20.   <div id='myChart'></div>
    21.   <script>
    22.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    23.     var myConfig = {
    24.       "graphset": [{
    25.         "scale-x": {
    26.           "zooming": 1
    27.         },
    28.         "arrows": [{
    29.           "text": "Positive Correlation",
    30.           "font-family": "Helvetica",
    31.           "font-size": 12,
    32.           "background-color-1": "#ef4810",
    33.           "background-color-2": "#cc3300",
    34.           "border-width": 2,
    35.           "border-color": "#a62b02",
    36.           "shadow": true,
    37.           "shadow-blur": 3,
    38.           "offset-y": -35,
    39.           "padding": "5px",
    40.           "from": {
    41.             "hook": "node:plot=2,index=1"
    42.           },
    43.           "to": {
    44.             "hook": "node:plot=2,index=19"
    45.           }
    46.         }],
    47.         "scale": {
    48.           "size-factor": 0.9
    49.         },
    50.         "type": "scatter",
    51.         "series": [{
    52.             "values": [
    53.               [0, 83],
    54.               [1, 73],
    55.               [2, 146],
    56.               [3, 165],
    57.               [4, 141],
    58.               [5, 61],
    59.               [6, 96],
    60.               [7, 62],
    61.               [8, 161],
    62.               [9, 108],
    63.               [10, 21],
    64.               [11, 169],
    65.               [12, 168],
    66.               [13, 61],
    67.               [14, 161],
    68.               [15, 78],
    69.               [16, 107],
    70.               [17, 97],
    71.               [18, 160],
    72.               [19, 159],
    73.               [20, 153]
    74.             ]
    75.           },
    76.           {
    77.             "values": [
    78.               [0, 107],
    79.               [1, 68],
    80.               [2, 130],
    81.               [3, 163],
    82.               [4, 190],
    83.               [5, 163],
    84.               [6, 145],
    85.               [7, 115],
    86.               [8, 99],
    87.               [9, 190],
    88.               [10, 151],
    89.               [11, 68],
    90.               [12, 109],
    91.               [13, 154],
    92.               [14, 151],
    93.               [15, 100],
    94.               [16, 96],
    95.               [17, 158],
    96.               [18, 111],
    97.               [19, 185],
    98.               [20, 176]
    99.             ]
    100.           },
    101.           {
    102.             "values": [
    103.               [0, 107],
    104.               [1, 112],
    105.               [2, 134],
    106.               [3, 133],
    107.               [4, 145],
    108.               [5, 142],
    109.               [6, 160],
    110.               [7, 144],
    111.               [8, 166],
    112.               [9, 179],
    113.               [10, 150],
    114.               [11, 190],
    115.               [12, 193],
    116.               [13, 184],
    117.               [14, 218],
    118.               [15, 220],
    119.               [16, 243],
    120.               [17, 235],
    121.               [18, 250],
    122.               [19, 258],
    123.               [20, 269]
    124.             ]
    125.           },
    126.           {
    127.             "values": [
    128.               [0, 284],
    129.               [1, 243],
    130.               [2, 237],
    131.               [3, 273],
    132.               [4, 248],
    133.               [5, 245],
    134.               [6, 276],
    135.               [7, 162],
    136.               [8, 186],
    137.               [9, 144],
    138.               [10, 252],
    139.               [11, 190],
    140.               [12, 216],
    141.               [13, 247],
    142.               [14, 255],
    143.               [15, 189],
    144.               [16, 180],
    145.               [17, 158],
    146.               [18, 277],
    147.               [19, 245],
    148.               [20, 173]
    149.             ]
    150.           }
    151.         ]
    152.       }]
    153.     };
    154.  
    155.     zingchart.render({
    156.       id: 'myChart',
    157.       data: myConfig,
    158.       height: "100%",
    159.       width: "100%"
    160.     });
    161.   </script>
    162. </body>
    163.  
    164. </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. html,
    2. body,
    3. #myChart {
    4.   height: 100%;
    5.   width: 100%;
    6. }
    1. var myConfig = {
    2.   "graphset": [{
    3.     "scale-x": {
    4.       "zooming": 1
    5.     },
    6.     "arrows": [{
    7.       "text": "Positive Correlation",
    8.       "font-family": "Helvetica",
    9.       "font-size": 12,
    10.       "background-color-1": "#ef4810",
    11.       "background-color-2": "#cc3300",
    12.       "border-width": 2,
    13.       "border-color": "#a62b02",
    14.       "shadow": true,
    15.       "shadow-blur": 3,
    16.       "offset-y": -35,
    17.       "padding": "5px",
    18.       "from": {
    19.         "hook": "node:plot=2,index=1"
    20.       },
    21.       "to": {
    22.         "hook": "node:plot=2,index=19"
    23.       }
    24.     }],
    25.     "scale": {
    26.       "size-factor": 0.9
    27.     },
    28.     "type": "scatter",
    29.     "series": [{
    30.         "values": [
    31.           [0, 83],
    32.           [1, 73],
    33.           [2, 146],
    34.           [3, 165],
    35.           [4, 141],
    36.           [5, 61],
    37.           [6, 96],
    38.           [7, 62],
    39.           [8, 161],
    40.           [9, 108],
    41.           [10, 21],
    42.           [11, 169],
    43.           [12, 168],
    44.           [13, 61],
    45.           [14, 161],
    46.           [15, 78],
    47.           [16, 107],
    48.           [17, 97],
    49.           [18, 160],
    50.           [19, 159],
    51.           [20, 153]
    52.         ]
    53.       },
    54.       {
    55.         "values": [
    56.           [0, 107],
    57.           [1, 68],
    58.           [2, 130],
    59.           [3, 163],
    60.           [4, 190],
    61.           [5, 163],
    62.           [6, 145],
    63.           [7, 115],
    64.           [8, 99],
    65.           [9, 190],
    66.           [10, 151],
    67.           [11, 68],
    68.           [12, 109],
    69.           [13, 154],
    70.           [14, 151],
    71.           [15, 100],
    72.           [16, 96],
    73.           [17, 158],
    74.           [18, 111],
    75.           [19, 185],
    76.           [20, 176]
    77.         ]
    78.       },
    79.       {
    80.         "values": [
    81.           [0, 107],
    82.           [1, 112],
    83.           [2, 134],
    84.           [3, 133],
    85.           [4, 145],
    86.           [5, 142],
    87.           [6, 160],
    88.           [7, 144],
    89.           [8, 166],
    90.           [9, 179],
    91.           [10, 150],
    92.           [11, 190],
    93.           [12, 193],
    94.           [13, 184],
    95.           [14, 218],
    96.           [15, 220],
    97.           [16, 243],
    98.           [17, 235],
    99.           [18, 250],
    100.           [19, 258],
    101.           [20, 269]
    102.         ]
    103.       },
    104.       {
    105.         "values": [
    106.           [0, 284],
    107.           [1, 243],
    108.           [2, 237],
    109.           [3, 273],
    110.           [4, 248],
    111.           [5, 245],
    112.           [6, 276],
    113.           [7, 162],
    114.           [8, 186],
    115.           [9, 144],
    116.           [10, 252],
    117.           [11, 190],
    118.           [12, 216],
    119.           [13, 247],
    120.           [14, 255],
    121.           [15, 189],
    122.           [16, 180],
    123.           [17, 158],
    124.           [18, 277],
    125.           [19, 245],
    126.           [20, 173]
    127.         ]
    128.       }
    129.     ]
    130.   }]
    131. };
    132.  
    133. zingchart.render({
    134.   id: 'myChart',
    135.   data: myConfig,
    136.   height: "100%",
    137.   width: "100%"
    138. });