• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
    
      <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
      <style></style>
    </head>
    
    <body>
      <div id='myChart'></div>
      <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    
        var myConfig = {
          gui: {
            contextMenu: {
              visible: false
            }
          },
          graphset: [{
            type: "bar",
            title: {
              text: "showmenu API"
            },
            series: [{
              values: [35, 42, 67, 89, 25, 34, 67, 85]
            }],
            shapes: [{
              type: 'square',
              size: 40,
              backgroundColor: "red",
              x: 100,
              cursor: "pointer",
              label: {
                text: 'Display CM',
                y: 20
              }
            }]
          }]
    
        };
    
        zingchart.bind('myChart', 'shape_click', function() {
          zingchart.exec('myChart', 'showmenu', {
            x: 100,
            y: 100
          });
        })
    
        zingchart.render({
          id: 'myChart',
          data: myConfig,
          height: 400,
          width: 600,
          output: 'canvas'
        });
      </script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
    
      <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    </head>
    
    <body>
      <div id='myChart'></div>
    </body>
    
    </html>
    
          
    var myConfig = {
      gui: {
        contextMenu: {
          visible: false
        }
      },
      graphset: [{
        type: "bar",
        title: {
          text: "showmenu API"
        },
        series: [{
          values: [35, 42, 67, 89, 25, 34, 67, 85]
        }],
        shapes: [{
          type: 'square',
          size: 40,
          backgroundColor: "red",
          x: 100,
          cursor: "pointer",
          label: {
            text: 'Display CM',
            y: 20
          }
        }]
      }]
    
    };
    
    zingchart.bind('myChart', 'shape_click', function() {
      zingchart.exec('myChart', 'showmenu', {
        x: 100,
        y: 100
      });
    })
    
    zingchart.render({
      id: 'myChart',
      data: myConfig,
      height: 400,
      width: 600,
      output: 'canvas'
    });