Javascript-форум - chart undefined

Помогите пожалуйста разобраться - почему-то не срабатывают кнопки
- при вызове функции group - выдает ошибку в консоли:
Type error: chart is undefined
не могу понять почему не определен тип ?
если вставить alert(p); в функцию group - он срабатывает и выдает то что надо - в зависисимости от нажатой кнопки :
Group to:
<input type="button" value="Hours" onclick="group('hh')"/>
<input type="button" value="Days" onclick="group('DD')"/>
<input type="button" value="Weeks" onclick="group('WW')"/>

Графики тоже рисуются нормально - проблема только с этими кнопками, точнее с переменной chart... Помогите плиз...

<script>
var chart;
var chartData1 = [some data];
var chartData2 = [some data];
var chartData3 = [some data];



AmCharts.ready(function() {
    createStockChart();

});





function createStockChart() {


    var chart = new AmCharts.AmStockChart();
    
    

    
    
    chart.pathToImages = "/static/amstockchart/amcharts/images/";
    chart.dataDateFormat = "YYYY-MM-DD HH:NN:SS";
    chart.glueToTheEnd = true;
    chart.parseDates = true;
    chart.balloon.showBullet = true;
    chart.categoryAxesSettings = {minPeriod:"mm"};
    

    // DATASETS //////////////////////////////////////////
    // create data sets first
    var dataSet1 = new AmCharts.DataSet();
    dataSet1.title = "PDSN IN";
    dataSet1.color = "blue";
    dataSet1.fieldMappings = [{
        fromField: "value",
        toField: "value"}];
    dataSet1.dataProvider = chartData2;
    dataSet1.categoryField = "date";

    var dataSet2 = new AmCharts.DataSet();
    dataSet2.title = "PDSN OUT";
    dataSet2.color = "green";
    dataSet2.fieldMappings = [{
        fromField: "value",
        toField: "value"}];
    dataSet2.dataProvider = chartData3;
    dataSet2.categoryField = "date";

    var dataSet3 = new AmCharts.DataSet();
    dataSet3.title = "ropEcpCount(x100)";
    dataSet3.color = "orange";
    dataSet3.lineThickness = 2;
    dataSet3.fieldMappings = [{
        fromField: "value",
        toField: "value"}];
    dataSet3.dataProvider = chartData1;
    dataSet3.categoryField = "date";

    var dataSet4 = new AmCharts.DataSet();
    dataSet4.title = "------";
    dataSet4.color = "blue";

    // set data sets to the chart
    chart.dataSets = [dataSet1, dataSet2,dataSet3,dataSet4];
    

    // PANELS ///////////////////////////////////////////                                                  
    // first stock panel
    var stockPanel1 = new AmCharts.StockPanel();
    stockPanel1.showCategoryAxis = true;
    stockPanel1.title = "PDSN and ROP";
    stockPanel1.fontSize = 16;
    stockPanel1.borderAlpha = 1;
    stockPanel1.borderColor = "black";
    stockPanel1.recalculateToPercents = "never";
    stockPanel1.percentHeight = 100;

    // graph of first stock panel
    var graph1 = new AmCharts.StockGraph();
    graph1.valueField = "value";
    graph1.comparable = true;
    graph1.compareField = "value";
    graph1.fillAlphas = 0.3;
    graph1.lineThickness = 2;
    graph1.showBalloon = true;
    graph1.bullet = "round";
    graph1.hideBulletsCount = 50;
    graph1.balloonText = "[[title]]:<b>[[value]]</b>";
    graph1.compareGraphBalloonText = "[[title]]:<b>[[value]]</b>";
    graph1.compareGraphLineThickness = 1;
    graph1.compareGraphType = "column";
    graph1.compareGraphFillAlphas = 0.5;
    stockPanel1.addStockGraph(graph1);

    // create stock legend                
    stockLegend = new AmCharts.StockLegend();
    stockLegend.periodValueTextComparing = "[[value]]";
    stockLegend.valueTextRegular = "[[value]]";
    stockLegend.markerBorderColor = "red";
    stockLegend.markerSize = 15;
    stockLegend.autoMargins =true;
    //stockLegend.align = "left";
    //stockLegend.equalWidths = false;
    stockLegend.markerLabelGap = 10;
    stockLegend.valueAlign = "left";
    stockLegend.spacing = 100;
    //stockLegend.position = "absolute";
    //stockLegend.maxColumns = 4;
    stockLegend.verticalGap = 10;
    stockLegend.valueWidth = 70;
    stockLegend.periodValueText = "Min: [[value.low]] Max: [[value.high]]";
    stockPanel1.addLegend(stockLegend, "legenddiv");
    
    // set panels to the chart
    chart.panels = [stockPanel1];


    // OTHER SETTINGS ////////////////////////////////////
    var sbsettings = new AmCharts.ChartScrollbarSettings();
    sbsettings.graph = graph1;
    sbsettings.position = "top";
    sbsettings.graphFillAlpha = 1;
    sbsettings.color ="black";
    sbsettings.fontSize = 18;
    chart.chartScrollbarSettings = sbsettings;
    
    
    var cursorSettings = new AmCharts.ChartCursorSettings();
    cursorSettings.valueBalloonsEnabled = true;
    cursorSettings.categoryBalloonEnabled = true;
    chart.chartCursorSettings = cursorSettings;
    

    
    
    // category axis /grouping
    chart.categoryAxesSettings.maxSeries = 7;
    chart.categoryAxesSettings.groupToPeriods = ["mm"];
    
    // PERIOD SELECTOR ///////////////////////////////////
    var periodSelector = new AmCharts.PeriodSelector();
    periodSelector.position = "bottom";
    periodSelector.periods = [{
				period: "hh",
				count: 1,
				label: "1 hour",
				

			}, {
				period: "hh",
				count: 2,
				label: "2 hours"
			}, {
				period: "hh",
				count: 5,
				label: "5 hours"
			}, {
				period: "hh",
				count: 12,
				label: "12 hours",
                selected: true
			}, {
                period: "hh",
                count: 24,
                label: "24 hours"
            }, {
                period: "DD",
                count: 5,
                label: "5 DAYS"
            },{
                period: "DD",
                count: 7,
                label: "WEEK"
            },{
				period: "MAX",
				label: "MAX"
			}];
    chart.periodSelector = periodSelector;


    // DATA SET SELECTOR
    var dataSetSelector = new AmCharts.DataSetSelector();
    dataSetSelector.position = "left";
    //dataSetSelector.showInCompare = true;
    //dataSetSelector.listHeight = 40;
    dataSetSelector.width = 120;
    chart.dataSetSelector = dataSetSelector;

    chart.write('chartdiv');
    
        function group(p) {
    chart.categoryAxesSettings.groupToPeriods = [p];
    chart.validateData();
    }
    
    // set up the chart to update every second
    setInterval(function () {
        // normally you would load new datapoints here,
        // but we will just generate some random values
        // and remove the value from the beginning so that
        // we get nice sliding graph feeling
        
        
                
        
        
        // мой запрос
            function loadDataPoints(callback) {
        var request = new XMLHttpRequest();
        request.open('GET', '/ITN/ROP/test_real_data/');
        request.onreadystatechange = function() {
            if (this.readyState !== (this.DONE || 4))
                return;
            if (this.status !== 200)
                return alert('Request error: ' + this.status);
            callback(JSON.parse(this.responseText));
        };
    request.send(null);
    }
        
        
            loadDataPoints(function(dataPoints){
        //alert(dataPoints[0]);
       
        
              
        // add new datapoint at the end
        var newDate = new Date(chartData1[chartData1.length - 1].date);
        newDate.setDate(newDate.getDate() + 1);
        
        var i = chartData1.length;
      
        chart.dataSets[0].dataProvider.push({
            date: dataPoints[0],
            value: dataPoints[1]
        });
        chart.dataSets[1].dataProvider.push({
            date: dataPoints[2],
            value: dataPoints[3]
        });
        chart.dataSets[2].dataProvider.push({
            date: dataPoints[4],
            value: dataPoints[5]
        });        


        chartData1.shift();
        chartData2.shift();
        chartData3.shift();         
        
        
            });
        
        
        
              chart.validateData();

    }, 60000);  
        
        
        
  
}
    function group(p) {
    chart.categoryAxesSettings.groupToPeriods = [p];
    chart.validateData();
    }
</script>

</head>

<div id="legenddiv" style="border:2px; border-color:black; width:100%; height:20%;"> </div>
<div id="chartdiv" style="background-color:#eeeeee; width: 100%; height: 55%;"></div>

Group to:
<input type="button" value="Hours" onclick="group('hh')"/>
<input type="button" value="Days" onclick="group('DD')"/>
<input type="button" value="Weeks" onclick="group('WW')"/>