I have been trying to build a sample web app that integrates amChart with extjs 2.3. All I have to do is display the chart on a pop up window. I did this by creating a page that loads the chart, then I used autoLoad on a form panel to load the page. I then put the form panel in the window. the text on the page is displayed but the graph isn't.
I'm using amCharts 2.8.4 and extjs 2.3
html to load graph:
<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>
javascript code to popup window:
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]
})
});
amChartsExample.js:
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");
});
Try to call chart.validateNow() after you initialize your popup window.