Advertisement
Guest User

Untitled

a guest
Oct 26th, 2022
82
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.93 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8.  
  9. <link rel="stylesheet" href="css/bootstrap.min.css" />
  10. <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" />
  11.  
  12. <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
  13. <script type="text/javascript" src="js/bootstrap.bundle.min.js"></script>
  14. <script type="text/javascript" src="jqwidgets/jqx-all.js"></script>
  15. <script type="text/javascript" src="jqwidgets/globalization/globalize.js"></script>
  16. <script type="text/javascript" src="jqwidgets/globalization/globalize.culture.zh-TW.js"></script>
  17. </head>
  18. <body>
  19.  
  20. <div id="qcchart" style="width:800px; height: 500px;"></div>
  21. <div>
  22. <input type="button" class="btn btn-primary m-2" id="btnExport" value="Export" />
  23. </div>
  24.  
  25. <script>
  26. $(document).ready(function(){
  27.  
  28. InitChart();
  29.  
  30. $("#btnExport").on("click", function(){
  31. $('#qcchart').jqxChart('saveAsJPEG', 'myChart.jpeg', getExportServer());
  32. });
  33.  
  34. });
  35.  
  36. function getExportServer() {
  37. return 'https://www.jqwidgets.com/export_server/export.php';
  38. }
  39.  
  40. function InitChart() {
  41. // prepare data source
  42. var chartData = [
  43. { Country: 'Luxembourg', GDP: 81278.63, DebtPercent: 16.2, Debt: 13167.13806 },
  44. { Country: 'Singapore', GDP: 57596.47, DebtPercent: 102.4, Debt: 58978.78528 },
  45. { Country: 'Norway', GDP: 53285.21, DebtPercent: 47.7, Debt: 25417.04517 },
  46. { Country: 'USA', GDP: 45759.46, DebtPercent: 58.9, Debt: 26952.32194 },
  47. { Country: 'Austria', GDP: 39269.33, DebtPercent: 70.4, Debt: 27645.60832 },
  48. { Country: 'Germany', GDP: 34065.12, DebtPercent: 78.8, Debt: 26843.31456 },
  49. { Country: 'Canada', GDP: 38065.13, DebtPercent: 34, Debt: 12942.1442 },
  50. ];
  51.  
  52. // prepare jqxChart settings
  53. var settings = {
  54. title: "Economic comparison",
  55. description: "GDP and Debt in 2010",
  56. showLegend: true,
  57. enableAnimations: true,
  58. padding: { left: 5, top: 5, right: 5, bottom: 5 },
  59. titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
  60. source: chartData,
  61. xAxis:
  62. {
  63. dataField: 'Country'
  64. },
  65. colorScheme: 'scheme01',
  66. seriesGroups:
  67. [
  68. {
  69. type: 'column',
  70. columnsGapPercent: 50,
  71. valueAxis:
  72. {
  73. unitInterval: 5000,
  74. title: { text: 'GDP & Debt per Capita($)<br>' }
  75. },
  76. series: [
  77. { dataField: 'GDP', displayText: 'GDP per Capita' },
  78. { dataField: 'Debt', displayText: 'Debt per Capita' }
  79. ]
  80. },
  81. {
  82. type: 'line',
  83. valueAxis:
  84. {
  85. unitInterval: 10,
  86. title: { text: 'Debt (% of GDP)<br>' },
  87. position: 'right',
  88. gridLines: { visible: false }
  89. },
  90. series: [
  91. { dataField: 'DebtPercent', displayText: 'Debt (% of GDP)' }
  92. ],
  93. // annotations: [
  94. // {
  95. // type: "rect",
  96. // yValue: 90,
  97. // xValue: 2,
  98. // offset: { x: 5, y: -10 },
  99. // fillColor: "#FEFEFE",
  100. // lineColor: "#FEFEFE",
  101. // text: {
  102. // value: "Test Annotations",
  103. // offset: { x: 2, y: 2 },
  104. // class: "blueLabel",
  105. // angle: 0
  106. // }
  107. // },
  108. // ]
  109. }
  110. ]
  111. };
  112. // setup the chart
  113. $('#qcchart').jqxChart(settings);
  114. }
  115.  
  116. </script>
  117.  
  118. </body>
  119. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement