• 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>
    10.     html,
    11.     body,
    12.     #myChart {
    13.       height: 100%;
    14.       width: 100%;
    15.     }
    16.   </style>
    17. </head>
    18.  
    19. <body>
    20.   <div id="myChart"></div>
    21.   <script>
    22.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    23.     let chartConfig = {
    24.       graphset: [{
    25.         type: 'mixed',
    26.         shapes: [{
    27.           id: 'custom-cm-button',
    28.           type: 'circle',
    29.           backgroundImage: 'https://www.zingchart.com/resources/heart.png',
    30.           backgroundRepeat: 'no-repeat',
    31.           size: 20,
    32.           backgroundColor: "pink",
    33.           borderWidth: 1,
    34.           borderColor: 'red',
    35.           x: 30,
    36.           y: 30,
    37.           cursor: 'hand'
    38.         }],
    39.         title: {
    40.           text: 'Custom Context Menu Button'
    41.         },
    42.         subtitle: {
    43.           text: 'Click the custom heart icon!',
    44.           fontWeight: 'normal'
    45.         },
    46.         plot: {
    47.           aspect: 'spline'
    48.         },
    49.         scaleX: {
    50.  
    51.         },
    52.         scaleY: {
    53.           values: '0:100:20',
    54.           guide: {
    55.             lineStyle: 'dotted'
    56.           }
    57.         },
    58.         series: [{
    59.             type: 'scatter',
    60.             values: [81, 71, 50, 73, 34, 33, 61, 73, 36, 48, 35, 61],
    61.             marker: {
    62.               size: 4,
    63.               backgroundColor: 'pink',
    64.               borderWidth: 1,
    65.               borderColor: 'red'
    66.             }
    67.           },
    68.           {
    69.             type: 'range',
    70.             values: [
    71.               [30, 69],
    72.               [31, 68],
    73.               [35, 54],
    74.               [48, 51],
    75.               [55, 70],
    76.               [61, 74],
    77.               [73, 98],
    78.               [70, 87],
    79.               [33, 76],
    80.               [51, 68],
    81.               [49, 79],
    82.               [69, 93]
    83.             ],
    84.             lineColor: '#009900',
    85.             backgroundColor: '#009900',
    86.             marker: {
    87.               visible: false
    88.             }
    89.           }
    90.         ]
    91.       }]
    92.     };
    93.  
    94.     zingchart.bind('myChart', 'shape_click', function(e) {
    95.       if (e.shapeid === 'custom-cm-button') {
    96.         zingchart.exec('myChart', 'showmenu', {
    97.           x: 55,
    98.           y: 35
    99.         });
    100.       }
    101.  
    102.     })
    103.  
    104.     zingchart.render({
    105.       id: 'myChart',
    106.       data: chartConfig,
    107.       height: 400,
    108.       width: '100%'
    109.     });
    110.   </script>
    111. </body>
    112.  
    113. </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. html,
    2. body,
    3. #myChart {
    4.   height: 100%;
    5.   width: 100%;
    6. }
    1. let chartConfig = {
    2.   graphset: [{
    3.     type: 'mixed',
    4.     shapes: [{
    5.       id: 'custom-cm-button',
    6.       type: 'circle',
    7.       backgroundImage: 'https://www.zingchart.com/resources/heart.png',
    8.       backgroundRepeat: 'no-repeat',
    9.       size: 20,
    10.       backgroundColor: "pink",
    11.       borderWidth: 1,
    12.       borderColor: 'red',
    13.       x: 30,
    14.       y: 30,
    15.       cursor: 'hand'
    16.     }],
    17.     title: {
    18.       text: 'Custom Context Menu Button'
    19.     },
    20.     subtitle: {
    21.       text: 'Click the custom heart icon!',
    22.       fontWeight: 'normal'
    23.     },
    24.     plot: {
    25.       aspect: 'spline'
    26.     },
    27.     scaleX: {
    28.  
    29.     },
    30.     scaleY: {
    31.       values: '0:100:20',
    32.       guide: {
    33.         lineStyle: 'dotted'
    34.       }
    35.     },
    36.     series: [{
    37.         type: 'scatter',
    38.         values: [81, 71, 50, 73, 34, 33, 61, 73, 36, 48, 35, 61],
    39.         marker: {
    40.           size: 4,
    41.           backgroundColor: 'pink',
    42.           borderWidth: 1,
    43.           borderColor: 'red'
    44.         }
    45.       },
    46.       {
    47.         type: 'range',
    48.         values: [
    49.           [30, 69],
    50.           [31, 68],
    51.           [35, 54],
    52.           [48, 51],
    53.           [55, 70],
    54.           [61, 74],
    55.           [73, 98],
    56.           [70, 87],
    57.           [33, 76],
    58.           [51, 68],
    59.           [49, 79],
    60.           [69, 93]
    61.         ],
    62.         lineColor: '#009900',
    63.         backgroundColor: '#009900',
    64.         marker: {
    65.           visible: false
    66.         }
    67.       }
    68.     ]
    69.   }]
    70. };
    71.  
    72. zingchart.bind('myChart', 'shape_click', function(e) {
    73.   if (e.shapeid === 'custom-cm-button') {
    74.     zingchart.exec('myChart', 'showmenu', {
    75.       x: 55,
    76.       y: 35
    77.     });
    78.   }
    79.  
    80. })
    81.  
    82. zingchart.render({
    83.   id: 'myChart',
    84.   data: chartConfig,
    85.   height: 400,
    86.   width: '100%'
    87. });