• 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.       arrows: [{
    19.           backgroundColor: "red",
    20.           alpha: 0.7,
    21.           direction: "top", //location of node in relation to end of arrow
    22.           length: 75, //length of arrow
    23.           topState: {
    24.             backgroundColor: 'blue',
    25.             offsetX: 15,
    26.             offsetY: 15,
    27.           },
    28.           to: { //either to or from are required, but not both
    29.             hook: "node:plot=0,index=4" //hooks or x,y postions can be used
    30.           },
    31.           label: {
    32.             text: "Look Here",
    33.             bold: true,
    34.             backgroundColor: "none",
    35.             borderWidth: 0,
    36.             fontAngle: 90,
    37.             offsetX: -10,
    38.             offsetY: 8
    39.           }
    40.         },
    41.         {
    42.           backgroundColor: "green",
    43.           alpha: 0.2,
    44.           borderAlpha: 1,
    45.           from: {
    46.             hook: "node:plot=1,index=4"
    47.           },
    48.           to: {
    49.             hook: "node:plot=1,index=7"
    50.           }
    51.         }
    52.       ],
    53.       series: [{
    54.           "values": [182, 155, 161, 125, 95, 150, 140, 150, 173, 147, 208, 136]
    55.         },
    56.         {
    57.           "values": [243, 189, 213, 190, 267, 226, 245, 294, 220, 255, 107, 192]
    58.         },
    59.       ]
    60.     };
    61.  
    62.     zingchart.render({
    63.       id: 'myChart',
    64.       data: chartConfig,
    65.       height: 400,
    66.       width: '100%'
    67.     });
    68.   </script>
    69. </body>
    70.  
    71. </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.   arrows: [{
    4.       backgroundColor: "red",
    5.       alpha: 0.7,
    6.       direction: "top", //location of node in relation to end of arrow
    7.       length: 75, //length of arrow
    8.       topState: {
    9.         backgroundColor: 'blue',
    10.         offsetX: 15,
    11.         offsetY: 15,
    12.       },
    13.       to: { //either to or from are required, but not both
    14.         hook: "node:plot=0,index=4" //hooks or x,y postions can be used
    15.       },
    16.       label: {
    17.         text: "Look Here",
    18.         bold: true,
    19.         backgroundColor: "none",
    20.         borderWidth: 0,
    21.         fontAngle: 90,
    22.         offsetX: -10,
    23.         offsetY: 8
    24.       }
    25.     },
    26.     {
    27.       backgroundColor: "green",
    28.       alpha: 0.2,
    29.       borderAlpha: 1,
    30.       from: {
    31.         hook: "node:plot=1,index=4"
    32.       },
    33.       to: {
    34.         hook: "node:plot=1,index=7"
    35.       }
    36.     }
    37.   ],
    38.   series: [{
    39.       "values": [182, 155, 161, 125, 95, 150, 140, 150, 173, 147, 208, 136]
    40.     },
    41.     {
    42.       "values": [243, 189, 213, 190, 267, 226, 245, 294, 220, 255, 107, 192]
    43.     },
    44.   ]
    45. };
    46.  
    47. zingchart.render({
    48.   id: 'myChart',
    49.   data: chartConfig,
    50.   height: 400,
    51.   width: '100%'
    52. });