• 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. type: "radar",
    32. title: {
    33. text: "click and drag to select points"
    34. },
    35. subtitle: {
    36. text: "hold control (win) or command (osx) to freehand draw selection"
    37. },
    38. plot: {
    39. lineWidth: 3,
    40. selectedState: {
    41. lineColor: 'green'
    42. },
    43. marker: {
    44. visible: true,
    45. size: 4
    46. },
    47. selectedMarker: {
    48. size: 5,
    49. borderColor: "black",
    50. borderWidth: 2,
    51. backgroundColor: "green",
    52. alpha: 0.7
    53. }
    54. },
    55. selectionTool: {
    56. mask: {
    57. borderColor: "red", // will set line color when drawing
    58. borderWidth: 2, // will set line width when drawing
    59. backgroundColor: "#969696"
    60. }
    61. },
    62. series: [{
    63. values: [35, 25, 15, 41, 2, 45, 14, 65, 40]
    64. },
    65. {
    66. values: [89, 40, 56, 78, 15, 10, 40, 45, 5]
    67. }
    68. ]
    69. };
    70.  
    71. zingchart.loadModules('selection-tool', function() {
    72. zingchart.render({
    73. id: 'myChart',
    74. data: myConfig,
    75. height: '100%',
    76. width: '100%',
    77. modules: 'selection-tool'
    78. });
    79. });
    80. </script>
    81. </body>
    82.  
    83. </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. type: "radar",
    3. title: {
    4. text: "click and drag to select points"
    5. },
    6. subtitle: {
    7. text: "hold control (win) or command (osx) to freehand draw selection"
    8. },
    9. plot: {
    10. lineWidth: 3,
    11. selectedState: {
    12. lineColor: 'green'
    13. },
    14. marker: {
    15. visible: true,
    16. size: 4
    17. },
    18. selectedMarker: {
    19. size: 5,
    20. borderColor: "black",
    21. borderWidth: 2,
    22. backgroundColor: "green",
    23. alpha: 0.7
    24. }
    25. },
    26. selectionTool: {
    27. mask: {
    28. borderColor: "red", // will set line color when drawing
    29. borderWidth: 2, // will set line width when drawing
    30. backgroundColor: "#969696"
    31. }
    32. },
    33. series: [{
    34. values: [35, 25, 15, 41, 2, 45, 14, 65, 40]
    35. },
    36. {
    37. values: [89, 40, 56, 78, 15, 10, 40, 45, 5]
    38. }
    39. ]
    40. };
    41.  
    42. zingchart.loadModules('selection-tool', function() {
    43. zingchart.render({
    44. id: 'myChart',
    45. data: myConfig,
    46. height: '100%',
    47. width: '100%',
    48. modules: 'selection-tool'
    49. });
    50. });