• 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.     window.zingAlert = function() {
    24.       window.alert("ZingChart is great for making interactive and stylish charts!")
    25.     }
    26.  
    27.     let chartConfig = {
    28.       gui: {
    29.         contextMenu: {
    30.           customItems: [{
    31.             text: 'Show Alert',
    32.             function: 'zingAlert()',
    33.             id: 'showAlert'
    34.           }]
    35.         },
    36.         behaviors: [{
    37.           id: 'showAlert',
    38.           enabled: 'all'
    39.         }]
    40.       },
    41.       graphset: [{
    42.         type: 'scatter',
    43.         title: {
    44.           text: 'Custom Context Menu Items'
    45.         },
    46.         subtitle: {
    47.           text: 'Right-click to access the context menu.',
    48.           fontWeight: 'normal'
    49.         },
    50.         scaleX: {
    51.           guide: {
    52.             visible: false
    53.           }
    54.         },
    55.         scaleY: {
    56.           values: '0:100:20',
    57.           guide: {
    58.             lineStyle: 'dotted'
    59.           }
    60.         },
    61.         series: [{
    62.             values: [
    63.               [1, 9],
    64.               [2, 15],
    65.               [3, 21],
    66.               [4, 30],
    67.               [5, 40],
    68.               [6, 59],
    69.               [7, 60],
    70.               [8, 75],
    71.               [9, 81],
    72.               [10, 99]
    73.             ]
    74.           },
    75.           {
    76.             values: [
    77.               [0.9, 3],
    78.               [2.1, 13],
    79.               [3.5, 25],
    80.               [4.9, 35],
    81.               [5.3, 41],
    82.               [6.5, 57],
    83.               [7.1, 61],
    84.               [8.7, 70],
    85.               [9.2, 82],
    86.               [9.9, 95]
    87.             ]
    88.           },
    89.           {
    90.             values: [
    91.               [0.1, 9],
    92.               [1.8, 21],
    93.               [1.9, 29],
    94.               [4.1, 33],
    95.               [4.5, 39],
    96.               [6.9, 51],
    97.               [7.4, 64],
    98.               [8.9, 70],
    99.               [9, 75],
    100.               [9.3, 93]
    101.             ]
    102.           },
    103.           {
    104.             values: [
    105.               [0.3, 11],
    106.               [0.9, 15],
    107.               [1.1, 24],
    108.               [2.3, 29],
    109.               [2.9, 30],
    110.               [3.3, 35],
    111.               [5.6, 67],
    112.               [6.9, 70],
    113.               [7.3, 71],
    114.               [8.9, 90]
    115.             ]
    116.           },
    117.           {
    118.             values: [
    119.               [0.5, 5],
    120.               [1.9, 5],
    121.               [2.5, 10],
    122.               [3.1, 30],
    123.               [6.5, 45],
    124.               [6.9, 74],
    125.               [7.2, 50],
    126.               [7.8, 56],
    127.               [8, 61],
    128.               [8.5, 71]
    129.             ]
    130.           }
    131.         ]
    132.       }]
    133.     };
    134.  
    135.     zingchart.render({
    136.       id: 'myChart',
    137.       data: chartConfig,
    138.       height: 400,
    139.       width: '100%'
    140.     });
    141.   </script>
    142. </body>
    143.  
    144. </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. window.zingAlert = function() {
    2.   window.alert("ZingChart is great for making interactive and stylish charts!")
    3. }
    4.  
    5. let chartConfig = {
    6.   gui: {
    7.     contextMenu: {
    8.       customItems: [{
    9.         text: 'Show Alert',
    10.         function: 'zingAlert()',
    11.         id: 'showAlert'
    12.       }]
    13.     },
    14.     behaviors: [{
    15.       id: 'showAlert',
    16.       enabled: 'all'
    17.     }]
    18.   },
    19.   graphset: [{
    20.     type: 'scatter',
    21.     title: {
    22.       text: 'Custom Context Menu Items'
    23.     },
    24.     subtitle: {
    25.       text: 'Right-click to access the context menu.',
    26.       fontWeight: 'normal'
    27.     },
    28.     scaleX: {
    29.       guide: {
    30.         visible: false
    31.       }
    32.     },
    33.     scaleY: {
    34.       values: '0:100:20',
    35.       guide: {
    36.         lineStyle: 'dotted'
    37.       }
    38.     },
    39.     series: [{
    40.         values: [
    41.           [1, 9],
    42.           [2, 15],
    43.           [3, 21],
    44.           [4, 30],
    45.           [5, 40],
    46.           [6, 59],
    47.           [7, 60],
    48.           [8, 75],
    49.           [9, 81],
    50.           [10, 99]
    51.         ]
    52.       },
    53.       {
    54.         values: [
    55.           [0.9, 3],
    56.           [2.1, 13],
    57.           [3.5, 25],
    58.           [4.9, 35],
    59.           [5.3, 41],
    60.           [6.5, 57],
    61.           [7.1, 61],
    62.           [8.7, 70],
    63.           [9.2, 82],
    64.           [9.9, 95]
    65.         ]
    66.       },
    67.       {
    68.         values: [
    69.           [0.1, 9],
    70.           [1.8, 21],
    71.           [1.9, 29],
    72.           [4.1, 33],
    73.           [4.5, 39],
    74.           [6.9, 51],
    75.           [7.4, 64],
    76.           [8.9, 70],
    77.           [9, 75],
    78.           [9.3, 93]
    79.         ]
    80.       },
    81.       {
    82.         values: [
    83.           [0.3, 11],
    84.           [0.9, 15],
    85.           [1.1, 24],
    86.           [2.3, 29],
    87.           [2.9, 30],
    88.           [3.3, 35],
    89.           [5.6, 67],
    90.           [6.9, 70],
    91.           [7.3, 71],
    92.           [8.9, 90]
    93.         ]
    94.       },
    95.       {
    96.         values: [
    97.           [0.5, 5],
    98.           [1.9, 5],
    99.           [2.5, 10],
    100.           [3.1, 30],
    101.           [6.5, 45],
    102.           [6.9, 74],
    103.           [7.2, 50],
    104.           [7.8, 56],
    105.           [8, 61],
    106.           [8.5, 71]
    107.         ]
    108.       }
    109.     ]
    110.   }]
    111. };
    112.  
    113. zingchart.render({
    114.   id: 'myChart',
    115.   data: chartConfig,
    116.   height: 400,
    117.   width: '100%'
    118. });