• 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. type: 'bar',
    18. plot: {
    19. selectionMode: 'plot'
    20. },
    21. series: [{
    22. values: [
    23. [1, 22],
    24. [1.5, 34],
    25. [2, 55],
    26. [2.5, 71],
    27. [3, 42],
    28. [3.5, 39],
    29. [4, 50],
    30. [4.5, 70]
    31. ],
    32. backgroundColor: '#5C6BC0',
    33. backgroundState: {
    34. backgroundColor: '#00BCD4 #B2EBF2'
    35. },
    36.  
    37. },
    38. {
    39. values: [
    40. [5.5, 35],
    41. [6, 42],
    42. [6.5, 67],
    43. [7, 89],
    44. [7.5, 25],
    45. [8, 34],
    46. [8.5, 67],
    47. [9, 85]
    48. ],
    49. backgroundColor: '#9FA8DA',
    50. backgroundState: {
    51. backgroundColor: '#F44336 #FFCDD2'
    52. }
    53. }
    54. ]
    55. };
    56.  
    57. zingchart.render({
    58. id: 'myChart',
    59. data: myConfig,
    60. height: 400,
    61. width: "100%"
    62. });
    63. </script>
    64. </body>
    65.  
    66. </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. type: 'bar',
    3. plot: {
    4. selectionMode: 'plot'
    5. },
    6. series: [{
    7. values: [
    8. [1, 22],
    9. [1.5, 34],
    10. [2, 55],
    11. [2.5, 71],
    12. [3, 42],
    13. [3.5, 39],
    14. [4, 50],
    15. [4.5, 70]
    16. ],
    17. backgroundColor: '#5C6BC0',
    18. backgroundState: {
    19. backgroundColor: '#00BCD4 #B2EBF2'
    20. },
    21.  
    22. },
    23. {
    24. values: [
    25. [5.5, 35],
    26. [6, 42],
    27. [6.5, 67],
    28. [7, 89],
    29. [7.5, 25],
    30. [8, 34],
    31. [8.5, 67],
    32. [9, 85]
    33. ],
    34. backgroundColor: '#9FA8DA',
    35. backgroundState: {
    36. backgroundColor: '#F44336 #FFCDD2'
    37. }
    38. }
    39. ]
    40. };
    41.  
    42. zingchart.render({
    43. id: 'myChart',
    44. data: myConfig,
    45. height: 400,
    46. width: "100%"
    47. });