Advertisement
Guest User

Untitled

a guest
Mar 1st, 2015
213
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.52 KB | None | 0 0
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  4. <title>JSP Page</title>
  5. <link rel="stylesheet" type="text/css" href="frontend/include/lib/ext/resources/css/ext-all.css" />
  6. <!-- GC -->
  7. <!-- LIBS -->
  8. <script type="text/javascript" src="frontend/include/lib/ext/adapter/ext/ext-base.js"></script>
  9. <script type="text/javascript" src="frontend/include/lib/ext/ext-all.js"></script>
  10. <link rel="stylesheet" type="text/css" href="frontend/include/lib/ext/resources/css/xtheme-gray.css" />
  11. <script type="text/javascript" src="frontend/public/page/displayGraphs.js"></script>
  12. </head>
  13. <body>
  14. <h1>Hello World!</h1>
  15. <div id="buttonDiv"></div>
  16. </body>
  17. </html>
  18.  
  19. Ext.onReady(function(){
  20.  
  21. function displayGraph() {
  22. window.show();
  23. }
  24.  
  25. var displayButton = new Ext.Button({
  26. text: 'Display Graph',
  27. renderTo:'buttonDiv',
  28. tooltip: 'View the full message and delivery statuses',
  29. handler : displayGraph
  30. });
  31.  
  32. var form = new Ext.form.FormPanel({
  33. border: false,
  34. buttonAlign: 'center',
  35. items:[]
  36. });
  37.  
  38. form.add({
  39. cls: 'someCls',
  40. id: 'someId',
  41. autoLoad: {
  42. url:'graphs.jsp',
  43. scripts:true
  44. }
  45. // html: '<div id="chartdiv" style="width: 100%; height: 355px;"></div>'
  46. })
  47.  
  48. var window = new Ext.Window({
  49. id: 'graphDetailsWindow',
  50. title: 'View AmChart Graph',
  51. modal: false,
  52. closable: true,
  53. closeAction: 'hide',
  54. width: 800,
  55. height: 480,
  56. plain:true,
  57. layout: 'fit',
  58. items: [form]
  59. })
  60. });
  61.  
  62. var chart;
  63.  
  64. var chartData = [{
  65. country: "USA",
  66. visits: 3025,
  67. color: "#FF0F00"},
  68. {
  69. country: "China",
  70. visits: 1882,
  71. color: "#FF6600"},
  72. {
  73. country: "Japan",
  74. visits: 1809,
  75. color: "#FF9E01"},
  76. {
  77. country: "Germany",
  78. visits: 1322,
  79. color: "#FCD202"},
  80. {
  81. country: "UK",
  82. visits: 1122,
  83. color: "#F8FF01"},
  84. {
  85. country: "France",
  86. visits: 1114,
  87. color: "#B0DE09"},
  88. {
  89. country: "India",
  90. visits: 984,
  91. color: "#04D215"},
  92. {
  93. country: "Spain",
  94. visits: 711,
  95. color: "#0D8ECF"},
  96. {
  97. country: "Netherlands",
  98. visits: 665,
  99. color: "#0D52D1"},
  100. {
  101. country: "Russia",
  102. visits: 580,
  103. color: "#2A0CD0"},
  104. {
  105. country: "South Korea",
  106. visits: 443,
  107. color: "#8A0CCF"},
  108. {
  109. country: "Canada",
  110. visits: 441,
  111. color: "#CD0D74"}];
  112.  
  113.  
  114. AmCharts.ready(function() {
  115. // SERIAL CHART
  116. chart = new AmCharts.AmSerialChart();
  117. chart.autoMarginOffset = 0;
  118. chart.dataProvider = chartData;
  119. chart.categoryField = "country";
  120. chart.startDuration = 1;
  121.  
  122. // AXES
  123. // category
  124. var categoryAxis = chart.categoryAxis;
  125. categoryAxis.labelRotation = 45; // this line makes category values to be rotated
  126. categoryAxis.gridAlpha = 0;
  127. categoryAxis.fillAlpha = 1;
  128. categoryAxis.fillColor = "#FAFAFA";
  129. categoryAxis.gridPosition = "start";
  130.  
  131. // value
  132. var valueAxis = new AmCharts.ValueAxis();
  133. valueAxis.dashLength = 5;
  134. valueAxis.title = "Visitors from country";
  135. valueAxis.axisAlpha = 0;
  136. chart.addValueAxis(valueAxis);
  137.  
  138. // GRAPH
  139. var graph = new AmCharts.AmGraph();
  140. graph.valueField = "visits";
  141. graph.colorField = "color";
  142. graph.balloonText = "[[category]]: [[value]]";
  143. graph.type = "column";
  144. graph.lineAlpha = 0;
  145. graph.fillAlphas = 1;
  146. chart.addGraph(graph);
  147.  
  148. // WRITE
  149. chart.write("chartdiv");
  150. });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement