• 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.         markers: [{
    23.             type: 'line',
    24.             range: [10],
    25.             valueRange: true,
    26.             lineColor: 'red',
    27.             lineWidth: 2,
    28.             lineStyle: 'solid',
    29.             alpha: 1,
    30.             label: {
    31.               text: 'Line Marker',
    32.  
    33.               alpha: 1,
    34.               angle: 0,
    35.               backgroundColor: '#ffe6e6',
    36.               borderColor: 'red',
    37.               borderRadius: '3px',
    38.               borderWidth: 1,
    39.               fontColor: 'red',
    40.               fontFamily: 'Courier',
    41.               fontSize: 10,
    42.               fontStyle: 'normal',
    43.               fontWeight: 'normal',
    44.               lineStyle: 'solid',
    45.               padding: 5,
    46.               textAlign: 'left',
    47.               textAlpha: 1,
    48.               width: '100%',
    49.               offsetY: -10,
    50.               offsetX: 20,
    51.               callout: true,
    52.               calloutHeight: 0,
    53.               calloutPosition: 'left',
    54.               calloutWidth: 15,
    55.               calloutTip: {
    56.                 type: 'circle',
    57.                 backgroundColor: '#fff',
    58.                 borderWidth: 2,
    59.                 borderColor: '#f60',
    60.                 offsetX: 15,
    61.                 size: 5,
    62.               },
    63.             }
    64.           },
    65.           {
    66.             type: 'area',
    67.             range: [35, 90],
    68.             valueRange: true,
    69.             backgroundColor: 'red',
    70.             label: {
    71.               text: 'Area Marker',
    72.  
    73.               alpha: 1,
    74.               angle: 0,
    75.               backgroundColor: '#ffe6e6',
    76.               borderColor: 'red',
    77.               borderRadius: '3px',
    78.               borderWidth: 1,
    79.               fontColor: 'red',
    80.               fontFamily: 'Courier',
    81.               fontSize: 10,
    82.               fontStyle: 'normal',
    83.               fontWeight: 'normal',
    84.               lineStyle: 'solid',
    85.               padding: 5,
    86.               textAlign: 'left',
    87.               textAlpha: 1,
    88.               width: '100%',
    89.               offsetY: -30,
    90.               callout: true,
    91.               calloutHeight: 15,
    92.               calloutPosition: 'bottom',
    93.               calloutWidth: 0,
    94.               calloutTip: {
    95.                 type: 'circle',
    96.                 backgroundColor: '#fff',
    97.                 borderWidth: 2,
    98.                 borderColor: '#f60',
    99.                 offsetY: -25,
    100.                 size: 5,
    101.               },
    102.             }
    103.           }
    104.         ]
    105.       },
    106.       scaleY: {
    107.         values: '50:350:50',
    108.         guide: {
    109.           lineStyle: 'dotted'
    110.         },
    111.         item: {
    112.           fontSize: 10
    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.     markers: [{
    8.         type: 'line',
    9.         range: [10],
    10.         valueRange: true,
    11.         lineColor: 'red',
    12.         lineWidth: 2,
    13.         lineStyle: 'solid',
    14.         alpha: 1,
    15.         label: {
    16.           text: 'Line Marker',
    17.  
    18.           alpha: 1,
    19.           angle: 0,
    20.           backgroundColor: '#ffe6e6',
    21.           borderColor: 'red',
    22.           borderRadius: '3px',
    23.           borderWidth: 1,
    24.           fontColor: 'red',
    25.           fontFamily: 'Courier',
    26.           fontSize: 10,
    27.           fontStyle: 'normal',
    28.           fontWeight: 'normal',
    29.           lineStyle: 'solid',
    30.           padding: 5,
    31.           textAlign: 'left',
    32.           textAlpha: 1,
    33.           width: '100%',
    34.           offsetY: -10,
    35.           offsetX: 20,
    36.           callout: true,
    37.           calloutHeight: 0,
    38.           calloutPosition: 'left',
    39.           calloutWidth: 15,
    40.           calloutTip: {
    41.             type: 'circle',
    42.             backgroundColor: '#fff',
    43.             borderWidth: 2,
    44.             borderColor: '#f60',
    45.             offsetX: 15,
    46.             size: 5,
    47.           },
    48.         }
    49.       },
    50.       {
    51.         type: 'area',
    52.         range: [35, 90],
    53.         valueRange: true,
    54.         backgroundColor: 'red',
    55.         label: {
    56.           text: 'Area Marker',
    57.  
    58.           alpha: 1,
    59.           angle: 0,
    60.           backgroundColor: '#ffe6e6',
    61.           borderColor: 'red',
    62.           borderRadius: '3px',
    63.           borderWidth: 1,
    64.           fontColor: 'red',
    65.           fontFamily: 'Courier',
    66.           fontSize: 10,
    67.           fontStyle: 'normal',
    68.           fontWeight: 'normal',
    69.           lineStyle: 'solid',
    70.           padding: 5,
    71.           textAlign: 'left',
    72.           textAlpha: 1,
    73.           width: '100%',
    74.           offsetY: -30,
    75.           callout: true,
    76.           calloutHeight: 15,
    77.           calloutPosition: 'bottom',
    78.           calloutWidth: 0,
    79.           calloutTip: {
    80.             type: 'circle',
    81.             backgroundColor: '#fff',
    82.             borderWidth: 2,
    83.             borderColor: '#f60',
    84.             offsetY: -25,
    85.             size: 5,
    86.           },
    87.         }
    88.       }
    89.     ]
    90.   },
    91.   scaleY: {
    92.     values: '50:350:50',
    93.     guide: {
    94.       lineStyle: 'dotted'
    95.     },
    96.     item: {
    97.       fontSize: 10
    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. });