Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <title>JSP Page</title>
- <link rel="stylesheet" type="text/css" href="frontend/include/lib/ext/resources/css/ext-all.css" />
- <!-- GC -->
- <!-- LIBS -->
- <script type="text/javascript" src="frontend/include/lib/ext/adapter/ext/ext-base.js"></script>
- <script type="text/javascript" src="frontend/include/lib/ext/ext-all.js"></script>
- <link rel="stylesheet" type="text/css" href="frontend/include/lib/ext/resources/css/xtheme-gray.css" />
- <script type="text/javascript" src="frontend/public/page/displayGraphs.js"></script>
- </head>
- <body>
- <h1>Hello World!</h1>
- <div id="buttonDiv"></div>
- </body>
- </html>
- Ext.onReady(function(){
- function displayGraph() {
- window.show();
- }
- var displayButton = new Ext.Button({
- text: 'Display Graph',
- renderTo:'buttonDiv',
- tooltip: 'View the full message and delivery statuses',
- handler : displayGraph
- });
- var form = new Ext.form.FormPanel({
- border: false,
- buttonAlign: 'center',
- items:[]
- });
- form.add({
- cls: 'someCls',
- id: 'someId',
- autoLoad: {
- url:'graphs.jsp',
- scripts:true
- }
- // html: '<div id="chartdiv" style="width: 100%; height: 355px;"></div>'
- })
- var window = new Ext.Window({
- id: 'graphDetailsWindow',
- title: 'View AmChart Graph',
- modal: false,
- closable: true,
- closeAction: 'hide',
- width: 800,
- height: 480,
- plain:true,
- layout: 'fit',
- items: [form]
- })
- });
- var chart;
- var chartData = [{
- country: "USA",
- visits: 3025,
- color: "#FF0F00"},
- {
- country: "China",
- visits: 1882,
- color: "#FF6600"},
- {
- country: "Japan",
- visits: 1809,
- color: "#FF9E01"},
- {
- country: "Germany",
- visits: 1322,
- color: "#FCD202"},
- {
- country: "UK",
- visits: 1122,
- color: "#F8FF01"},
- {
- country: "France",
- visits: 1114,
- color: "#B0DE09"},
- {
- country: "India",
- visits: 984,
- color: "#04D215"},
- {
- country: "Spain",
- visits: 711,
- color: "#0D8ECF"},
- {
- country: "Netherlands",
- visits: 665,
- color: "#0D52D1"},
- {
- country: "Russia",
- visits: 580,
- color: "#2A0CD0"},
- {
- country: "South Korea",
- visits: 443,
- color: "#8A0CCF"},
- {
- country: "Canada",
- visits: 441,
- color: "#CD0D74"}];
- AmCharts.ready(function() {
- // SERIAL CHART
- chart = new AmCharts.AmSerialChart();
- chart.autoMarginOffset = 0;
- chart.dataProvider = chartData;
- chart.categoryField = "country";
- chart.startDuration = 1;
- // AXES
- // category
- var categoryAxis = chart.categoryAxis;
- categoryAxis.labelRotation = 45; // this line makes category values to be rotated
- categoryAxis.gridAlpha = 0;
- categoryAxis.fillAlpha = 1;
- categoryAxis.fillColor = "#FAFAFA";
- categoryAxis.gridPosition = "start";
- // value
- var valueAxis = new AmCharts.ValueAxis();
- valueAxis.dashLength = 5;
- valueAxis.title = "Visitors from country";
- valueAxis.axisAlpha = 0;
- chart.addValueAxis(valueAxis);
- // GRAPH
- var graph = new AmCharts.AmGraph();
- graph.valueField = "visits";
- graph.colorField = "color";
- graph.balloonText = "[[category]]: [[value]]";
- graph.type = "column";
- graph.lineAlpha = 0;
- graph.fillAlphas = 1;
- chart.addGraph(graph);
- // WRITE
- chart.write("chartdiv");
- });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement