• 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.     let chartConfig = {
    17.       type: 'line',
    18.       scaleX: {
    19.         item: {
    20.           fontSize: 10
    21.         }
    22.       },
    23.       scaleY: {
    24.         values: '50:350:50',
    25.         guide: {
    26.           lineStyle: 'dotted'
    27.         },
    28.         item: {
    29.           fontSize: 10
    30.         },
    31.         markers: [{
    32.             type: 'line',
    33.             range: [100],
    34.             valueRange: true,
    35.             lineColor: 'red',
    36.             lineWidth: 2,
    37.             lineStyle: 'solid',
    38.             alpha: 1,
    39.             label: {
    40.               text: 'Line Marker',
    41.  
    42.               alpha: 1,
    43.               angle: 0,
    44.               backgroundColor: '#ffe6e6',
    45.               borderColor: 'red',
    46.               borderRadius: '3px',
    47.               borderWidth: 1,
    48.               fontColor: 'red',
    49.               fontFamily: 'Courier',
    50.               fontSize: 10,
    51.               fontStyle: 'normal',
    52.               fontWeight: 'normal',
    53.               lineStyle: 'solid',
    54.               padding: 5,
    55.               textAlign: 'left',
    56.               textAlpha: 1,
    57.               width: '100%'
    58.             }
    59.           },
    60.           {
    61.             type: 'area',
    62.             range: [150, 300],
    63.             valueRange: true,
    64.             backgroundColor: 'red',
    65.             label: {
    66.               text: 'Area Marker',
    67.  
    68.               alpha: 1,
    69.               angle: 0,
    70.               backgroundColor: '#ffe6e6',
    71.               borderColor: 'red',
    72.               borderRadius: '3px',
    73.               borderWidth: 1,
    74.               fontColor: 'red',
    75.               fontFamily: 'Courier',
    76.               fontSize: 10,
    77.               fontStyle: 'normal',
    78.               fontWeight: 'normal',
    79.               lineStyle: 'solid',
    80.               padding: 5,
    81.               textAlign: 'left',
    82.               textAlpha: 1,
    83.               width: '100%'
    84.             }
    85.           }
    86.         ]
    87.       },
    88.       plot: {
    89.         lineWidth: 2,
    90.         lineColor: '#3399ff',
    91.         marker: {
    92.           size: 3,
    93.           backgroundColor: '#ccccff #00ff00',
    94.           borderWidth: 1,
    95.           borderColor: '#3399ff'
    96.         },
    97.         tooltip: {
    98.           visible: false
    99.         }
    100.       },
    101.       crosshairX: {
    102.         plotLabel: {
    103.           text: '%v'
    104.         },
    105.         scaleLabel: {
    106.           visible: false
    107.         }
    108.       },
    109.       crosshairY: {
    110.         type: 'multiple',
    111.         scaleLabel: {
    112.           visible: false
    113.         }
    114.       },
    115.       series: [{
    116.         values: [
    117.           138.2, 196.3, 153.6, 127.4, 114.1, 181.4, 131.1, 170.9, 154.4, 105.2,
    118.           136.3, 180.4, 150.5, 135.3, 130.5, 164.3, 110.5, 127.2, 183.9, 191.3,
    119.           184.8, 165.7, 102.4, 196.2, 179.1, 116.8, 175.2, 137.8, 100.9, 177.3,
    120.           122.5, 123.1, 131.7, 109.4, 167.2, 142.7, 140.7, 165.5, 148.6, 181.2,
    121.           108.7, 132.9, 161.9, 192.1, 134.5, 149.4, 183.9, 124.4, 114.4, 121.7,
    122.           249.6, 224.3, 199.3, 151.4, 112.4, 213.5, 265.3, 239.5, 294.6, 284.4,
    123.           279.2, 273.7, 233.7, 290.1, 228.2, 269.3, 208.4, 224.6, 235.1, 222.5,
    124.           225.7, 257.2, 238.1, 262.5, 229.6, 269.7, 283.9, 236.2, 260.8, 255.2,
    125.           258.1, 219.5, 292.4, 264.8, 251.7, 225.9, 206.5, 203.3, 258.2, 200.7,
    126.           237.2, 208.1, 262.7, 292.8, 249.2, 242.6, 284.4, 246.7, 275.9, 274.5,
    127.           234.2
    128.         ]
    129.       }]
    130.     };
    131.  
    132.     zingchart.render({
    133.       id: 'myChart',
    134.       data: chartConfig,
    135.       height: 400,
    136.       width: '100%'
    137.     });
    138.   </script>
    139. </body>
    140.  
    141. </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. let chartConfig = {
    2.   type: 'line',
    3.   scaleX: {
    4.     item: {
    5.       fontSize: 10
    6.     }
    7.   },
    8.   scaleY: {
    9.     values: '50:350:50',
    10.     guide: {
    11.       lineStyle: 'dotted'
    12.     },
    13.     item: {
    14.       fontSize: 10
    15.     },
    16.     markers: [{
    17.         type: 'line',
    18.         range: [100],
    19.         valueRange: true,
    20.         lineColor: 'red',
    21.         lineWidth: 2,
    22.         lineStyle: 'solid',
    23.         alpha: 1,
    24.         label: {
    25.           text: 'Line Marker',
    26.  
    27.           alpha: 1,
    28.           angle: 0,
    29.           backgroundColor: '#ffe6e6',
    30.           borderColor: 'red',
    31.           borderRadius: '3px',
    32.           borderWidth: 1,
    33.           fontColor: 'red',
    34.           fontFamily: 'Courier',
    35.           fontSize: 10,
    36.           fontStyle: 'normal',
    37.           fontWeight: 'normal',
    38.           lineStyle: 'solid',
    39.           padding: 5,
    40.           textAlign: 'left',
    41.           textAlpha: 1,
    42.           width: '100%'
    43.         }
    44.       },
    45.       {
    46.         type: 'area',
    47.         range: [150, 300],
    48.         valueRange: true,
    49.         backgroundColor: 'red',
    50.         label: {
    51.           text: 'Area Marker',
    52.  
    53.           alpha: 1,
    54.           angle: 0,
    55.           backgroundColor: '#ffe6e6',
    56.           borderColor: 'red',
    57.           borderRadius: '3px',
    58.           borderWidth: 1,
    59.           fontColor: 'red',
    60.           fontFamily: 'Courier',
    61.           fontSize: 10,
    62.           fontStyle: 'normal',
    63.           fontWeight: 'normal',
    64.           lineStyle: 'solid',
    65.           padding: 5,
    66.           textAlign: 'left',
    67.           textAlpha: 1,
    68.           width: '100%'
    69.         }
    70.       }
    71.     ]
    72.   },
    73.   plot: {
    74.     lineWidth: 2,
    75.     lineColor: '#3399ff',
    76.     marker: {
    77.       size: 3,
    78.       backgroundColor: '#ccccff #00ff00',
    79.       borderWidth: 1,
    80.       borderColor: '#3399ff'
    81.     },
    82.     tooltip: {
    83.       visible: false
    84.     }
    85.   },
    86.   crosshairX: {
    87.     plotLabel: {
    88.       text: '%v'
    89.     },
    90.     scaleLabel: {
    91.       visible: false
    92.     }
    93.   },
    94.   crosshairY: {
    95.     type: 'multiple',
    96.     scaleLabel: {
    97.       visible: false
    98.     }
    99.   },
    100.   series: [{
    101.     values: [
    102.       138.2, 196.3, 153.6, 127.4, 114.1, 181.4, 131.1, 170.9, 154.4, 105.2,
    103.       136.3, 180.4, 150.5, 135.3, 130.5, 164.3, 110.5, 127.2, 183.9, 191.3,
    104.       184.8, 165.7, 102.4, 196.2, 179.1, 116.8, 175.2, 137.8, 100.9, 177.3,
    105.       122.5, 123.1, 131.7, 109.4, 167.2, 142.7, 140.7, 165.5, 148.6, 181.2,
    106.       108.7, 132.9, 161.9, 192.1, 134.5, 149.4, 183.9, 124.4, 114.4, 121.7,
    107.       249.6, 224.3, 199.3, 151.4, 112.4, 213.5, 265.3, 239.5, 294.6, 284.4,
    108.       279.2, 273.7, 233.7, 290.1, 228.2, 269.3, 208.4, 224.6, 235.1, 222.5,
    109.       225.7, 257.2, 238.1, 262.5, 229.6, 269.7, 283.9, 236.2, 260.8, 255.2,
    110.       258.1, 219.5, 292.4, 264.8, 251.7, 225.9, 206.5, 203.3, 258.2, 200.7,
    111.       237.2, 208.1, 262.7, 292.8, 249.2, 242.6, 284.4, 246.7, 275.9, 274.5,
    112.       234.2
    113.     ]
    114.   }]
    115. };
    116.  
    117. zingchart.render({
    118.   id: 'myChart',
    119.   data: chartConfig,
    120.   height: 400,
    121.   width: '100%'
    122. });