• 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 myConfig8 = {
    17.       "type": "scatter",
    18.       "scale-x": {
    19.         "label": {
    20.           "text": "Scatter Chart with a Logarithmic Scale"
    21.         },
    22.       },
    23.       "scale-y": {
    24.         "progression": "log",
    25.         "log-base": 10,
    26.         "thousands-separator": ","
    27.       },
    28.       "series": [{
    29.           "values": [
    30.             [1, 9],
    31.             [2, 15],
    32.             [3, 21],
    33.             [4, 30],
    34.             [5, 40],
    35.             [6, 59],
    36.             [7, 60],
    37.             [8, 75],
    38.             [9, 81],
    39.             [10, 99],
    40.             [11, 500],
    41.             [12, 9000]
    42.           ],
    43.           "marker": {
    44.             "type": "parallelogram"
    45.           }
    46.         },
    47.         {
    48.           "values": [
    49.             [0.9, 3],
    50.             [2.1, 13],
    51.             [3.5, 25],
    52.             [4.9, 35],
    53.             [5.3, 41],
    54.             [6.5, 57],
    55.             [7.1, 61],
    56.             [8.7, 170],
    57.             [9.2, 282],
    58.             [9.9, 395],
    59.             [10.5, 700],
    60.             [11.2, 8500]
    61.           ],
    62.           "marker": {
    63.             "type": "rectangle"
    64.           }
    65.         },
    66.         {
    67.           "values": [
    68.             [0.1, 9],
    69.             [1.8, 21],
    70.             [1.9, 29],
    71.             [4.1, 33],
    72.             [4.5, 39],
    73.             [6.9, 51],
    74.             [7.4, 64],
    75.             [8.9, 370],
    76.             [9, 475],
    77.             [9.3, 593],
    78.             [10.3, 650],
    79.             [11.7, 7000]
    80.           ],
    81.           "marker": {
    82.             "type": "rpoly5"
    83.           }
    84.         },
    85.         {
    86.           "values": [
    87.             [0.3, 11],
    88.             [0.9, 15],
    89.             [1.1, 24],
    90.             [2.3, 29],
    91.             [2.9, 30],
    92.             [3.3, 35],
    93.             [5.6, 67],
    94.             [6.9, 70],
    95.             [7.3, 71],
    96.             [8.9, 190],
    97.             [10.6, 350],
    98.             [11.1, 2000]
    99.           ],
    100.           "marker": {
    101.             "type": "star7"
    102.           }
    103.         },
    104.         {
    105.           "values": [
    106.             [0.5, 5],
    107.             [1.9, 5],
    108.             [2.5, 10],
    109.             [3.1, 30],
    110.             [6.5, 45],
    111.             [6.9, 74],
    112.             [7.2, 50],
    113.             [7.8, 56],
    114.             [8, 61],
    115.             [8.5, 771],
    116.             [10.7, 900],
    117.             [11.1, 6000]
    118.           ],
    119.           "marker": {
    120.             "type": "gear3"
    121.           }
    122.         },
    123.       ]
    124.     };
    125.  
    126.     zingchart.render({
    127.       id: 'myChart',
    128.       data: myConfig8,
    129.       height: 400,
    130.       width: "100%"
    131.     });
    132.   </script>
    133. </body>
    134.  
    135. </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 myConfig8 = {
    2.   "type": "scatter",
    3.   "scale-x": {
    4.     "label": {
    5.       "text": "Scatter Chart with a Logarithmic Scale"
    6.     },
    7.   },
    8.   "scale-y": {
    9.     "progression": "log",
    10.     "log-base": 10,
    11.     "thousands-separator": ","
    12.   },
    13.   "series": [{
    14.       "values": [
    15.         [1, 9],
    16.         [2, 15],
    17.         [3, 21],
    18.         [4, 30],
    19.         [5, 40],
    20.         [6, 59],
    21.         [7, 60],
    22.         [8, 75],
    23.         [9, 81],
    24.         [10, 99],
    25.         [11, 500],
    26.         [12, 9000]
    27.       ],
    28.       "marker": {
    29.         "type": "parallelogram"
    30.       }
    31.     },
    32.     {
    33.       "values": [
    34.         [0.9, 3],
    35.         [2.1, 13],
    36.         [3.5, 25],
    37.         [4.9, 35],
    38.         [5.3, 41],
    39.         [6.5, 57],
    40.         [7.1, 61],
    41.         [8.7, 170],
    42.         [9.2, 282],
    43.         [9.9, 395],
    44.         [10.5, 700],
    45.         [11.2, 8500]
    46.       ],
    47.       "marker": {
    48.         "type": "rectangle"
    49.       }
    50.     },
    51.     {
    52.       "values": [
    53.         [0.1, 9],
    54.         [1.8, 21],
    55.         [1.9, 29],
    56.         [4.1, 33],
    57.         [4.5, 39],
    58.         [6.9, 51],
    59.         [7.4, 64],
    60.         [8.9, 370],
    61.         [9, 475],
    62.         [9.3, 593],
    63.         [10.3, 650],
    64.         [11.7, 7000]
    65.       ],
    66.       "marker": {
    67.         "type": "rpoly5"
    68.       }
    69.     },
    70.     {
    71.       "values": [
    72.         [0.3, 11],
    73.         [0.9, 15],
    74.         [1.1, 24],
    75.         [2.3, 29],
    76.         [2.9, 30],
    77.         [3.3, 35],
    78.         [5.6, 67],
    79.         [6.9, 70],
    80.         [7.3, 71],
    81.         [8.9, 190],
    82.         [10.6, 350],
    83.         [11.1, 2000]
    84.       ],
    85.       "marker": {
    86.         "type": "star7"
    87.       }
    88.     },
    89.     {
    90.       "values": [
    91.         [0.5, 5],
    92.         [1.9, 5],
    93.         [2.5, 10],
    94.         [3.1, 30],
    95.         [6.5, 45],
    96.         [6.9, 74],
    97.         [7.2, 50],
    98.         [7.8, 56],
    99.         [8, 61],
    100.         [8.5, 771],
    101.         [10.7, 900],
    102.         [11.1, 6000]
    103.       ],
    104.       "marker": {
    105.         "type": "gear3"
    106.       }
    107.     },
    108.   ]
    109. };
    110.  
    111. zingchart.render({
    112.   id: 'myChart',
    113.   data: myConfig8,
    114.   height: 400,
    115.   width: "100%"
    116. });