• 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 myConfig6b = { //Trend Line via Mixed Scatter/Line Chart
    17.       "type": "mixed",
    18.       "series": [{
    19.           "type": "scatter",
    20.           "values": [
    21.             [1, 9],
    22.             [2, 15],
    23.             [3, 21],
    24.             [4, 30],
    25.             [5, 40],
    26.             [6, 59],
    27.             [7, 60],
    28.             [8, 75],
    29.             [9, 81],
    30.             [10, 99]
    31.           ]
    32.         },
    33.         {
    34.           "type": "scatter",
    35.           "values": [
    36.             [0.9, 3],
    37.             [2.1, 13],
    38.             [3.5, 25],
    39.             [4.9, 35],
    40.             [5.3, 41],
    41.             [6.5, 57],
    42.             [7.1, 61],
    43.             [8.7, 70],
    44.             [9.2, 82],
    45.             [9.9, 95]
    46.           ]
    47.         },
    48.         {
    49.           "type": "scatter",
    50.           "values": [
    51.             [0.1, 9],
    52.             [1.8, 21],
    53.             [1.9, 29],
    54.             [4.1, 33],
    55.             [4.5, 39],
    56.             [6.9, 51],
    57.             [7.4, 64],
    58.             [8.9, 70],
    59.             [9, 75],
    60.             [9.3, 93]
    61.           ]
    62.         },
    63.         {
    64.           "type": "scatter",
    65.           "values": [
    66.             [0.3, 11],
    67.             [0.9, 15],
    68.             [1.1, 24],
    69.             [2.3, 29],
    70.             [2.9, 30],
    71.             [3.3, 35],
    72.             [5.6, 67],
    73.             [6.9, 70],
    74.             [7.3, 71],
    75.             [8.9, 90]
    76.           ]
    77.         },
    78.         {
    79.           "type": "scatter",
    80.           "values": [
    81.             [0.5, 5],
    82.             [1.9, 5],
    83.             [2.5, 10],
    84.             [3.1, 30],
    85.             [6.5, 45],
    86.             [6.9, 74],
    87.             [7.2, 50],
    88.             [7.8, 56],
    89.             [8, 61],
    90.             [8.5, 71]
    91.           ]
    92.         },
    93.         {
    94.           "type": "line",
    95.           "aspect": "spline",
    96.           "marker": {
    97.             "visible": false
    98.           },
    99.           "line-width": 1,
    100.           "line-style": "solid",
    101.           "line-color": "black",
    102.           "values": [
    103.             [0, 0],
    104.             [5, 40],
    105.             [8, 60],
    106.             [10, 100]
    107.           ]
    108.         },
    109.       ]
    110.     };
    111.  
    112.     zingchart.render({
    113.       id: 'myChart',
    114.       data: myConfig6b,
    115.       height: 400,
    116.       width: "100%"
    117.     });
    118.   </script>
    119. </body>
    120.  
    121. </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 myConfig6b = { //Trend Line via Mixed Scatter/Line Chart
    2.   "type": "mixed",
    3.   "series": [{
    4.       "type": "scatter",
    5.       "values": [
    6.         [1, 9],
    7.         [2, 15],
    8.         [3, 21],
    9.         [4, 30],
    10.         [5, 40],
    11.         [6, 59],
    12.         [7, 60],
    13.         [8, 75],
    14.         [9, 81],
    15.         [10, 99]
    16.       ]
    17.     },
    18.     {
    19.       "type": "scatter",
    20.       "values": [
    21.         [0.9, 3],
    22.         [2.1, 13],
    23.         [3.5, 25],
    24.         [4.9, 35],
    25.         [5.3, 41],
    26.         [6.5, 57],
    27.         [7.1, 61],
    28.         [8.7, 70],
    29.         [9.2, 82],
    30.         [9.9, 95]
    31.       ]
    32.     },
    33.     {
    34.       "type": "scatter",
    35.       "values": [
    36.         [0.1, 9],
    37.         [1.8, 21],
    38.         [1.9, 29],
    39.         [4.1, 33],
    40.         [4.5, 39],
    41.         [6.9, 51],
    42.         [7.4, 64],
    43.         [8.9, 70],
    44.         [9, 75],
    45.         [9.3, 93]
    46.       ]
    47.     },
    48.     {
    49.       "type": "scatter",
    50.       "values": [
    51.         [0.3, 11],
    52.         [0.9, 15],
    53.         [1.1, 24],
    54.         [2.3, 29],
    55.         [2.9, 30],
    56.         [3.3, 35],
    57.         [5.6, 67],
    58.         [6.9, 70],
    59.         [7.3, 71],
    60.         [8.9, 90]
    61.       ]
    62.     },
    63.     {
    64.       "type": "scatter",
    65.       "values": [
    66.         [0.5, 5],
    67.         [1.9, 5],
    68.         [2.5, 10],
    69.         [3.1, 30],
    70.         [6.5, 45],
    71.         [6.9, 74],
    72.         [7.2, 50],
    73.         [7.8, 56],
    74.         [8, 61],
    75.         [8.5, 71]
    76.       ]
    77.     },
    78.     {
    79.       "type": "line",
    80.       "aspect": "spline",
    81.       "marker": {
    82.         "visible": false
    83.       },
    84.       "line-width": 1,
    85.       "line-style": "solid",
    86.       "line-color": "black",
    87.       "values": [
    88.         [0, 0],
    89.         [5, 40],
    90.         [8, 60],
    91.         [10, 100]
    92.       ]
    93.     },
    94.   ]
    95. };
    96.  
    97. zingchart.render({
    98.   id: 'myChart',
    99.   data: myConfig6b,
    100.   height: 400,
    101.   width: "100%"
    102. });