- <!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>
- <button id='displayContextMenu'>Display Menu</button>
- <script>
- ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
- var myConfig = {
- gui: {
- contextMenu: {
- backgroundColor: 'none',
- item: {
- backgroundColor: "#009688",
- fontColor: "#FFF",
- hoverState: {
- backgroundColor: "#00BFA5",
- fontColor: "#FFF"
- }
- }
- }
- },
- "graphset": [{
- "type": "scatter",
- "title": {
- "text": "Context Menu Styling"
- },
- "series": [{
- "values": [69, 68, 54, 48, 70, 74, 98, 70, 72, 68, 49, 69],
- "text": "Apple"
- },
- {
- "values": [51, 53, 47, 60, 48, 52, 75, 52, 55, 47, 60, 48],
- "text": "Microsoft"
- },
- {
- "values": [42, 43, 30, 40, 31, 48, 55, 46, 48, 32, 38, 38],
- "text": "Oracle"
- },
- {
- "values": [25, 15, 26, 21, 24, 26, 33, 25, 15, 25, 22, 24],
- "text": "Dell"
- }
- ]
- }]
- };
-
- zingchart.render({
- id: 'myChart',
- data: myConfig,
- height: 400,
- width: '100%'
- });
-
- document.getElementById('displayContextMenu').addEventListener('click', function(p) {
- zingchart.exec('myChart', 'showmenu');
- });
- </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>
- <button id='displayContextMenu'>Display Menu</button>
- </body>
-
- </html>
- var myConfig = {
- gui: {
- contextMenu: {
- backgroundColor: 'none',
- item: {
- backgroundColor: "#009688",
- fontColor: "#FFF",
- hoverState: {
- backgroundColor: "#00BFA5",
- fontColor: "#FFF"
- }
- }
- }
- },
- "graphset": [{
- "type": "scatter",
- "title": {
- "text": "Context Menu Styling"
- },
- "series": [{
- "values": [69, 68, 54, 48, 70, 74, 98, 70, 72, 68, 49, 69],
- "text": "Apple"
- },
- {
- "values": [51, 53, 47, 60, 48, 52, 75, 52, 55, 47, 60, 48],
- "text": "Microsoft"
- },
- {
- "values": [42, 43, 30, 40, 31, 48, 55, 46, 48, 32, 38, 38],
- "text": "Oracle"
- },
- {
- "values": [25, 15, 26, 21, 24, 26, 33, 25, 15, 25, 22, 24],
- "text": "Dell"
- }
- ]
- }]
- };
-
- zingchart.render({
- id: 'myChart',
- data: myConfig,
- height: 400,
- width: '100%'
- });
-
- document.getElementById('displayContextMenu').addEventListener('click', function(p) {
- zingchart.exec('myChart', 'showmenu');
- });