• 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. <script nonce="undefined" src="https://cdn.zingchart.com/modules/zingchart-dragging.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: 'bullet',
    18. title: {
    19. text: 'Pushups Per Day'
    20. },
    21. subtitle: {
    22. text: 'Bars are draggable'
    23. },
    24. scaleX: {
    25. labels: ['Mon', 'Tues', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun']
    26. },
    27. series: [{
    28. dataDragging: true,
    29. values: [20, 40, 14, 50, 15, 35, 5],
    30. goals: [25, 43, 30, 40, 21, 59, 35],
    31. goal: {
    32. backgroundColor: '#64b5f6',
    33. borderWidth: 0
    34. },
    35. tooltip: { // tooltip changes based on value
    36. rules: [{
    37. rule: '%v >= %g', // if greater than goal
    38. text: 'You reached your goal!'
    39. },
    40. {
    41. rule: '%v < %g/2', // if less than half goal
    42. text: 'You need to work harder!'
    43. },
    44. {
    45. rule: '%v >= %g/2 && %v < %g', // if in between
    46. text: 'Almost at your goal!'
    47. }
    48. ]
    49. },
    50. rules: [ // rules for color
    51. {
    52. rule: '%v >= %g', // if greater than goal
    53. backgroundColor: '#81c784'
    54. },
    55. {
    56. rule: '%v < %g/2', // if less than half goal
    57. backgroundColor: '#ef5350'
    58. },
    59. {
    60. rule: '%v >= %g/2 && %v < %g', // if in between
    61. backgroundColor: '#ffca28'
    62. }
    63. ]
    64. }]
    65. };
    66.  
    67. zingchart.render({
    68. id: 'myChart',
    69. data: myConfig,
    70. height: 500,
    71. width: '100%',
    72. output: "svg",
    73. modules: "dragging"
    74. });
    75. </script>
    76. </body>
    77.  
    78. </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. <script src="https://cdn.zingchart.com/modules/zingchart-dragging.min.js"></script>
    9. </head>
    10.  
    11. <body>
    12. <div id='myChart'></div>
    13. </body>
    14.  
    15. </html>
    1.  
    1. var myConfig = {
    2. type: 'bullet',
    3. title: {
    4. text: 'Pushups Per Day'
    5. },
    6. subtitle: {
    7. text: 'Bars are draggable'
    8. },
    9. scaleX: {
    10. labels: ['Mon', 'Tues', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun']
    11. },
    12. series: [{
    13. dataDragging: true,
    14. values: [20, 40, 14, 50, 15, 35, 5],
    15. goals: [25, 43, 30, 40, 21, 59, 35],
    16. goal: {
    17. backgroundColor: '#64b5f6',
    18. borderWidth: 0
    19. },
    20. tooltip: { // tooltip changes based on value
    21. rules: [{
    22. rule: '%v >= %g', // if greater than goal
    23. text: 'You reached your goal!'
    24. },
    25. {
    26. rule: '%v < %g/2', // if less than half goal
    27. text: 'You need to work harder!'
    28. },
    29. {
    30. rule: '%v >= %g/2 && %v < %g', // if in between
    31. text: 'Almost at your goal!'
    32. }
    33. ]
    34. },
    35. rules: [ // rules for color
    36. {
    37. rule: '%v >= %g', // if greater than goal
    38. backgroundColor: '#81c784'
    39. },
    40. {
    41. rule: '%v < %g/2', // if less than half goal
    42. backgroundColor: '#ef5350'
    43. },
    44. {
    45. rule: '%v >= %g/2 && %v < %g', // if in between
    46. backgroundColor: '#ffca28'
    47. }
    48. ]
    49. }]
    50. };
    51.  
    52. zingchart.render({
    53. id: 'myChart',
    54. data: myConfig,
    55. height: 500,
    56. width: '100%',
    57. output: "svg",
    58. modules: "dragging"
    59. });