• 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.         contextMenu: {
    26.           button: {
    27.             visible: true
    28.           },
    29.           gear: {
    30.             backgroundColor: 'red',
    31.             alpha: 1
    32.           }
    33.         }
    34.       },
    35.       graphset: [{
    36.         type: 'area',
    37.         title: {
    38.           text: 'Context Menu Button Styling'
    39.         },
    40.         subtitle: {
    41.           text: 'Click the hamburger icon.',
    42.           fontWeight: 'normal'
    43.         },
    44.         plot: {
    45.           aspect: 'spline',
    46.           marker: {
    47.             size: 3
    48.           }
    49.         },
    50.         scaleX: {
    51.  
    52.         },
    53.         scaleY: {
    54.           values: '0:100:20',
    55.           guide: {
    56.             lineStyle: 'dotted'
    57.           }
    58.         },
    59.         series: [{
    60.             values: [69, 68, 54, 48, 70, 74, 98, 70, 72, 68, 49, 69],
    61.             lineColor: '#3399ff',
    62.             backgroundColor: '#3399ff',
    63.             marker: {
    64.               backgroundColor: '#3399ff'
    65.             }
    66.           },
    67.           {
    68.             values: [51, 53, 47, 60, 48, 52, 75, 52, 55, 47, 60, 48],
    69.             lineColor: '#3399ff',
    70.             backgroundColor: '#3399ff',
    71.             marker: {
    72.               backgroundColor: '#3399ff'
    73.             }
    74.           },
    75.           {
    76.             values: [59, 65, 30, 40, 31, 48, 55, 46, 48, 32, 38, 38],
    77.             lineColor: '#3399ff',
    78.             backgroundColor: '#3399ff',
    79.             marker: {
    80.               backgroundColor: '#3399ff'
    81.             }
    82.           }
    83.         ]
    84.       }]
    85.     };
    86.  
    87.     zingchart.render({
    88.       id: 'myChart',
    89.       data: chartConfig,
    90.       height: 400,
    91.       width: '100%'
    92.     });
    93.   </script>
    94. </body>
    95.  
    96. </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.     contextMenu: {
    4.       button: {
    5.         visible: true
    6.       },
    7.       gear: {
    8.         backgroundColor: 'red',
    9.         alpha: 1
    10.       }
    11.     }
    12.   },
    13.   graphset: [{
    14.     type: 'area',
    15.     title: {
    16.       text: 'Context Menu Button Styling'
    17.     },
    18.     subtitle: {
    19.       text: 'Click the hamburger icon.',
    20.       fontWeight: 'normal'
    21.     },
    22.     plot: {
    23.       aspect: 'spline',
    24.       marker: {
    25.         size: 3
    26.       }
    27.     },
    28.     scaleX: {
    29.  
    30.     },
    31.     scaleY: {
    32.       values: '0:100:20',
    33.       guide: {
    34.         lineStyle: 'dotted'
    35.       }
    36.     },
    37.     series: [{
    38.         values: [69, 68, 54, 48, 70, 74, 98, 70, 72, 68, 49, 69],
    39.         lineColor: '#3399ff',
    40.         backgroundColor: '#3399ff',
    41.         marker: {
    42.           backgroundColor: '#3399ff'
    43.         }
    44.       },
    45.       {
    46.         values: [51, 53, 47, 60, 48, 52, 75, 52, 55, 47, 60, 48],
    47.         lineColor: '#3399ff',
    48.         backgroundColor: '#3399ff',
    49.         marker: {
    50.           backgroundColor: '#3399ff'
    51.         }
    52.       },
    53.       {
    54.         values: [59, 65, 30, 40, 31, 48, 55, 46, 48, 32, 38, 38],
    55.         lineColor: '#3399ff',
    56.         backgroundColor: '#3399ff',
    57.         marker: {
    58.           backgroundColor: '#3399ff'
    59.         }
    60.       }
    61.     ]
    62.   }]
    63. };
    64.  
    65. zingchart.render({
    66.   id: 'myChart',
    67.   data: chartConfig,
    68.   height: 400,
    69.   width: '100%'
    70. });