title: Displaying Am Charts in an extjs window
body: <p>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.</p>
  
  <p>I'm using amCharts 2.8.4 and extjs 2.3</p>
  
  <p>html to load graph:</p>
  
  <pre><code>    &lt;html&gt;
      &lt;head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
          &lt;title&gt;JSP Page&lt;/title&gt;
           &lt;link rel="stylesheet" type="text/css" href="frontend/include/lib/ext/resources/css/ext-all.css" /&gt;
          &lt;!-- GC --&gt;
          &lt;!-- LIBS --&gt;
          &lt;script type="text/javascript" src="frontend/include/lib/ext/adapter/ext/ext-base.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="frontend/include/lib/ext/ext-all.js"&gt;&lt;/script&gt;
          &lt;link rel="stylesheet" type="text/css" href="frontend/include/lib/ext/resources/css/xtheme-gray.css" /&gt;
          &lt;script type="text/javascript" src="frontend/public/page/displayGraphs.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;h1&gt;Hello World!&lt;/h1&gt;
          &lt;div id="buttonDiv"&gt;&lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>javascript code to popup window:</p>
  
  <pre><code>    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: '&lt;div id="chartdiv" style="width: 100%; height: 355px;"&gt;&lt;/div&gt;'
      })
  
      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]
      })
  });
  </code></pre>
  
  <p>amChartsExample.js: </p>
  
  <pre><code>    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");
  });
  </code></pre>