• 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. height: 100%;
    13. width: 100%;
    14. margin: 0;
    15. padding: 0;
    16. }
    17.  
    18. #myChart {
    19. height: 100%;
    20. width: 100%;
    21. min-height: 150px;
    22. }
    23. </style>
    24. </head>
    25.  
    26. <body>
    27. <div id="myChart"></div>
    28. <script>
    29. ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    30. var myConfig = {
    31. "graphset": [{
    32. "type": "rankflow",
    33. "options": {
    34. "global-ranking": false
    35. },
    36. "plotarea": {
    37. "margin": 20
    38. },
    39. "scale-x": {
    40. "labels": ["ON-TIME", "BAGGAGE", "PASSENGERS"],
    41. "values": ["ON-TIME", "BAGGAGE", "PASSENGERS"]
    42. },
    43. "series": [{
    44. "text": "Air West",
    45. "ranks": [3, 4, 1],
    46. "rank": 3
    47. },
    48. {
    49. "text": "Braniff",
    50. "ranks": [1, 1, 5],
    51. "rank": 1
    52. },
    53. {
    54. "text": "Capital",
    55. "ranks": [5, 2, 4],
    56. "rank": 4
    57. },
    58. {
    59. "text": "Eastern",
    60. "ranks": [2, 3, 2],
    61. "rank": 2
    62. },
    63. {
    64. "text": "Galaxy",
    65. "ranks": [4, 5, 3],
    66. "rank": 5
    67. }
    68. ]
    69. }]
    70. };
    71.  
    72. zingchart.render({
    73. id: 'myChart',
    74. data: myConfig,
    75. height: "100%",
    76. width: "100%"
    77. });
    78. </script>
    79. </body>
    80.  
    81. </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. height: 100%;
    4. width: 100%;
    5. margin: 0;
    6. padding: 0;
    7. }
    8.  
    9. #myChart {
    10. height: 100%;
    11. width: 100%;
    12. min-height: 150px;
    13. }
    1. var myConfig = {
    2. "graphset": [{
    3. "type": "rankflow",
    4. "options": {
    5. "global-ranking": false
    6. },
    7. "plotarea": {
    8. "margin": 20
    9. },
    10. "scale-x": {
    11. "labels": ["ON-TIME", "BAGGAGE", "PASSENGERS"],
    12. "values": ["ON-TIME", "BAGGAGE", "PASSENGERS"]
    13. },
    14. "series": [{
    15. "text": "Air West",
    16. "ranks": [3, 4, 1],
    17. "rank": 3
    18. },
    19. {
    20. "text": "Braniff",
    21. "ranks": [1, 1, 5],
    22. "rank": 1
    23. },
    24. {
    25. "text": "Capital",
    26. "ranks": [5, 2, 4],
    27. "rank": 4
    28. },
    29. {
    30. "text": "Eastern",
    31. "ranks": [2, 3, 2],
    32. "rank": 2
    33. },
    34. {
    35. "text": "Galaxy",
    36. "ranks": [4, 5, 3],
    37. "rank": 5
    38. }
    39. ]
    40. }]
    41. };
    42.  
    43. zingchart.render({
    44. id: 'myChart',
    45. data: myConfig,
    46. height: "100%",
    47. width: "100%"
    48. });