• 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.       gui: {
    25.         behaviors: [{
    26.             id: 'DownloadPDF',
    27.             enabled: 'none'
    28.           },
    29.           {
    30.             id: 'CrosshairHide',
    31.             enabled: 'all'
    32.           }
    33.         ]
    34.       },
    35.       graphset: [{
    36.         type: 'mixed',
    37.         title: {
    38.           text: 'Enabling/Disabling Context Menu Items'
    39.         },
    40.         subtitle: {
    41.           text: 'Right-click to access the context menu.',
    42.           fontWeight: 'normal'
    43.         },
    44.         crosshairX: {
    45.  
    46.         },
    47.         scaleY: {
    48.           values: '0:100:20',
    49.           guide: {
    50.             lineStyle: 'dotted'
    51.           }
    52.         },
    53.         series: [{
    54.             type: 'bar',
    55.             values: [69, 68, 54, 48, 70, 74, 98, 70, 72, 68, 49, 69],
    56.             backgroundColor: '#009900 #003300',
    57.             hoverState: {
    58.               visible: false
    59.             }
    60.           },
    61.           {
    62.             type: 'line',
    63.             values: [51, 53, 47, 60, 48, 52, 75, 52, 55, 47, 60, 48],
    64.             aspect: 'spline',
    65.             lineColor: '#660066',
    66.             marker: {
    67.               backgroundColor: '#660066',
    68.               borderColor: 'none'
    69.             }
    70.           }
    71.         ]
    72.       }]
    73.     };
    74.  
    75.     zingchart.render({
    76.       id: 'myChart',
    77.       data: chartConfig,
    78.       height: 400,
    79.       width: '100%'
    80.     });
    81.   </script>
    82. </body>
    83.  
    84. </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.   gui: {
    3.     behaviors: [{
    4.         id: 'DownloadPDF',
    5.         enabled: 'none'
    6.       },
    7.       {
    8.         id: 'CrosshairHide',
    9.         enabled: 'all'
    10.       }
    11.     ]
    12.   },
    13.   graphset: [{
    14.     type: 'mixed',
    15.     title: {
    16.       text: 'Enabling/Disabling Context Menu Items'
    17.     },
    18.     subtitle: {
    19.       text: 'Right-click to access the context menu.',
    20.       fontWeight: 'normal'
    21.     },
    22.     crosshairX: {
    23.  
    24.     },
    25.     scaleY: {
    26.       values: '0:100:20',
    27.       guide: {
    28.         lineStyle: 'dotted'
    29.       }
    30.     },
    31.     series: [{
    32.         type: 'bar',
    33.         values: [69, 68, 54, 48, 70, 74, 98, 70, 72, 68, 49, 69],
    34.         backgroundColor: '#009900 #003300',
    35.         hoverState: {
    36.           visible: false
    37.         }
    38.       },
    39.       {
    40.         type: 'line',
    41.         values: [51, 53, 47, 60, 48, 52, 75, 52, 55, 47, 60, 48],
    42.         aspect: 'spline',
    43.         lineColor: '#660066',
    44.         marker: {
    45.           backgroundColor: '#660066',
    46.           borderColor: 'none'
    47.         }
    48.       }
    49.     ]
    50.   }]
    51. };
    52.  
    53. zingchart.render({
    54.   id: 'myChart',
    55.   data: chartConfig,
    56.   height: 400,
    57.   width: '100%'
    58. });