• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5. <meta charset="utf-8">
    6. <title>ZingSoft Demo</title>
    7. <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8. <style>
    9. html,
    10. body {
    11. margin: 0;
    12. padding: 0;
    13. width: 100%;
    14. height: 100%;
    15. }
    16.  
    17. .chart--container {
    18. min-height: 150px;
    19. width: 100%;
    20. height: 100%;
    21. }
    22.  
    23. .zc-ref {
    24. display: none;
    25. }
    26. </style>
    27. </head>
    28.  
    29. <body>
    30. <label for="timezone">Adjust UTC Offset</label>
    31. <input type="number" min="-12" max="14" value="9" id="timezone">
    32. <!-- CHART CONTAINER -->
    33. <div id="myChart" class="chart--container">
    34. <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
    35. </div>
    36. <script>
    37. ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    38. window.addEventListener('load', function() {
    39. var origDates = [{
    40. "dateUTCString": "Tue Oct 21 2014 21:17:02 GMT+0000 (UTC)"
    41. },
    42. {
    43. "dateUTCString": "Tue Jun 10 2014 03:06:38 GMT+0000 (UTC)"
    44. },
    45. {
    46. "dateUTCString": "Tue Nov 04 2014 10:46:15 GMT+0000 (UTC)"
    47. },
    48. {
    49. "dateUTCString": "Sat May 17 2014 04:51:23 GMT+0000 (UTC)"
    50. },
    51. {
    52. "dateUTCString": "Fri Aug 07 2015 02:26:57 GMT+0000 (UTC)"
    53. },
    54. {
    55. "dateUTCString": "Mon Apr 13 2015 07:07:44 GMT+0000 (UTC)"
    56. },
    57. {
    58. "dateUTCString": "Mon May 19 2014 22:47:56 GMT+0000 (UTC)"
    59. },
    60. {
    61. "dateUTCString": "Sat Jun 13 2015 00:38:36 GMT+0000 (UTC)"
    62. },
    63. {
    64. "dateUTCString": "Sat Feb 07 2015 23:55:14 GMT+0000 (UTC)"
    65. },
    66. {
    67. "dateUTCString": "Thu May 15 2014 19:44:57 GMT+0000 (UTC)"
    68. }
    69. ];
    70.  
    71. var newDates = [];
    72. for (var n = 0; n < origDates.length; n++) {
    73. var currentDate = new Date(origDates[n].dateUTCString); // Create a Date instance
    74. newDates.push(currentDate.getTime()); // getTime() for Unix time in ms
    75. }
    76. newDates.sort(); // Sort the dates chronologically
    77.  
    78. var myConfig = {
    79. type: "bar",
    80. utc: true,
    81. timezone: 9,
    82. title: {
    83. text: 'UTC Offset (9)'
    84. },
    85. plot: {
    86. valueBox: {
    87. text: "%kt",
    88. color: "#555",
    89. fontWeight: "none"
    90. }
    91. },
    92. scaleX: {
    93. values: newDates,
    94. transform: {
    95. type: "date",
    96. all: "%m/%d/%y\n%h:%i:%s"
    97. }
    98. },
    99. series: [{
    100. values: [35, 42, 67, 89, 25, 34, 67, 85, 43, 34]
    101. }]
    102. };
    103.  
    104. zingchart.render({
    105. id: 'myChart',
    106. data: myConfig,
    107. height: 400,
    108. width: '100%'
    109. });
    110.  
    111. timezone.addEventListener('change', function(e) {
    112. let timezoneValue = e.target.value;
    113. console.log(timezoneValue)
    114. zingchart.exec('myChart', 'modify', {
    115. data: {
    116. timezone: timezoneValue,
    117. title: {
    118. text: `UTC Offset (${timezoneValue})`
    119. },
    120. }
    121. });
    122. });
    123. });
    124. </script>
    125. </body>
    126.  
    127. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5. <meta charset="utf-8">
    6. <title>ZingSoft Demo</title>
    7. <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8. </head>
    9.  
    10. <body>
    11. <label for="timezone">Adjust UTC Offset</label>
    12. <input type="number" min="-12" max="14" value="9" id="timezone">
    13. <!-- CHART CONTAINER -->
    14. <div id="myChart" class="chart--container">
    15. <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
    16. </div>
    17. </body>
    18.  
    19. </html>
    1. html,
    2. body {
    3. margin: 0;
    4. padding: 0;
    5. width: 100%;
    6. height: 100%;
    7. }
    8.  
    9. .chart--container {
    10. min-height: 150px;
    11. width: 100%;
    12. height: 100%;
    13. }
    14.  
    15. .zc-ref {
    16. display: none;
    17. }
    1. window.addEventListener('load', function() {
    2. var origDates = [{
    3. "dateUTCString": "Tue Oct 21 2014 21:17:02 GMT+0000 (UTC)"
    4. },
    5. {
    6. "dateUTCString": "Tue Jun 10 2014 03:06:38 GMT+0000 (UTC)"
    7. },
    8. {
    9. "dateUTCString": "Tue Nov 04 2014 10:46:15 GMT+0000 (UTC)"
    10. },
    11. {
    12. "dateUTCString": "Sat May 17 2014 04:51:23 GMT+0000 (UTC)"
    13. },
    14. {
    15. "dateUTCString": "Fri Aug 07 2015 02:26:57 GMT+0000 (UTC)"
    16. },
    17. {
    18. "dateUTCString": "Mon Apr 13 2015 07:07:44 GMT+0000 (UTC)"
    19. },
    20. {
    21. "dateUTCString": "Mon May 19 2014 22:47:56 GMT+0000 (UTC)"
    22. },
    23. {
    24. "dateUTCString": "Sat Jun 13 2015 00:38:36 GMT+0000 (UTC)"
    25. },
    26. {
    27. "dateUTCString": "Sat Feb 07 2015 23:55:14 GMT+0000 (UTC)"
    28. },
    29. {
    30. "dateUTCString": "Thu May 15 2014 19:44:57 GMT+0000 (UTC)"
    31. }
    32. ];
    33.  
    34. var newDates = [];
    35. for (var n = 0; n < origDates.length; n++) {
    36. var currentDate = new Date(origDates[n].dateUTCString); // Create a Date instance
    37. newDates.push(currentDate.getTime()); // getTime() for Unix time in ms
    38. }
    39. newDates.sort(); // Sort the dates chronologically
    40.  
    41. var myConfig = {
    42. type: "bar",
    43. utc: true,
    44. timezone: 9,
    45. title: {
    46. text: 'UTC Offset (9)'
    47. },
    48. plot: {
    49. valueBox: {
    50. text: "%kt",
    51. color: "#555",
    52. fontWeight: "none"
    53. }
    54. },
    55. scaleX: {
    56. values: newDates,
    57. transform: {
    58. type: "date",
    59. all: "%m/%d/%y\n%h:%i:%s"
    60. }
    61. },
    62. series: [{
    63. values: [35, 42, 67, 89, 25, 34, 67, 85, 43, 34]
    64. }]
    65. };
    66.  
    67. zingchart.render({
    68. id: 'myChart',
    69. data: myConfig,
    70. height: 400,
    71. width: '100%'
    72. });
    73.  
    74. timezone.addEventListener('change', function(e) {
    75. let timezoneValue = e.target.value;
    76. console.log(timezoneValue)
    77. zingchart.exec('myChart', 'modify', {
    78. data: {
    79. timezone: timezoneValue,
    80. title: {
    81. text: `UTC Offset (${timezoneValue})`
    82. },
    83. }
    84. });
    85. });
    86. });