• 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.               offsetY: 40,
    59.               offsetX: 20,
    60.               callout: true,
    61.               calloutHeight: 10,
    62.               calloutPosition: 'top',
    63.               calloutWidth: 0,
    64.               calloutTip: {
    65.                 type: 'circle',
    66.                 backgroundColor: '#fff',
    67.                 borderWidth: 2,
    68.                 borderColor: '#f60',
    69.                 offsetY: 35,
    70.                 size: 5,
    71.               }
    72.             }
    73.           },
    74.           {
    75.             type: 'area',
    76.             range: [150, 300],
    77.             valueRange: true,
    78.             backgroundColor: 'red',
    79.             label: {
    80.               text: 'Area Marker',
    81.  
    82.               alpha: 1,
    83.               angle: 0,
    84.               backgroundColor: '#ffe6e6',
    85.               borderColor: 'red',
    86.               borderRadius: '3px',
    87.               borderWidth: 1,
    88.               fontColor: 'red',
    89.               fontFamily: 'Courier',
    90.               fontSize: 10,
    91.               fontStyle: 'normal',
    92.               fontWeight: 'normal',
    93.               lineStyle: 'solid',
    94.               padding: 5,
    95.               textAlign: 'left',
    96.               textAlpha: 1,
    97.               width: '100%',
    98.               offsetY: -30,
    99.               callout: true,
    100.               calloutHeight: 15,
    101.               calloutPosition: 'bottom',
    102.               calloutWidth: 0,
    103.               calloutTip: {
    104.                 type: 'circle',
    105.                 backgroundColor: '#fff',
    106.                 borderWidth: 2,
    107.                 borderColor: '#f60',
    108.                 offsetY: -25,
    109.                 size: 5,
    110.               },
    111.             }
    112.           }
    113.         ]
    114.       },
    115.       plot: {
    116.         lineWidth: 2,
    117.         lineColor: '#3399ff',
    118.         marker: {
    119.           size: 3,
    120.           backgroundColor: '#ccccff #00ff00',
    121.           borderWidth: 1,
    122.           borderColor: '#3399ff'
    123.         },
    124.         tooltip: {
    125.           visible: false
    126.         }
    127.       },
    128.       crosshairX: {
    129.         plotLabel: {
    130.           text: '%v'
    131.         },
    132.         scaleLabel: {
    133.           visible: false
    134.         }
    135.       },
    136.       crosshairY: {
    137.         type: 'multiple',
    138.         scaleLabel: {
    139.           visible: false
    140.         }
    141.       },
    142.       series: [{
    143.         values: [
    144.           138.2, 196.3, 153.6, 127.4, 114.1, 181.4, 131.1, 170.9, 154.4, 105.2,
    145.           136.3, 180.4, 150.5, 135.3, 130.5, 164.3, 110.5, 127.2, 183.9, 191.3,
    146.           184.8, 165.7, 102.4, 196.2, 179.1, 116.8, 175.2, 137.8, 100.9, 177.3,
    147.           122.5, 123.1, 131.7, 109.4, 167.2, 142.7, 140.7, 165.5, 148.6, 181.2,
    148.           108.7, 132.9, 161.9, 192.1, 134.5, 149.4, 183.9, 124.4, 114.4, 121.7,
    149.           249.6, 224.3, 199.3, 151.4, 112.4, 213.5, 265.3, 239.5, 294.6, 284.4,
    150.           279.2, 273.7, 233.7, 290.1, 228.2, 269.3, 208.4, 224.6, 235.1, 222.5,
    151.           225.7, 257.2, 238.1, 262.5, 229.6, 269.7, 283.9, 236.2, 260.8, 255.2,
    152.           258.1, 219.5, 292.4, 264.8, 251.7, 225.9, 206.5, 203.3, 258.2, 200.7,
    153.           237.2, 208.1, 262.7, 292.8, 249.2, 242.6, 284.4, 246.7, 275.9, 274.5,
    154.           234.2
    155.         ]
    156.       }]
    157.     };
    158.  
    159.     zingchart.render({
    160.       id: 'myChart',
    161.       data: chartConfig,
    162.       height: 400,
    163.       width: '100%'
    164.     });
    165.   </script>
    166. </body>
    167.  
    168. </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.           offsetY: 40,
    44.           offsetX: 20,
    45.           callout: true,
    46.           calloutHeight: 10,
    47.           calloutPosition: 'top',
    48.           calloutWidth: 0,
    49.           calloutTip: {
    50.             type: 'circle',
    51.             backgroundColor: '#fff',
    52.             borderWidth: 2,
    53.             borderColor: '#f60',
    54.             offsetY: 35,
    55.             size: 5,
    56.           }
    57.         }
    58.       },
    59.       {
    60.         type: 'area',
    61.         range: [150, 300],
    62.         valueRange: true,
    63.         backgroundColor: 'red',
    64.         label: {
    65.           text: 'Area Marker',
    66.  
    67.           alpha: 1,
    68.           angle: 0,
    69.           backgroundColor: '#ffe6e6',
    70.           borderColor: 'red',
    71.           borderRadius: '3px',
    72.           borderWidth: 1,
    73.           fontColor: 'red',
    74.           fontFamily: 'Courier',
    75.           fontSize: 10,
    76.           fontStyle: 'normal',
    77.           fontWeight: 'normal',
    78.           lineStyle: 'solid',
    79.           padding: 5,
    80.           textAlign: 'left',
    81.           textAlpha: 1,
    82.           width: '100%',
    83.           offsetY: -30,
    84.           callout: true,
    85.           calloutHeight: 15,
    86.           calloutPosition: 'bottom',
    87.           calloutWidth: 0,
    88.           calloutTip: {
    89.             type: 'circle',
    90.             backgroundColor: '#fff',
    91.             borderWidth: 2,
    92.             borderColor: '#f60',
    93.             offsetY: -25,
    94.             size: 5,
    95.           },
    96.         }
    97.       }
    98.     ]
    99.   },
    100.   plot: {
    101.     lineWidth: 2,
    102.     lineColor: '#3399ff',
    103.     marker: {
    104.       size: 3,
    105.       backgroundColor: '#ccccff #00ff00',
    106.       borderWidth: 1,
    107.       borderColor: '#3399ff'
    108.     },
    109.     tooltip: {
    110.       visible: false
    111.     }
    112.   },
    113.   crosshairX: {
    114.     plotLabel: {
    115.       text: '%v'
    116.     },
    117.     scaleLabel: {
    118.       visible: false
    119.     }
    120.   },
    121.   crosshairY: {
    122.     type: 'multiple',
    123.     scaleLabel: {
    124.       visible: false
    125.     }
    126.   },
    127.   series: [{
    128.     values: [
    129.       138.2, 196.3, 153.6, 127.4, 114.1, 181.4, 131.1, 170.9, 154.4, 105.2,
    130.       136.3, 180.4, 150.5, 135.3, 130.5, 164.3, 110.5, 127.2, 183.9, 191.3,
    131.       184.8, 165.7, 102.4, 196.2, 179.1, 116.8, 175.2, 137.8, 100.9, 177.3,
    132.       122.5, 123.1, 131.7, 109.4, 167.2, 142.7, 140.7, 165.5, 148.6, 181.2,
    133.       108.7, 132.9, 161.9, 192.1, 134.5, 149.4, 183.9, 124.4, 114.4, 121.7,
    134.       249.6, 224.3, 199.3, 151.4, 112.4, 213.5, 265.3, 239.5, 294.6, 284.4,
    135.       279.2, 273.7, 233.7, 290.1, 228.2, 269.3, 208.4, 224.6, 235.1, 222.5,
    136.       225.7, 257.2, 238.1, 262.5, 229.6, 269.7, 283.9, 236.2, 260.8, 255.2,
    137.       258.1, 219.5, 292.4, 264.8, 251.7, 225.9, 206.5, 203.3, 258.2, 200.7,
    138.       237.2, 208.1, 262.7, 292.8, 249.2, 242.6, 284.4, 246.7, 275.9, 274.5,
    139.       234.2
    140.     ]
    141.   }]
    142. };
    143.  
    144. zingchart.render({
    145.   id: 'myChart',
    146.   data: chartConfig,
    147.   height: 400,
    148.   width: '100%'
    149. });