• 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></style>
    10. </head>
    11.  
    12. <body>
    13. <div id='myChart'></div>
    14. <script>
    15. ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    16. var myConfig = {
    17. gui: {
    18. contextMenu: {
    19. button: {
    20. visible: true
    21. },
    22. gear: {
    23. type: 'hamburger',
    24. backgroundColor: 'red'
    25. }
    26. }
    27. },
    28. graphset: [{
    29. type: "bar",
    30. series: [{
    31. values: [25, 17, 19, 35, 12, 15, 35, 39]
    32. },
    33. {
    34. values: [30, 35, 41, 28, 26, 18, 38, 40]
    35. }
    36. ]
    37. }]
    38. };
    39.  
    40. zingchart.render({
    41. id: 'myChart',
    42. data: myConfig,
    43. height: 400,
    44. width: '100%'
    45. });
    46. </script>
    47. </body>
    48.  
    49. </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.  
    1. var myConfig = {
    2. gui: {
    3. contextMenu: {
    4. button: {
    5. visible: true
    6. },
    7. gear: {
    8. type: 'hamburger',
    9. backgroundColor: 'red'
    10. }
    11. }
    12. },
    13. graphset: [{
    14. type: "bar",
    15. series: [{
    16. values: [25, 17, 19, 35, 12, 15, 35, 39]
    17. },
    18. {
    19. values: [30, 35, 41, 28, 26, 18, 38, 40]
    20. }
    21. ]
    22. }]
    23. };
    24.  
    25. zingchart.render({
    26. id: 'myChart',
    27. data: myConfig,
    28. height: 400,
    29. width: '100%'
    30. });