• 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: 'area',
    18.       crosshairX: {
    19.  
    20.       },
    21.       plot: {
    22.         aspect: 'spline',
    23.         rules: [{
    24.             rule: '%v < 20',
    25.             lineColor: 'red',
    26.             backgroundColor: 'red'
    27.           },
    28.           {
    29.             rule: '%v >= 20 && %v <= 40',
    30.             lineColor: 'orange',
    31.             backgroundColor: 'orange'
    32.           },
    33.           {
    34.             rule: '%v >= 40 && %v <= 50',
    35.             lineColor: 'orange',
    36.             backgroundColor: 'yellow'
    37.           },
    38.           {
    39.             rule: '%v >= 50 && %v <= 60',
    40.             lineColor: 'blue',
    41.             backgroundColor: 'green'
    42.           },
    43.           {
    44.             rule: '%v >= 60 && %v <= 80',
    45.             lineColor: 'blue',
    46.             backgroundColor: 'blue'
    47.           },
    48.           {
    49.             rule: '%v > 80',
    50.             lineColor: 'purple',
    51.             backgroundColor: 'purple'
    52.           }
    53.         ],
    54.         marker: {
    55.           size: 3,
    56.           rules: [{
    57.               rule: '%v < 20',
    58.               backgroundColor: 'red'
    59.             },
    60.             {
    61.               rule: '%v >= 20 && %v <= 50',
    62.               backgroundColor: 'orange'
    63.             },
    64.             {
    65.               rule: '%v >= 50 && %v <= 80',
    66.               backgroundColor: 'blue'
    67.             },
    68.             {
    69.               rule: '%v > 80',
    70.               backgroundColor: 'purple'
    71.             }
    72.           ]
    73.         }
    74.       },
    75.       scaleX: {
    76.         labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    77.         item: {
    78.           fontFamily: 'Georgia'
    79.         }
    80.       },
    81.       scaleY: {
    82.         values: '0:100:20',
    83.         guide: {
    84.           lineStyle: 'dashdot'
    85.         },
    86.         item: {
    87.           fontFamily: 'Georgia'
    88.         }
    89.       },
    90.       series: [{
    91.         values: [
    92.           [1, 24],
    93.           [1.1, 9],
    94.           [1.3, 5],
    95.           [1.8, 21],
    96.           [1.9, 29],
    97.           [2, 15],
    98.           [2.1, 13],
    99.           [2.3, 29],
    100.           [2.5, 10],
    101.           [2.9, 41],
    102.           [3, 21],
    103.           [3.1, 30],
    104.           [3.3, 40],
    105.           [3.5, 44],
    106.           [4, 34],
    107.           [4.1, null],
    108.           [8.9, null],
    109.           [9, 60],
    110.           [9.1, 61],
    111.           [9.2, 50],
    112.           [9.3, 71],
    113.           [9.4, 64],
    114.           [9.8, 56],
    115.           [10, 75],
    116.           [10.1, 61],
    117.           [10.5, 71],
    118.           [10.7, 70],
    119.           [10.8, 70],
    120.           [10.9, 90],
    121.           [11, 81],
    122.           [11.2, 82],
    123.           [11.3, 93],
    124.           [11.5, 75],
    125.           [11.9, 95],
    126.           [12, 99]
    127.         ]
    128.       }]
    129.     };
    130.  
    131.     zingchart.TOUCHZOOM = 'pinch';
    132.  
    133.     zingchart.render({
    134.       id: 'myChart',
    135.       data: myConfig,
    136.       height: 400,
    137.       width: '100%'
    138.     });
    139.   </script>
    140. </body>
    141.  
    142. </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: 'area',
    3.   crosshairX: {
    4.  
    5.   },
    6.   plot: {
    7.     aspect: 'spline',
    8.     rules: [{
    9.         rule: '%v < 20',
    10.         lineColor: 'red',
    11.         backgroundColor: 'red'
    12.       },
    13.       {
    14.         rule: '%v >= 20 && %v <= 40',
    15.         lineColor: 'orange',
    16.         backgroundColor: 'orange'
    17.       },
    18.       {
    19.         rule: '%v >= 40 && %v <= 50',
    20.         lineColor: 'orange',
    21.         backgroundColor: 'yellow'
    22.       },
    23.       {
    24.         rule: '%v >= 50 && %v <= 60',
    25.         lineColor: 'blue',
    26.         backgroundColor: 'green'
    27.       },
    28.       {
    29.         rule: '%v >= 60 && %v <= 80',
    30.         lineColor: 'blue',
    31.         backgroundColor: 'blue'
    32.       },
    33.       {
    34.         rule: '%v > 80',
    35.         lineColor: 'purple',
    36.         backgroundColor: 'purple'
    37.       }
    38.     ],
    39.     marker: {
    40.       size: 3,
    41.       rules: [{
    42.           rule: '%v < 20',
    43.           backgroundColor: 'red'
    44.         },
    45.         {
    46.           rule: '%v >= 20 && %v <= 50',
    47.           backgroundColor: 'orange'
    48.         },
    49.         {
    50.           rule: '%v >= 50 && %v <= 80',
    51.           backgroundColor: 'blue'
    52.         },
    53.         {
    54.           rule: '%v > 80',
    55.           backgroundColor: 'purple'
    56.         }
    57.       ]
    58.     }
    59.   },
    60.   scaleX: {
    61.     labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    62.     item: {
    63.       fontFamily: 'Georgia'
    64.     }
    65.   },
    66.   scaleY: {
    67.     values: '0:100:20',
    68.     guide: {
    69.       lineStyle: 'dashdot'
    70.     },
    71.     item: {
    72.       fontFamily: 'Georgia'
    73.     }
    74.   },
    75.   series: [{
    76.     values: [
    77.       [1, 24],
    78.       [1.1, 9],
    79.       [1.3, 5],
    80.       [1.8, 21],
    81.       [1.9, 29],
    82.       [2, 15],
    83.       [2.1, 13],
    84.       [2.3, 29],
    85.       [2.5, 10],
    86.       [2.9, 41],
    87.       [3, 21],
    88.       [3.1, 30],
    89.       [3.3, 40],
    90.       [3.5, 44],
    91.       [4, 34],
    92.       [4.1, null],
    93.       [8.9, null],
    94.       [9, 60],
    95.       [9.1, 61],
    96.       [9.2, 50],
    97.       [9.3, 71],
    98.       [9.4, 64],
    99.       [9.8, 56],
    100.       [10, 75],
    101.       [10.1, 61],
    102.       [10.5, 71],
    103.       [10.7, 70],
    104.       [10.8, 70],
    105.       [10.9, 90],
    106.       [11, 81],
    107.       [11.2, 82],
    108.       [11.3, 93],
    109.       [11.5, 75],
    110.       [11.9, 95],
    111.       [12, 99]
    112.     ]
    113.   }]
    114. };
    115.  
    116. zingchart.TOUCHZOOM = 'pinch';
    117.  
    118. zingchart.render({
    119.   id: 'myChart',
    120.   data: myConfig,
    121.   height: 400,
    122.   width: '100%'
    123. });